Images : srcset and sizes attributes

Bonsoir,

Je cherche à optimiser mon code html pour mes images à l'aide des attributs html5 srcset et sizes avant de l'intégrer à un WordPress. Je ne sais pas trop où faire mes break points ni comment prendre en charge les écrans Retina afin d'être le plus efficace.

Voilà où j'en suis pour l'instant :

Code:

---

<img src="../Images/Demo/lotusOriginal.jpg" srcset="../Images/Demo/lotusOriginal.jpg 1024w 4x, ../Images/Demo/lotus2048.jpg 640w 4x, ../Images/Demo/lotus1024.jpg 320w 4x, ../Images/Demo/lotusOriginal.jpg 2048w 2x, ../Images/Demo/lotus2048.jpg 1024w 2x, ../Images/Demo/lotus1024.jpg 640w 2x, ../Images/Demo/lotus640.jpg 320w 2x, ../Images/Demo/lotusOriginal.jpg 3000w, ../Images/Demo/lotus2048.jpg 2048w, ../Images/Demo/lotus1024.jpg 1024w, ../Images/Demo/lotus640.jpg 640w, ../Images/Demo/lotus320.jpg 320w" sizes="100vw" alt="test"/>

---

Le pen : Picture tag, srcset and sizes attributes

Je suis ouvert à toute suggestion d'amélioration.