Qu’est-ce que le ratio de pixels de l’appareil ?
Le ratio de pixels de l’appareil est le nombre de pixels physiques de l’écran par pixel CSS sur chaque axe ; un ratio de 2 associe donc un pixel CSS à un bloc de 2 sur 2 pixels physiques. Il influe sur la quantité de détails qu’un écran peut afficher dans une taille de mise en page donnée.
Fonctionnement du ratio de pixels de l’appareil
Un navigateur met les pages en forme en pixels CSS et transpose ce système de coordonnées aux pixels physiques de l’écran à l’aide d’un facteur d’échelle. Ce facteur reflète l’environnement d’affichage et peut changer selon la configuration de l’écran ou le zoom de la page ; ce n’est donc pas une caractéristique matérielle permanente. La sélection des images candidates et le dimensionnement du tampon de pixels d’un canvas peuvent l’utiliser pour préserver les détails à la taille CSS du rendu. Il relève des décisions de présentation côté client, et non des métadonnées de résolution intrinsèque de la ressource.
Points clés
- Le navigateur expose le ratio actuel via window.devicePixelRatio, mais déplacer une fenêtre entre des écrans ou modifier le zoom de la page peut changer cette valeur pendant une session.
- Le descripteur de densité de srcset permet au navigateur de comparer les images candidates à la densité effective de l’écran tout en tenant compte de ses propres règles de sélection et des conditions réseau.
- Un canvas dont les dimensions de l’image matricielle sont seulement égales à ses dimensions CSS peut paraître flou sur un écran à haute densité ; augmenter le tampon de pixels accroît aussi l’utilisation de la mémoire et le travail de dessin.
Quand le ratio de pixels de l’appareil est utile
Utilisez le ratio de pixels de l’appareil pour choisir les dimensions des images adaptatives et obtenir un rendu plus net. Fournir une résolution excessive augmente les coûts de transfert et de mémoire sans améliorer les détails au-delà des capacités de l’écran.