How to render responsive images in templates?

The easiest way to render responsive images in templates is with the html filter:

{{ asset('image.jpg')|html(attributes={alt: 'Alternative description'}, options={responsive: true}) }}

Example

Bellow an example with a PNG image 1000x1000 pixels.

{{ asset('images/cecil-logo-1000.png')|html(attributes={alt: 'Cecil logo'}, options={responsive: true}) }}

Configuration

assets:
  images:
    responsive:
      widths: [768, 1024]

Generated HTML

<img
  alt="Cecil logo"
  width="1000"
  height="1000"
  src="/images/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png"
  srcset="/assets/thumbnails/768/images/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 768w,
          /images/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 1000w"
  sizes="100vw"
>

Live example