Utiliser des descripteurs de densité

Katie Hempenius
Katie Hempenius
X

Découvrir cette démo

  • Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) plein écran.
  • Actualisez la page sur différents appareils pour voir le navigateur charger différentes images.

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

Densité 1x Blackberry Playbook, de 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 d'effectuer cette opération.

Fonctionnement

Le concept de descripteurs de densité n'est peut-être pas familier à la plupart des gens. Pour mieux les comprendre, il est utile de connaître un peu le fonctionnement du navigateur avec les pixels.

Qu'est-ce qu'un pixel ?

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

Pixel de l'appareil (également appelé "pixel physique")
Le plus petit point de couleur pouvant être affiché sur un appareil.
Pixel logique
Informations spécifiant la couleur à un emplacement particulier 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 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é de pixels de l'appareil dans une zone physique donnée. Elle 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 moniteurs CRT.

Cela 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 deux fois la résolution des écrans "standards" (192 ppp/96 ppp = 2).

window.devicePixelRatio

Avec l'introduction de nouvelles technologies d'affichage, les "pixels de l'appareil" ont commencé à varier en taille et en forme physiques, et n'avaient 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" 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 un devicePixelRatio de 2 (192 ppp/96 ppp = 2), car "deux de ses pixels d'affichage ont la taille d'un pixel CSS".

De nos jours, la plupart des appareils ont un rapport de pixels compris entre 1,0 et 4,0.

  • 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 des valeurs sont comprises entre 1,0 et 4,0.

Alors, comment appliquer ces informations ?

Dimensionner les images en fonction des rapports 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érents devicePixelRatios.

Rapport de pixels de l'appareil Indique que : Sur cet appareil, une balise <img> avec une largeur CSS de 250 pixels s'affichera de manière optimale lorsque l'image source sera…
1 1 pixel d'appareil = 1 pixel CSS 250 pixels de large
2 2 pixels d'appareil = 1 pixel CSS 500 pixels de large
3 3 pixels d'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 sont une mesure des pixels logiques.
  • Pour les écrans de résolution supérieure et les écrans plus grands, vous aurez besoin d'images de plus grande taille. Le simple fait d'agrandir des images plus petites va à l'encontre de l'objectif de diffuser plusieurs versions d'une image. Le navigateur l'aurait fait de toute façon si aucune image haute résolution n'avait été fournie.

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 en mots :

  • 1x, 2x et 3x sont des descripteurs de densité qui indiquent au navigateur la densité de pixels pour laquelle une image est prévue. Cela évite au navigateur de devoir 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 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 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, la valeur 1x est déduite.
  • Inclure des descripteurs de densité dans les noms de fichiers est une convention courante (qui vous aidera à suivre les fichiers), mais ce n'est pas obligatoire. 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.