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.

L’idée est d’avoir une image plus légère selon la taille de l’écran, proposer une petite image sur écran de 320 × 240 et une plus grande sur du 1920 × 1080 ; attention avec les écrans hdpi (retina) 320 × 240 demande 640 × 480…

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).

  


     
     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">

Sans les commentaires :

  jean doux