Utiliser des descripteurs de densité

Katie Hempenius
Katie Hempenius
X

Découvrir cette démonstration

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

Pour ce faire, vous pouvez utiliser l'émulateur d'appareil. Si vous recherchez des densités d'affichage spécifiques, essayez les appareils suivants:

Densité x1 BlackBerry Playbook, nombreux écrans externes
Densité x2 iPad ou iPhone 5/6
Densité x3 Galaxy S5 ou iPhone X
  • Consultez index.html pour obtenir le code qui permet ce fonctionnement.

Comment ça marche ?

La plupart des gens ne connaissent pas le concept des descripteurs de densité. Pour mieux les comprendre, il est utile d'avoir quelques informations sur la façon dont le navigateur fonctionne avec les pixels.

Que sont les pixels ?

Commençons par définir ce qu'est un pixel. Cela semble simple, mais le terme "pixel" peut en réalité 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 qui spécifient la couleur à un emplacement spécifique d'une grille. Ce type de pixel n'a pas de taille physique inhérente.
Pixel CSS
La spécification CSS définit un pixel en tant qu'unité de mesure physique. 1 pixel = 1/96e de pouce.

Densité de pixels

La densité en 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 mesure 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 (par conséquent, le CSS définissant un pixel comme 1/96e de pouce). À partir des années 1980, il s'agissait de la résolution par défaut de Windows. Il s'agit également de la résolution des écrans CRT.

Cela a commencé à changer lorsque les moniteurs LED sont devenus courants dans les années 2000. Plus particulièrement, Apple a fait sensation en 2010 avec le lancement des é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 d'une technologie d'affichage plus récente, la taille et la forme des "pixels de l'appareil" ont commencé à varier et n'ont plus 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" est ce qui a conduit à l'introduction du 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 devicePixelRatio de 2 (192 ppp/96 ppp = 2), car "2 de ses pixels d'affichage correspondent à 1 pixel CSS".

À l'heure actuelle, la plupart des appareils présentent un ratio de pixels 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 voir les ratios de pixels des appareils courants. La plupart sont comprises entre 1.0 et 4.0.

Comment appliquer ces informations ?

Taille des images en fonction des ratios de pixels de l'appareil

Pour que les images s'affichent de manière optimale sur les écrans haute résolution, vous devez fournir différentes versions d'image pour différentes devicePixelRatios.

Ratio de pixels de l'appareil Indique que: Sur cet appareil, une balise <img> avec une largeur CSS de 250 pixels s'affichera mieux 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 Largeur de 500 pixels
3 3 pixels de l'appareil = 1 pixel CSS Largeur de 750 pixels

Points à noter :

  • Les dimensions en pixels indiquées dans les éditeurs d'images, les répertoires de fichiers et d'autres emplacements sont des mesures en pixels logiques.
  • Pour les écrans de haute résolution et les grands écrans, vous aurez besoin d'images de plus grandes dimensions. Le simple fait d'agrandir des images plus petites va à l'encontre de l'objectif de diffusion de plusieurs versions d'image. Si aucune image haute résolution n'avait été fournie, le navigateur aurait tout de même le faire.

Utiliser des descripteurs de densité pour diffuser plusieurs images

Les descripteurs de densité, associés à 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 traduit en quelques mots:

  • 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 a le choix 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 de 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.

Comment utiliser cette fonctionnalité:

  • 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'écrirait 2x.
  • Si aucun descripteur de densité n'est fourni, il est considéré comme 1x.
  • L'inclusion de descripteurs de densité dans les noms de fichiers est une convention courante (qui vous aidera à suivre les fichiers), mais ce n'est pas nécessaire. Les images peuvent avoir n'importe quel nom de fichier.
  • Il n'est pas nécessaire d'inclure un attribut sizes. L'attribut sizes n'est utilisé qu'avec les descripteurs de largeur.