Comment rendre des images réactives dans des modèles ?

La manière la plus simple de rendre des images réactives dans des modèles est d'utiliser la fonction html :

{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={responsive: true}) }}

Exemple

Ci-dessous un exemple avec une image PNG 1000x1000 pixels.

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

Configuration

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

HTML généré

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

Live example