Explorer cette démonstration
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur 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
et3x
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 de1.0
),flower-2x.jpg
(destinée aux navigateurs avec une densité de pixels2.0
) etflower-3x.jpg
(destinée aux navigateurs avec une densité de pixels de3.0
). flower.jpg
est l'image de remplacement pour les navigateurs qui ne sont pas compatibles avecsrcset
.
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'écrit2x
. - 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'attributsizes
n'est utilisé que avec les descripteurs de largeur.