Basic Image
An image element embeds a responsive graphic on the page.
Important Notes:
To make an image accessible to screen readers and other assistive technology, make sure to include text description via the alt
attribute.
To indicate an image as decoration, leave the alt
attribute blank, do not remove it. For example: alt=""
.
It is best practice to always define the width
and height
attributes, so the space that the image would take up is already calculated before the image finishes loading. This helps to reduce cumulative layout shifts.
If responsiveness is not needed, please use a plain <img>
element instead.
Demo
Twig
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Alt text.',
src: 'path/image.jpg',
width: 400,
height: 225,
},
} only %}
HTML
<img alt="Alt text." src="path/image.jpg" width=400 height=225 class="e-bolt-image">