Utiliser des descripteurs de densité

Katie Hempenius
Katie Hempenius
X

Explorer cette démonstration

  • Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran
  • Actualisez la page en utilisant d'autres appareils pour voir le navigateur se charger différemment images.

Pour cela, vous pouvez utiliser l'émulateur d'appareil. Si vous recherchez un écran spécifique d'adresses IP, voici quelques appareils que vous pouvez tester:

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

Fonctionnement

La plupart des utilisateurs ne connaissent pas le concept des descripteurs de densité. Pour améliorer pour les comprendre, il est utile d'avoir quelques notions de base sur le fonctionnement du navigateur. avec des pixels.

Que sont les pixels ?

Commençons par la définition d'un pixel. Cela semble simple, mais « pixel » peut avoir plusieurs significations:

Pixel de l'appareil (également appelé "pixel physique")
Le plus petit point de couleur qui peut être affiché sur un appareil.
Pixel logique
Informations spécifiant la couleur à un point géographique particulier sur une grille. Ce type de pixel n'a pas de taille physique inhérente.
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

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. C'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 (le CSS définit donc 1/96 de pouce). À partir des années 1980, il s'agissait de la résolution par défaut de Windows. De plus, cela a permis de résoudre CRT de surveillance.

Cela a commencé à changer avec l’apparition des écrans LED dans les années 2000. En particulier, Apple a fait sensation en 2010 avec le lancement des écrans Retina. Ces les écrans avaient une résolution minimale de 192 ppp, soit le double de la résolution des écrans standard (192 ppp/96 ppp = 2).

window.devicePixelRatio

Avec le lancement d'une technologie d'affichage plus récente, les "pixels de l'appareil" a commencé à varier de taille physique et de forme et n'avaient plus la même taille que les "pixels CSS". La nécessité de définir relation entre la taille des "pixels de l'appareil" et "Pixels CSS" ce qui a conduit à L'introduction du devicePixelRatio (parfois appelé "Pixel CSS" de format").

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

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

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

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

Comment appliquez-vous ces informations ?

Taille des images en fonction des proportions de l'appareil

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

Ratio de pixels de l'appareil Indique que: Sur cet appareil, une <img> avec une largeur CSS de 250 pixels, ont un meilleur rendu 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 listées dans les éditeurs d'images, les répertoires de fichiers et autres endroits sont une mesure de pixels logiques.
  • Pour les écrans de plus grande résolution et les écrans plus grands, vous aurez besoin d'images avec de plus grandes dimensions. Le simple fait d'agrandir des images petites va à l'encontre de l'objectif en diffusant plusieurs versions d'image. Le navigateur l’aurait fait de toute façon si aucune image haute résolution n'a été fournie.

Utiliser des descripteurs de densité pour diffuser plusieurs images

Descripteurs de densité, en conjonction avec la valeur peuvent servir à diffuser des images différentes selon l'appareil "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 illustre:

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

Comment l'utiliser:

  • Utilisez un devicePixelRatio et l'unité x pour écrire des descripteurs de densité. Pour exemple, le descripteur de densité de nombreux écrans Retina (window.devicePixelRatio = 2) s'écrirait sous la forme 2x.
  • Si aucun descripteur de densité n'est fourni, la valeur est 1x.
  • L'inclusion de descripteurs de densité dans les noms de fichiers est une convention courante vous aider à assurer le suivi des fichiers), mais ce n'est pas nécessaire. Les images peuvent avoir nom de fichier.
  • Il n'est pas nécessaire d'inclure un attribut sizes. L'attribut sizes est uniquement utilisé avec des descripteurs de largeur.