Introduction aux images responsives, 3 : densité d'affichage srcset

Depuis qu'Apple a lancé son affichage retina sur l'iPhone4, les designers doivent gérer le traitement de l'affichage en haute résolution. C'est ici que `srcset` et ses descripteurs entrent en scène.

Par

Depuis qu’Apple a lancé son affichage retina sur l’iPhone 4, les designers ont a gérer le traitement de l’affichage en haute résolution. C’est ici que srcset et ses descripteurs entrent en scène.

Changement de résolution grâce à srcset

Juste pour rappel, la densité d’affichage est un cas d’usage de changement de résolution. Et pour résoudre un problème de changement de résolution, nous utilisons srcset (sauf si nous fournissons différents formats d’image, mais nous verrons cela une autre fois).

La raison pour laquelle nous utilisons srcset est qu’il donne le choix au navigateur, contrairement à l’attribut media de l’élément <picture> qui impose une image au navigateur - ce qui est plus approprié pour la direction artistique.

Mais lorsqu’il s’agit de changer de résolution, le navigateur sait mieux que quiconque ce qui conviendra le mieux. Il peut prendre des décisions en fonction de facteurs dont nous n’avons pas connaissance, tels que les conditions réseau ou les préférences utilisateur.

Par conséquent, sauf si nous faisons de la direction artistique, nous devons donner le choix au navigateur et le laisser prendre des décisions intelligentes.

Descripteurs de densité d’affichage

La syntaxe de densité d’affichage est assez simple :

image
Une liste d’items séparés par une virgule, 2x pour indiquer la densité d’affichage

L’attribut srcset est ajouté à l’élément <img>. La valeur de srcset est une liste d’items séparés par une virgule. Chaque item de la liste contient le chemin d’accès à une image et la densité de cette image exprimée sous forme de multiple (p.ex. 1x, 2x, 3x…).

<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">

Les valeurs de densité d’affichage  les 1x, 2x, etc. — sont appelées des descripteurs de densité d’affichage. En l’absence de descripteur, la valeur par défaut est 1x.

Ça a l’air simple...

C’est simple, si l’on suppose que tout ce qui nous importe est la densité d’affichage. Cependant, je doute que ce soit souvent le cas.

Regardons à nouveau notre image d’Apple Watch de la 1ère partie :

image

Comme nous l’avons indiqué, cette image fait 5.144 × 1.698px et elle pèse 398K dans sa version 2x. Il existe aussi une version 1x. Comparons les à la taille qui aurait un sens pour un Blackberry Curve 9310 :

ImageLargeurHauteurTaille Fichier
2x51441698398K
1x2572849256K
320px, Single Density3201068K

Pour la dernière rangée du tableau, j’ai redimensionné l’image à 320px et je l’ai sauvegardée en JPEG pour avoir une estimation de ce dont aurait besoin.

Il devrait être assez évident d’après ce tableau que deux dimensions ne suffisent pas. Bien sûr, nous pourrions commencer à 320px comme notre 1x, puis réécrire notre markup qui deviendrait quelque chose comme ceci :

<img srcset="cat.jpg, cat-2X.jpg 2x, cat-3x.jpg 3x, […], cat-16x.jpg 16x">

On irait ainsi de 320px à 5144px, mais ça me paraît complètement fou.

Ceci met en lumière une autre raison pour laquelle je pense que d’autres solutions sont préférables aux descripteurs de densité d’affichage. Je n’ai aucun intérêt à créer et donner toutes les densités d’affichage disponibles. Voulons-nous créer des variantes 1x, 1.5x, 2x, 3x ? et quid du downsampling de l’iPhone 6 ?

Sans mentionner ce qui se passe lorsque vous commencez à travailler avec des images flexibles : maintenant vous avez des densités multiples à différents points de rupture. Et parfois vous répétez vos sources image parce que 2x à une taille réduite pourrait bien être la même chose que la résolution 1x à un point de rupture supérieur.

Ça tourne vite à la confusion générale.

Les descripteurs de densité sont pour les images fixes

Au-delà de la fourniture simple de densités alternatives pour des éléments img de largeur fixe, les descripteurs de densité d’affichage deviennent lourds et inadaptés à la tâche.

Que vous faut-il à la place ? 4e partie : les descripteurs de largeur srcset.

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.