Comprendre la résolution des écrans pour le Web

User Experience

6 oct, 2020

Lorsqu’un nouveau device ( mobile, desktop, tablet … ) sort, le fournisseur met généralement l’accent sur sa nouvelle résolution d’écran “remarquable”  et la densité de pixels (PPI) qu’il a pu livrer avec.

Cela peut paraître extraordinaire sur papier d’avoir un écran 4K ou 8K… Mais ce n’est que du marketing. Nous savons que derrière le terme «résolution», il y a tout un monde bien plus complexe qu’un simple chiffre. 

Alors, qu’est-ce que la résolution ?

Addition des couleurs 1024x990 Comprendre la résolution des écrans pour le Web

Vous avez probablement déjà entendu parler du pixel. Celui-ci se définit comme le plus petit élément physique d’un appareil d’affichage numérique que l’œil puisse discerner. Ce dernier est  en fait composé de «sous-pixels» – des éléments lumineux rouges, verts et bleus que l’on ne peut pas voir en raison de la façon dont le traitement additif des couleurs fonctionne avec l’œil humain. Ils sont de taille fixe et différents appareils les mettent en œuvre à travers des formes et mensurations diverses.

La résolution se traduit également en pixel. Plus spécifiquement, pour les fournisseurs, ce sont ces nombres qui définissent le nombre maximal de pixels pouvant être affichés sur un moniteur, exprimé en “nombre de pixels horizontaux” x “nombre de pixels verticaux”. Par exemple, un écran Full HD a une résolution de 1920 × 1080 pixels (ou 1080 × 1920 si le mobile est en mode portrait).

La densité de pixels ou PPI  indique le nombre de pixels par pouce sur l’écran.  À ne pas confondre avec le DPI, qui est utilisé comme appareil de mesure dans l’impression. 

À titre d’exemple l’iPhone X a 458 PPI, alors que le premier iPhone n’avait que 163 PPI. Le Samsung Galaxy S8 quant à lui a un écran de 568 PPI.

Cela fait beaucoup de chiffres, non? Mais voici ce qu’il en est : en matière de conception et de développement Web, les chiffres qui comptent vraiment sont les autres. En effet, les chiffres qui sont primordiaux pour les développeurs sont différents de ceux qui comptent pour les concepteurs.

Côté Développement 

Commençons par les développeurs. Chaque fois qu’ils démarrent un projet, l’une de leurs principales préoccupations est de connaître les types d’appareils pour lesquels ils développent et leurs résolutions, car l’écriture de code peut devenir compliquée s’ils ne connaissent pas le support final.

De ce fait, ils ont besoin d’une liste de résolutions exprimées en pixels. Or ce ne sont pas les pixels dont nous avons parlé plus tôt. Ils ont besoin de pixels CSS , une abstraction créée par le W3C spécifiquement pour le développement Web qui n’a rien à voir avec la densité de pixels de l’appareil et ce sont les pixels réels affichés à l’écran. Pour mieux illustrer ce propos, les pixels utilisés dans les déclarations CSS ressemblent à ça : “ .container {width: 800px;} “

Avant la sortie des écrans haute densité, les développeurs (mais également les créas) savaient que 1 pixel CSS était égal à 1 pixel matériel; ces 800 pixels de .container, vus un peu plus haut, étaient en fait mappés sur 800 pixels d’écran. Dorénavant avec les affichages haute densité il y a un nouveau paramètre à considérer : “le ratio de pixels”, utilisé comme multiplicateur pour déterminer combien de pixels matériels correspondent à un seul pixel CSS.

Prenons, comme autre exemple, l’iPhone 6/7/8 qui représente aujourd’hui la norme en matière de taille de smartphone. Apple explique qu’il y  a une résolution de 750 × 1334 pixels et une valeur PPI de 326. Si nous devons créer un site responsive optimisé pour cette résolution, nous sommes obligés d’utiliser des medias queries*.  C’est à cet instant que nous nous rendons compte qu’il est nécessaire de reconsidérer ces chiffres (750 et 1334).

Bien sûr, il n’y a rien de foncièrement erroné avec ces nombres. Apple ne ment pas et le CSS n’est pas cassé. Il est juste indispensable d’analyser différents nombres.

L’iPhone (et plus ou moins tous les smartphones modernes) dispose d’un écran haute densité (les écrans Retina), avec un ratio de pixels de 2.0, en d’autres termes, 2 pixels d’écran d’iPhone équivalent à un pixel CSS.

Le Samsung Galaxy S10 a un ratio de pixels de 4,0, ce qui lui confère une résolution de 1440 × 3040.

Afin d’avoir l’équivalence voici un petit calcul :

Pixel CSS = Pixels de l’appareil / Ratio de pixels de l’appareil

Pour que notre media query fonctionne correctement, elle doit faire référence aux pixels CSS, donc ces 750 et 1334 deviennent respectivement 375 et 667. Si nous les comparons aux pixels physiques de l’écran, les pixels CSS sont essentiellement des «pixels de référence» ou en d’autres termes «virtuels».

Côté Créa

Les créas, peuvent utiliser les deux «types» de pixels : ils doivent construire leurs maquettes en gardant la résolution CSS-pixel comme référence, tout en tenant compte du ratio de pixels de l’appareil lors de l’exportation des maquettes.

Cela signifie que si vous concevez une page avec un modèle de bureau de 1280px de large et un modèle mobile de 375px de large, vous devez toujours fournir des images (les icônes devant être en format vectoriel, mais c’est une autre histoire…) en tenant compte du ratio de pixels du device.

Donc, si vous utilisez des écrans avec des ratios de pixels de 2, l’image de 375 pixels de large de votre maquette devrait également être exportée @ × 2 ou 750 pixels.

B1 Comprendre la résolution des écrans pour le Web

Petite mise en garde

En parlant de ratios de pixels et de résolutions, il y a quand même une petite mise en garde à noter avec la transition entre les pixels rendus par l’appareil et les pixels CSS.

Pour certains appareils, les pixels physiques de l’écran ne correspondent pas aux pixels réels rendus, de sorte que la formule CSS Pixel = Device Pixels / Device Pixel Ratio n’est pas toujours vraie, ou pour faire simple, cette formule est plausible si nous considérons uniquement le rendu pixel.

B2 Comprendre la résolution des écrans pour le Web

Pour les appareils qui appliquent un sous-échantillonnage pour mapper les pixels réels de l’écran, fournir des assets à la résolution optimale est un peu plus délicat car nous ne pouvons pas nous fier à la valeur du ratio de pixels.

 

 

 

Laisser un commentaire.