...
On impose le téléchargement d’une image lourde à tous les utilisateurs ; y compris ceux dont les terminaux n’ont pas besoin d’une telle précision. On augmente donc le temps de téléchargement !
Il permet de définir une image adaptée au terminal en fonction de la taille de l'écran et de se densité de pixels.
Par ex. :
<img src="logo-esup.png"
srcset="logo-esup.png 1x,
srcset="logo-esup-320.png 320w 1x,
srcset="logo-esup-640.png 320w 2x"
width="850" height="475" alt="ESUP Portail">
Dans l'exemple ci dessus, l'image chargée par défaut fait 850x475 pixels. Cela permet aux navigateurs, qui ne prennent pas en charge l'attribut srcset, de charger une image de contenu.
De même pour les autres navigateurs qui savent gérer l’attribut mais qui ne trouvent aucune correspondance dans les critères de srcset.
Les alternatives possibles pour chaque image sont :
L'attribut srcset peut également être couplé avec l'attribut sizes :
Par ex. :
<img src="logo-esup.png"
srcset="logo-esup.png 1x,
srcset="logo-esup-320.png 320w 1x,
srcset="logo-esup-640.png 320w 2x"
width="850" height="475" alt="ESUP Portail"
sizes="(min-width: 600px) 200px, 50vw">
Quand la condition est vraie (min_width: 600px) l'image aura une largeur de 200px , sinon 50% du viewport.
A noter toutefois, la faible compatibilité avec certains navigateurs (ie par ex. ) : http://caniuse.com/#feat=srcset