Optimisation des images avec srcset
Suite de l’épisode s00e00, avec un peu de courage et de code, on peut accélérer le chargement des pages. Pour un portfolio sur une colonne, je propose ce code ; si vous avez plusieurs colonnes, il faudra écrire une « formule magique » différente.
Srcset permet de proposer différentes versions d’une image selon le type d’écran. L’usage principal est d’adapter la résolution à la largeur et la définition de l’appareil.
Pour plus de finesse, on lui ajoute aussi un attribut sizes afin de suivre les adaptations de mise en page. Le cas fréquent étant le passage sur plusieurs colonnes.
J’ai préparé 3 images une small ‑s de 320px de largeur, une « normale » de 598px et une large ‑l de 1196px pour les retina.
Voici le code commenté pour avoir une image faisant sa taille originale (598px) ou moins selon la largeur du viewport (égale la largeur du smartphone ou de la fenêtre du navigateur).
<!-- hdpi = 1 sur beaucoup d'écrans hdpi = 2 sur retina / smartphone moderne hdpi = 3 sur certains modèles --> <img src="img/jean-doux.png" <!-- si le navigateur ne sait pas faire srcset, la taille moyenne --> <!-- proposition de sources au navigateur --> srcset="img/jean-doux-s.png 320w, <!-- cette image fait 320px de large--> img/jean-doux.png 598w, <!-- celle-ci 598px --> img/jean-doux-l.png 1196w" <!--celle-là 1196px --> <!-- les conditions du plus petit au plus grand --> sizes="(max-width: 598px) 100vw, <!-- si le viewport fait maximum 598px l'image fera toute la largeur*hdpi --> 598px" <!-- au dessus de 598px, tu fais 598px*hdpi --> alt="jean doux">
Sans les commentaires :
<img src="img/jean-doux.png" srcset="img/jean-doux-s.png 320w, img/jean-doux.png 598w, img/jean-doux-l.png 1196w" sizes="(max-width: 598px) 100vw, 598px" alt="jean doux">