Introduction aux images responsives, 4 : descripteurs de largeur srcset

Les descripteurs de densité d’affichage sont parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles. C'est ici qu'interviennent les descripteurs de largeur! Par Jason Grisgsby.

Par

Dans la 3e partie, nous avons vu les descripteurs de densité d’affichage et nous sommes arrivés à la conclusion qu’ils étaient parfaits pour les images de largeur fixe mais insuffisants pour les images flexibles.

C’est avec les images flexibles que les descripteurs de largeur srcset brillent de tous leurs feux.

Descripteurs de largeur

La syntaxe des descripteurs de largeur est similaire à celle des descripteurs de densité d’affichage. La valeur de l’attribut srcset est une liste de sources d’images et de descripteurs, chaque source étant séparée de la suivante par une virgule.

image
Surlignée en jaune pour chaque source, la largeur de l’image. C’est le navigateur qui choisit la meilleure source.

La différence est qu’au lieu d’avoir 1×, 2×, et d’autres valeurs représentant la densité, nous avons maintenant une liste de largeurs d’image, comme 320w, 480w, etc.

<img src="cat.jpg" alt="cat" 
srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">

Le navigateur choisit la meilleure source ?

Lorsque vous utilisez les descripteurs de largeur, vous fournissez au navigateur une liste d’images et leur largeur réelle, de façon à ce qu’il puisse sélectionner la meilleure source. Comment procède-t-il ?

Votre première idée est peut-être que le navigateur compare la dimension de l’élément dans la page et la liste des largeurs que vous avez indiquées. C’est une bonne idée, mais ce n’est pas comme ça que ça marche.

En fait, quand un navigateur commence à télécharger des images, souvent il ne connaît pas la dimension de l’élément image dans la page.

Pré-chargement des images

Si vous regardez la timeline du rendu d’une page par le navigateur, vous remarquerez quelque chose de frappant :

image

Peu après que le navigateur ait téléchargé le HTML, il va chercher le CSS et le JavaScript. Mais avant que ceux-ci n’aient été complètement chargés, le navigateur commence déjà à télécharger les images.

Le CSS et le JavaScript n’étant pas complets, cela signifie que le navigateur télécharge des images sans même connaître la mise en page — et par conséquent il ne sait pas quelle dimension aura l’élément image.

Au passage, c’est ce comportement de pré-chargement qui nous empêche de résoudre avec CSS ou JavaScript le problème des images responsives : ils ne sont pas disponibles au moment où le navigateur commence le téléchargement des images.

La seule chose que connaisse le navigateur, c’est la dimension du viewport. Une fois que nous avons dépassé le stade des descripteurs de densité, tout s’articule autour de la question de la taille du viewport.

Pourquoi est-ce important ?

Le viewport peu parfois remplacer à peu de frais les informations sur la taille réelle de l’image. Prenez ces images sur le site de l’épicerie de Walmart :

image
Les images ont presque la même taille que le viewport.

Sur les viewports étroits, les images ont presque la même taille que la largeur du viewport. Du coup, la mise en page ne pose pas trop de problème, il y a de bonnes chances que ça marche.

Pour les écrans larges, c’est une autre affaire :

image
Le viewport ne nous dit pas grand chose

Dans ce deuxième exemple, le viewport a une largeur de 1540px, mais les images ne font que 254px de large. Même si le navigateur connaît la largeur du viewport, cela ne lui sera pas d’un grand secours pour sélectionner la bonne source d’image.

Size à la rescousse !

Comment indiquer au navigateur la dimension de l’image afin qu’il télécharge la bonne source à partir de notre liste de srcset ? En utilisant l’attribut size !

La suite dans notre 5e partie : Dimensions.

La liste des articles de cette série (en cours) :

  1. Définitions
  2. Img requise
  3. Densité d’affichage srcset
  4. Descripteurs de largeur srcset
  5. Dimensions
  6. Élément picture
  7. Type
  8. Images responsives CSS
  9. Points de rupture image

Intéressé par le Responsive Web Design ? Retrouvez une liste des meilleurs articles et ressources du web.

Articles sur les mêmes thèmes dans la Cascade :

Images responsives, picture et srcset
Images responsives : cas d’utilisation et snippets


original paru le dans Cloud Four Blog.

Sur l’auteur : passe bien trop de temps à réfléchir sur l’univers mobile. Il a fondé Mobile Portland, une organisation à but non lucratif qui se consacre à éduquer, promouvoir et soutenir la communauté mobile de Portland. Co-fondateur de Cloud Four, il est aussi co-auteur de Head First Mobile Web et il donne de nombreuses conférences sur la technologie et la stratégie mobiles. On peut le suivre sur Twitter, Facebook, Google+.

Traduit avec l’aimable autorisation de Cloud Four Blog et de l’auteur.
Copyright Cloud Four Blog © 2015.