<picture>
  <source 
    media="(min-width: 481px)"
    srcset="https://www.histoiredor.com/on/demandware.static/-/Library-Sites-HO-sharedlibrary/default/dw201cf123/images/01-HeroSlider/Homepage/VPete/HO_FR_D_Bandeau-rea-VP_20210625.jpg" />
  <img class=hero fetchpriority=high />
</picture>
<p>Ici, en dessous de 480 pixels, cette grande bannière n'est tout simplement par téléchargée, ce qui aurait été le cas si on l'avait masqué en CSS via <code>display:none</code>. Note : le tag <code>IMG</code> nous sert à poser les attributs (<code>class</code>, <code>fetchpriority</code>, <code>alt</code> …)</p>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.