...

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 !

L'attribut srcset :

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 :

1x : densité de pixel à 1 (est identique à src)

320w 1x : propose une image de 320 pixels de large

320w 2x : propose une image de 320 pixels de large et ou la densité est inférieure ou égale à 2

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