Utiliser des descripteurs de densité

Katie Hempenius
Katie Hempenius
X

Explorer cette démonstration

  • Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  • Rechargez la page à l'aide de différents appareils pour voir le navigateur charger différentes images.

Vous pouvez utiliser l'émulateur d'appareil pour ce faire. Si vous recherchez des densités d'affichage spécifiques, voici quelques appareils à essayer :

Densité 1x Playbook sur le BlackBerry, nombreux écrans externes
Densité x2 iPad ou iPhone 5/6
Densité 3 fois Galaxy S5 ou iPhone X
  • Consultez index.html pour obtenir le code permettant d'effectuer cette opération.

Fonctionnement

Le concept de descripteurs de densité peut être inconnu pour la plupart des utilisateurs. Pour mieux les comprendre, il est utile de connaître le fonctionnement du navigateur avec les pixels.

Qu'est-ce qu'un pixel ?

Commençons par définir ce qu'est un pixel. Cela semble simple, mais le terme "pixel" peut avoir plusieurs significations :

Pixel de l'appareil (également appelé "pixel physique")
Plus petit point de couleur pouvant être affiché sur un appareil.
Pixel logique
Informations spécifiant la couleur à un emplacement donné sur une grille. Ce type de pixel n'a pas de taille physique intrinsèque.
Pixel CSS
La spécification CSS définit le pixel comme une unité de mesure physique. 1 pixel = 1/96e de pouce.

Densité de pixels

La densité de pixels (également appelée "densité d'écran" ou "densité d'affichage") mesure la densité des pixels de l'appareil dans une zone physique donnée. Cette valeur est généralement mesurée en pixels par pouce (ppp).

Pendant de nombreuses années, 96 ppp était une densité d'affichage très courante (d'où la définition d'un pixel par CSS comme 1/96e de pouce). À partir des années 1980, il s'agissait de la résolution par défaut de Windows. De plus, il s'agissait de la résolution des écrans CRT.

Cette situation a commencé à changer lorsque les écrans LED sont devenus courants dans les années 2000. En particulier, Apple a fait sensation en 2010 en lançant les écrans Retina. Ces écrans avaient une résolution minimale de 192 ppp, soit le double de la résolution des écrans "standards" (192 ppp/96 ppp = 2).

window.devicePixelRatio

Avec l'introduction de nouvelles technologies d'affichage, la taille et la forme des "pixels de l'appareil" ont commencé à varier et n'étaient plus de la même taille que les "pixels CSS". La nécessité de définir la relation entre la taille des "pixels de l'appareil" et des "pixels CSS" a conduit à l'introduction de devicePixelRatio (parfois appelé "ratio de pixels CSS").

devicePixelRatio définit la relation entre les pixels de l'appareil et les pixels CSS pour un appareil particulier. Un appareil de 192 ppp a une valeur devicePixelRatio de 2 (192 ppp/96 ppp = 2), car "2 de ses pixels d'affichage correspondent à la taille d'un pixel CSS".

De nos jours, le ratio de pixels de la plupart des appareils est compris entre 1 et 4.

  • Déterminez la densité de pixels d'un appareil en saisissant window.devicePixelRatio dans la console.

  • Consultez ce tableau pour connaître les ratios de pixels des appareils courants. La plupart sont comprises entre 1,0 et 4,0.

Comment appliquer ces informations ?

Adapter la taille des images en fonction du rapport de pixels de l'appareil

Pour que les images soient optimales sur les écrans haute résolution, vous devez fournir différentes versions d'images pour différents devicePixelRatios.

Rapport de pixels de l'appareil Indique que : Sur cet appareil, une balise <img> avec une largeur CSS de 250 pixels sera optimale lorsque l'image source est...
1 1 pixel d'appareil = 1 pixel CSS Largeur de 250 pixels
2 2 pixels de l'appareil = 1 pixel CSS 500 pixels de large
3 3 pixels de l'appareil = 1 pixel CSS 750 pixels de large

Points à noter :

  • Les dimensions en pixels indiquées dans les éditeurs d'images, les répertoires de fichiers et d'autres emplacements correspondent à une mesure de pixels logiques.
  • Pour les écrans de plus grande résolution et les grands écrans, vous aurez besoin d'images de plus grandes dimensions. Le simple agrandissement des images plus petites ne sert à rien. Le navigateur l'aurait fait de toute façon si aucune image haute résolution n'était fournie.

Utiliser des descripteurs de densité pour diffuser plusieurs images

Les descripteurs de densité, en association avec l'attribut "srcset", peuvent être utilisés pour diffuser différentes images sur différents devicePixelRatios.

  • Examinez le fichier index.html et notez l'élément <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Cet exemple se traduit par :

  • 1x, 2x et 3x sont tous des descripteurs de densité qui indiquent au navigateur la densité de pixels à laquelle une image est destinée. Cela évite au navigateur d'avoir à télécharger une image pour déterminer ces informations.
  • Le navigateur peut choisir entre trois images: flower-1x.jpg (destinée aux navigateurs avec une densité de pixels de 1.0), flower-2x.jpg (destinée aux navigateurs avec une densité de pixels 2.0) et flower-3x.jpg (destinée aux navigateurs avec une densité de pixels de 3.0).
  • flower.jpg est l'image de remplacement pour les navigateurs qui ne sont pas compatibles avec srcset.

Pour l'utiliser :

  • Utilisez un devicePixelRatio et l'unité x pour écrire des descripteurs de densité. Par exemple, le descripteur de densité de nombreux écrans Retina (window.devicePixelRatio = 2) s'écrit 2x.
  • Si aucun descripteur de densité n'est fourni, 1x est utilisé.
  • L'inclusion de descripteurs de densité dans les noms de fichiers est une convention courante (et vous aidera à suivre les fichiers), mais elle n'est pas obligatoire. Vous pouvez attribuer n'importe quel nom de fichier aux images.
  • Il n'est pas nécessaire d'inclure un attribut sizes. L'attribut sizes n'est utilisé que avec les descripteurs de largeur.