Responsive Resolutions Use the srcset and sizes attributes to render various resolutions of the same image at specific breakpoints.
Important Notes: The srcset attribute accepts one or more strings separated by commas, indicating possible image sources for the user agent to use. Each string is composed of a URL to an image and a width descriptor. For example, srcset="image/400x300.jpg 400w, image/800x600.jpg 800w, image/1600x1200.jpg 1600w". The sizes attribute should contain a number value with the vw unit. The number should be determined by the largest size which the image could take up relative to screen size. For example, a large image taking up full width of a page should use something around 96vw to 100vw; a small image taking up 1 column of a 3-column layout should use 33vw. For more advanced use cases, reference the MDN article on responsive images.
Demo Alt text.
Twig
{% include '@bolt-elements-image/image.twig' with {
  attributes: {
    alt: 'Alt text.',
    src: 'path/image-800.jpg',
    srcset: 'path/image-400.jpg 400w, path/image-800.jpg 800w',
    sizes: '50vw',
    width: 800,
    height: 450,
  },
} only %}
HTML
<img alt="Alt text." src="path/image-800.jpg" srcset="path/image-400.jpg 400w, path/image-800.jpg 800w" sizes="50vw" width=800 height=450 class="e-bolt-image">