Introduction aux images responsives 5 : dimensions

Nous avons bien avancé dans notre feuilleton de l'été. Il est temps maintenant de faire connaissance avec le véritable héros de notre histoire, l’attribut `sizes`. Par Jason "Great" Grigsby.

Par

La dernière fois que nous avons laissé nos intrépides développeurs web, ils venaient de découvrir la puissance des descripteurs de largeur srcset et se retrouvaient confrontés à un nouveau défi : le navigateur ne connaît que la dimension du viewport lorsqu’il commence à télécharger les images.

Il est temps maintenant de faire connaissance avec le héros de notre histoire : l’attribut sizes.

image
Photo du super héros par Ashley Rose CC BY-NC-ND 2.0

L’attribut sizes est requis

L’attribut sizes est requis à chaque fois que vous utilisez srcset avec des descripteurs de largeur.

En fait, l’attribut relatif aux dimensions (sizes) n’a de sens que si vous utilisez les descripteurs de largeur. Avec les descripteurs de densité d’affichage, vous n’avez pas besoin de l’attribut sizes, le navigateur ne saurait pas quoi en faire.

Syntaxe de sizes

Parmi tous les nouveaux standards des images responsives, sizes a été le plus difficile à comprendre pour moi au début.

image
Une liste de trois items séparés par une virgule, les deux premiers comportent une condition media et une longueur, le dernier est une longueur simple.

Comme srcset, l’attribut sizes contient une liste séparée par des virgules. Cette liste décrit la taille des images en relation avec celle du viewport.

Je vais répéter ce dernier point car il est essentiel pour bien comprendre le fonctionnement de sizes.

Nous disons au navigateur quelle taille aura l’image en relation à celle du viewport. Et nous pouvons dire au navigateur comment cette relation doit changer lorsque la dimension du viewport change.

<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Comme srcset, chaque item de la liste séparée par des virgules contient deux valeurs séparées par un espace.

Conditions media

La première valeur de l’item est une “condition media”. Celle-ci est similaire à une media query mais n’en comporte pas toutes les fonctionnalités. Par exemple, vous ne pouvez pas faire des choses comme [email protected] screen”, mais vous pouvez faire tout ce que vous pourriez avoir envie de faire avec les dimensions.

Le plus souvent, votre condition media ressemblera à (max-width: 480px) ou (min-width: 480px).

Longueurs

La deuxième valeur de l’item est une longueur. Cette longueur est souvent exprimée au moyen de l’unité vw de largeur du viewport (viewport width).

Il est possible que vous n’ayez jamais vu cette unité auparavant, elle est relativement récente mais elle est assez largement supportée.

Chaque unité vw représente 1% de la largeur du viewport ou, pour le dire autrement, 100vw représentent 100% de la largeur du viewport et 33vw sont 33% de la largeur du viewport.

La longueur n’est pas obligatoirement exprimée en unité de largeur du viewport. On peut utiliser n’importe quelle unité de longueur, qu’elle soit absolue ou relative. Vous pouvez même utiliser calc() de CSS pour faire des choses du genre calculer automatiquement les marges de manière dynamique.

Comment le navigateur sélectionne-t-il la bonne valeur de sizes ?

Quand le navigateur lit la liste de valeurs, il prend la première valeur qui remplisse les conditions media.

Regardons à nouveau notre balisage et l’ordre des attributs sizes :

<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Si nous traduisons ceci en une liste d’instructions, cela donne :

  • (max-width: 480px) 100vw — Si le viewport a pour largeur 480px ou moins, l’image prendra 100% de la largeur du viewport.
  • (max-width: 900px) 33vw — Si le viewport a pour largeur 480px ou moins, cette règle ne sera pas lue car le navigateur se sera déjà arrêté à la première. Donc cette règle dit en fait que si la largeur du viewport est comprise entre 481px et 900px, l’image prendra 33% de la largeur du viewport.
  • 254px — Cette longueur est une valeur utilisée par défaut lorsqu’aucune condition media n’est remplie. Dans notre exemple, nous avons des conditions media qui couvrent une largeur de viewport de 0px à 900px. Par conséquent, au-dessus de 901 px, l’image aura une largeur de 254px.

Pour vous aider à visualiser la façon dont cela pourrait fonctionner dans le monde réel, j’ai créé cette petite vidéo qui montre comment les valeurs pourraient changer avec la largeur du viewport sur le site de l’épicerie de Walmart dont nous avons parlé précédemment.

Note : au moment où j’écris ces lignes, le site de l’épicerie de Walmart n’utilise pas srcset ni sizes. Il s’agit donc d’un balisage imaginaire. Si vous voulez voir srcset et sizes réellement mis en oeuvre, vous pouvez regarder le site du Guardian qui les utilise depuis peu.

Et la séparation du contenu et de la présentation ?

J’ai lu beaucoup de commentaires critiques au sujet de la nouvelle spécification. La plupart se plaignent soit de sa complexité — en oubliant la complexité inhérente aux images sur le web — soit constituent une variation sur le thème WWIC (Why Wasn’t I Consulted? : pourquoi est-ce qu’on ne m’a pas demandé mon avis ?).

Mais s’il est une critique pour laquelle j’ai beaucoup de sympathie, c’est cette idée que nous avons maintenant des informations de présentation — la dimension de l’image — dans le markup. Je pense que toutes les personnes impliquées dans la réflexion sur les standards d’images responsives ont partagé cette préoccupation.

Malheureusement, elle est inévitable. Comme nous l’avons vu dans la 4e partie, le navigateur commence le téléchargement des images avant même de connaître la dimension des éléments images dans la page. La seule façon de supporter le pré-chargement tout en s’assurant que l’on télécharge les bonnes sources, est de fournir dans le markup des informations relatives à la dimension des images.

Le pré-chargement vaut-il le coup ?

Si vous êtes comme moi, vous vous êtes peut-être déjà demandé si les avantages du pré-chargement justifiaient tous les problèmes qui en découlent.

Eh bien... Oui. Oui, ça vaut le coup.

image

Andy Davies a écrit que Google a vu une augmentation de 20% de la performance des pages web après avoir implémenté le pré-chargement, et 19% pour Firefox. Steve Souders pense que “le pré-chargement est la meilleure amélioration que les navigateurs aient jamais faite”.

Il nous est impossible de laisser tomber cette avancée spectaculaire au nom des seules images responsives.

C’est pourquoi nous devons trouver un compromis, et l’attribut sizes est ce compromis. Il nous donne juste assez d’information pour permettre aux navigateurs de faire leur boulot.

srcset et sizes = navigateurs intelligents

srcset et sizes nous donnent les fonctionnalités nécessaires à la résolution des cas d’usage de commutation.

image
srcset et sizes : pour des navigateurs intelligents (photo par Alice Jamieson, CC BY-NC-ND 2.0)

Mais que se passe-t-il quand nous avons besoin d’avoir un meilleur contrôle ?

La suite dans la 6e partie : l’élément picture.

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.