<img
  class="hero"
  srcset="
    https://via.placeholder.com/360x200.png?text=360w 360w,
    https://via.placeholder.com/540x200.png?text=540w 540w,
    https://via.placeholder.com/720x200.png?text=720w 720w,
    https://via.placeholder.com/900x200.png?text=900w 900w,
    https://via.placeholder.com/1080x200.png?text=1080w 1080w,
    https://via.placeholder.com/1296x200.png?text=1296w 1296w,
    https://via.placeholder.com/1512x200.png?text=1512w 1512w,
    https://via.placeholder.com/1728x200.png?text=1728w 1728w,
    https://via.placeholder.com/2048x200.png?text=2048w 2048w
  "
 src="https://via.placeholder.com/1024x200.png?text=image%20de%20repli"
 sizes=50vw
 width=100%
 height=200
/>
<p>Le navigateur est censé appliquer la formule de calcul suivante pour trouver l'image la plus raisonnable en terme de qualité d'affichage et de dimensions : <ul><li>Viewport width <li> X Device Pixel Ratio <li> X attribut <code>sizes</code> (ici 50%)</ul>
  
l'attribut <code>src</code> est là pour les navigateurs ne comprenant pas <code>srcset</code> (IE, googlebot …)

</p>