Résolution d'écran, densité de pixels et les nombres du marketing

Une diagonale n'est pas une taille

Les écrans se vendent à la diagonale, et par une vieille convention qui a survécu au passage du tube cathodique à la dalle plate, cette diagonale se donne en pouces partout dans le monde. Un moniteur de 27 pouces est un moniteur de 27 pouces à Lisbonne comme à Lagos. Ce que le nombre ne dit pas, c'est combien d'écran tu obtiens, car une diagonale est une seule mesure d'un objet à deux dimensions : il faut le rapport d'aspect pour retrouver les deux autres.

La récupération se fait par Pythagore et rien d'autre. Si le rapport est a sur b, une dalle de largeur a·k et de hauteur b·k a une diagonale valant k fois la racine carrée de a au carré plus b au carré. Résous pour k : k vaut la diagonale divisée par cette racine, donc la largeur est la diagonale fois a sur la racine, et la hauteur la diagonale fois b sur la racine. Pour 16:9 la racine vaut 18,35756, pour 4:3 elle vaut 5, et pour le rapport vendu comme 21:9 — en réalité 64:27, et pas du tout 21 sur 9 — elle vaut 69,46222.

Calcule-en quelques-unes et la forme de la réponse apparaît. Une 24 pouces en 16:9 fait 53,1 sur 29,9 cm, soit 1 588 cm². Une 27 pouces en 16:9 fait 59,8 sur 33,6 cm, soit 2 010 cm². Une 32 pouces en 16:9 fait 70,8 sur 39,8 cm, soit 2 823 cm². Remarque que la surface croît comme le carré de la diagonale à rapport constant : 32 pouces, ce n'est pas 19 % d'écran en plus que 27, c'est 40 % de plus. C'est la chose la plus utile que cette arithmétique t'apporte quand tu hésites entre deux tailles de même forme.

Le 27 pouces plus petit que l'autre 27 pouces

Fixe la diagonale et fais varier le rapport : les nombres cessent d'être intuitifs. Une 27 pouces en 16:9 donne 2 010 cm². Une 27 pouces en 21:9 donne 1 684 cm² — même diagonale et 16,2 % d'écran en moins. Une 27 pouces en 32:9 donne 1 226 cm², soit 39,0 % de moins. Plus le rapport est large, plus la diagonale s'étire dans une direction qui achète très peu de surface, car un rectangle long et mince exploite mal sa diagonale. Le carré est l'extrême de l'efficacité et la bande 32:9 est proche de l'extrême du gaspillage.

Retourne le problème et le conseil pratique devient plus clair. Pour égaler la surface d'une 27 pouces en 16:9, une dalle 21:9 a besoin d'une diagonale de 29,49 pouces — l'ultralarge de 34 pouces que les gens achètent réellement est donc un vrai gain de surface, 2 671 cm² contre 2 010, tandis que l'ultralarge de 27 pouces est une régression déguisée en équivalent. Et l'ultralarge achète tout de même quelque chose de réel : 63,2 cm de largeur contre 59,8, soit 3,4 cm de plus pour des fenêtres côte à côte, payés par 7 cm de hauteur perdue.

Le même effet explique les guerres de format sur les portables. À 27 pouces de diagonale, une dalle 16:10 offre 2 114 cm² contre 2 010 pour une 16:9 — à diagonale donnée, un écran 16:10 est toujours plus haut et toujours plus grand en surface qu'un 16:9, d'où le retour de l'industrie au 16:10 pour les machines de travail après une décennie de 16:9. Et une dalle 4:3 de même diagonale est plus grande encore, 2 258 cm², d'où l'impression que les vieux moniteurs de bureau étaient plus grands que leurs remplaçants alors même que le nombre sur la boîte augmentait.

Le PPI, calculé depuis la diagonale en pixels

La densité de pixels a la même forme que la géométrie ci-dessus. Le PPI est la diagonale mesurée en pixels divisée par la diagonale mesurée en pouces, et la diagonale en pixels s'obtient encore par Pythagore sur les comptes horizontal et vertical. Une dalle 3840 par 2160 a une diagonale de 4 405,8 pixels : sur un châssis de 27 pouces cela fait 163,2 PPI, et sur un téléviseur de 55 pouces 80,1. Mêmes pixels, même image, densité de moitié, car la densité est une propriété du couple et non de la résolution.

Fais tourner les nombres sur un jeu d'appareils réels et l'écart est énorme. Un téléphone de 6,1 pouces en 2556 par 1179 a une diagonale de 2 814,8 pixels et atteint 461,4 PPI. Un portable de 13,3 pouces en 2560 par 1600 arrive à 227,0. Une dalle 27 pouces en 2560 par 1440 vaut 108,8, et les mêmes 27 pouces en 3840 par 2160 valent 163,2. Un téléviseur 1080p de 55 pouces fait 40,1 PPI — onze fois moins que le téléphone. Chacun de ces nombres est correct et aucun ne te dit quel écran paraît le plus net.

Le PPI ne veut rien dire sans distance

L'œil ne mesure pas les centimètres. Il résout des angles : ce qui détermine si tu vois la structure des pixels, c'est combien de pixels tombent dans un degré de ton champ visuel — les pixels par degré. La conversion tient en une ligne de trigonométrie : un pixel de taille physique 1 divisé par le PPI, à la distance D, sous-tend un angle valant deux fois l'arc tangente de un sur deux fois PPI fois D, et les pixels par degré sont l'inverse de cet angle en degrés. Pour tous les appareils ci-dessous, le raccourci petit angle — PPI fois D fois pi sur 180 — donne la même valeur à la précision affichée : prends celui que tu préfères.

Applique-la et le classement bascule complètement. Tenu à 30 cm, le téléphone à 461,4 PPI donne 95,1 pixels par degré. Le portable de 13,3 pouces à 227,0 PPI, utilisé à 50 cm, en donne 78,0. Le moniteur 27 pouces en 2560 par 1440 à 60 cm n'en donne que 44,9. Et le téléviseur 4K de 55 pouces à 80,1 PPI, regardé à 3 m, en donne 165,1 — presque le double du téléphone, depuis une dalle ayant moins du cinquième de sa densité. Trié par PPI, le téléphone est premier et le téléviseur septième ; trié par pixels par degré à la distance de travail propre à chaque appareil, le téléviseur est premier et le téléphone troisième.

La démonstration la plus nette tient dans les deux extrêmes. Un téléviseur 1080p de 55 pouces a 40,1 PPI, le nombre le plus bas de toute cette comparaison, et à 3 m il donne 82,6 pixels par degré. Un téléphone de 6,7 pouces a 392,8 PPI, près de dix fois plus dense, et à 30 cm il en donne 81,0. L'écran dont la densité est dix fois moindre présente à l'œil légèrement plus de détail par degré, uniquement à cause de l'endroit où il se trouve. C'est pourquoi le repère utile est angulaire : environ 60 pixels par degré est le seuil conventionnel au-delà duquel une personne à vision normale cesse de distinguer les pixels, et la distance à laquelle chaque appareil l'atteint mérite d'être connue — 19 cm pour le téléphone de 6,1 pouces, 54 cm pour un moniteur 27 pouces en 4K, 80 cm pour le même moniteur en 1440p, et 109 cm pour un téléviseur 4K de 55 pouces.

Pixels CSS, pixels physiques et devicePixelRatio

Le web a son propre pixel, et ce n'est pas celui de la dalle. CSS Values and Units fixe 1 pouce à 2,54 cm et à 96 px, avec 1 pt égal à un soixante-douzième de pouce, et définit le pixel de référence comme l'angle visuel d'un pixel sur un appareil à 96 ppp vu à une longueur de bras nominale de 28 pouces. Calcule cet angle : environ 0,0213 degré, soit 46,91 pixels de référence par degré. Ce nombre est l'ancre de tout le système, et il tombe remarquablement près des 44,9 pixels par degré d'un moniteur 27 pouces en 1440p à 60 cm — la spécification a été calibrée sur l'affichage de bureau de son époque.

Comme le pixel de référence est un angle et non une longueur physique, un écran dense doit entasser plusieurs pixels physiques dans chaque pixel CSS pour garder au texte la même taille apparente. Le rapport est exposé par window.devicePixelRatio, que la spécification CSSOM View définit comme la taille du pixel CSS divisée par la taille du pixel physique au zoom de page courant. Sur un téléphone dont la dalle fait 2556 par 1179 avec un rapport de 3, la fenêtre d'affichage que voit réellement ta mise en page fait 852 par 393 pixels CSS. C'est le nombre auquel répondent tes media queries, et c'est pourquoi un téléphone annonçant plus de pixels horizontaux qu'un portable se met en page comme un appareil étroit.

Pourquoi 4K nomme une largeur et 1080p une hauteur

Les deux systèmes de nommage viennent d'industries différentes. 1080p est de la nomenclature de télévision : le nombre compte les lignes actives de haut en bas, hérité du vocabulaire des lignes de balayage de la TV analogique, et la lettre indique que les lignes sont tracées progressivement et non entrelacées. 4K est de la nomenclature de cinéma : le nombre compte les pixels horizontaux en milliers, car la résolution d'un scanner de film se donnait par le nombre d'échantillons pris sur la largeur de l'image. Rien n'oblige les deux à être cohérents, et ils ne le sont pas.

Il y a une seconde incohérence dans le mot 4K lui-même. Le 4K du cinéma numérique fait 4096 pixels de large, soit deux puissance douze et un vrai quatre mille quatre-vingt-seize. Le 4K vendu au grand public est l'UHD en 3840 par 2160, soit 93,8 % de cette largeur, choisi parce qu'il double exactement 1920 par 1080 dans chaque direction. Ce doublement explique que l'UHD ait exactement quatre fois le nombre de pixels du 1080p : 8 294 400 contre 2 073 600. L'étiquette 4K arrondit donc de 6,2 % vers le haut dans le salon et est exacte au cinéma, et les deux sont fréquemment présentés comme la même chose.

La convention de la diagonale en pouces a une histoire de dérive comparable. Elle a commencé avec les tubes cathodiques, où le nombre annoncé était le diamètre de l'ampoule de verre — y compris la partie cachée derrière le cadre, qui pouvait représenter un pouce ou plus d'image invisible. L'écart entre la taille de tube annoncée et l'image visible est devenu une affaire de protection des consommateurs, et les fabricants se sont mis à publier une taille d'image visible distincte à côté de la taille du tube. Les dalles plates ont réglé le problème physiquement, puisque la dalle est l'image, mais la diagonale a survécu comme unité que tout le monde cite — d'où deux moniteurs de 27 pouces dont les surfaces utiles diffèrent de 16,2 %.

Questions fréquentes

Pourquoi mon nouvel ultralarge de 27 pouces paraît-il plus petit que mon ancien 27 pouces ?

Parce qu'il l'est. À diagonale fixée, la surface diminue à mesure que le rectangle s'allonge et s'affine, et la baisse dépasse l'intuition. Une dalle 27 pouces en 16:9 fait 59,8 sur 33,6 cm, soit 2 010 cm². Une 27 pouces en 21:9 fait 63,2 sur 26,7 cm, soit 1 684 cm² — 16,2 % de moins. Une 27 pouces en 32:9 fait 66,0 sur 18,6 cm, soit 1 226 cm², en baisse de 39,0 %. Ce que tu as gagné : 3,4 cm de largeur supplémentaire ; ce que tu as payé : 7 cm de hauteur, et la hauteur est ce que consomment un document, un éditeur de code et une page web. Pour retrouver la surface de ton ancien 27 pouces en 16:9, une dalle 21:9 a besoin d'une diagonale de 29,49 pouces, d'où le fait que les tailles ultralarges qui ressemblent à une amélioration commencent à 34 pouces : un 34 pouces en 21:9 fait 79,6 sur 33,6 cm et 2 671 cm², un tiers de surface en plus que le 27 pouces en 16:9 et pratiquement la même hauteur. Compare les surfaces plutôt que les diagonales dès que le rapport change, et compare la hauteur à part si ton travail est vertical.

Un PPI plus élevé est-il toujours plus net ?

Non, et le contre-exemple est dans ton salon. La netteté ressentie est une résolution angulaire — des pixels par degré de champ visuel — soit le PPI multiplié par la distance de vision : un écran peu dense vu de loin peut donc battre un écran très dense tenu près. Mesuré sur un jeu réaliste : un téléviseur 1080p de 55 pouces à 40,1 PPI, la densité la plus faible de toute la comparaison, donne 82,6 pixels par degré à 3 m, tandis qu'un téléphone de 6,7 pouces à 392,8 PPI — près de dix fois plus dense — en donne 81,0 à 30 cm. Classé par PPI, le téléphone gagne d'une marge énorme. Classé selon ce que reçoit réellement ton œil, le téléviseur l'emporte de peu. La même logique explique qu'un moniteur 27 pouces en 1440p paraisse grossier à 44,9 pixels par degré tandis qu'une dalle 4K de même taille atteint 67,3, et qu'un téléviseur 4K soit une amélioration plus visible dans une petite pièce que dans une grande. Si tu veux un seul nombre pour acheter, prends les pixels par degré à ta vraie distance d'assise, et considère 60 environ comme le point où les pixels individuels cessent d'être discernables pour une vision normale.

À quelle distance faut-il s'asseoir d'un téléviseur 4K pour qu'il en vaille la peine ?

Plus près que la plupart des gens, et l'arithmétique dit exactement à quel point. Prends le seuil de 60 pixels par degré comme le point où la résolution supplémentaire cesse d'être visible pour une vision normale, et résous en distance. Une dalle 4K de 55 pouces à 80,1 PPI atteint 60 pixels par degré à 109 cm : au-delà, tu vois tout ce que la dalle peut montrer, et un modèle plus défini paraîtrait identique. Une 4K de 65 pouces l'atteint à 129 cm. Une dalle 1080p de 55 pouces à 40,1 PPI ne l'atteint qu'à 218 cm, d'où l'argument de mise à niveau : si ton canapé est à 3 m, le modèle 1080p délivre déjà 82,6 pixels par degré et dépasse largement le seuil — le gain visible de la 4K à cette distance est donc faible. Rapproche le canapé à 2 m et le 1080p tombe autour de 55 tandis que la 4K est à 110 : la différence saute aux yeux. La réponse honnête est donc que la 4K se rentabilise en proportion de la taille de l'écran rapportée à la pièce, et qu'un écran plus grand à la même distance apporte plus de bénéfice visible que le même écran en meilleure définition.

Pourquoi mon CSS voit-il 393 pixels de large alors que le téléphone en a 1179 ?

Parce que les pixels CSS et les pixels physiques sont des unités différentes, et que le téléphone déclare un devicePixelRatio de 3. CSS Values and Units définit le pixel de référence comme un angle et non une longueur — précisément l'angle visuel d'un pixel sur un affichage à 96 ppp vu à une longueur de bras nominale de 28 pouces, soit environ 0,0213 degré, ou 46,91 pixels de référence par degré — et fixe 1 pouce à 96 px et 2,54 cm. L'unité étant angulaire, un affichage plus dense doit associer plusieurs pixels physiques à chaque pixel CSS pour qu'un paragraphe en 16 px garde la même taille apparente pour le lecteur. CSSOM View définit window.devicePixelRatio comme la taille du pixel CSS divisée par celle du pixel physique au zoom de page courant : un rapport de 3 sur une dalle 2556 par 1179 donne donc une fenêtre d'affichage de 852 par 393 pixels CSS. C'est ce à quoi répondent tes media queries, ce que renvoie getBoundingClientRect, et ce sur quoi tu dois construire ta mise en page. Les pixels physiques comptent encore pour une chose : les images matricielles. Une image affichée sur 393 pixels CSS de large sur un écran de rapport 3 a besoin d'une source de 1179 pixels pour paraître nette, et c'est toute la raison d'être de srcset et des descripteurs x.

L'UHD est-il la même chose que le 4K ?

Pas exactement, et l'écart vaut 6,2 %. Le 4K du cinéma numérique fait 4096 pixels de large, nombre choisi parce qu'il vaut deux puissance douze, et associé à 2160 lignes cela donne 8 847 360 pixels. Le format vendu au grand public sous le nom de 4K est l'Ultra HD en 3840 par 2160, soit 93,8 % de la largeur cinéma et 8 294 400 pixels. La raison de 3840 plutôt que 4096 est la compatibilité : c'est exactement le double de 1920 dans chaque direction, si bien que l'UHD contient exactement quatre fois le nombre de pixels du 1080p, que le contenu 1080p s'y agrandit par un facteur entier propre, et que le rapport reste 16:9 au lieu de passer à la forme plus large du cinéma. La confusion de nommage est un héritage : le 1080p compte les lignes de haut en bas, car la télévision décrivait les images par lignes de balayage, tandis que le 4K compte les pixels de gauche à droite, car les scanners de film décrivaient la résolution par échantillons sur la largeur. Aucune des deux industries n'avait de raison de s'aligner sur l'autre : le consommateur en magasin compare donc une hauteur à une largeur. En pratique, un téléviseur annoncé 4K fait 3840 par 2160, et les seuls endroits où tu croiseras du vrai 4K en 4096 de large sont la projection en salle et la production cinématographique.

Pourquoi mesure-t-on les écrans en diagonale, au fond ?

Cela a commencé avec le tube cathodique, dont la face d'écran était une portion de sphère, donc pratiquement ronde : le seul nombre qui la décrivait était un diamètre. Quand les tubes sont devenus rectangulaires, l'industrie a continué à citer la diagonale de l'ampoule de verre, et c'est là que l'ennui a commencé : une partie de ce verre se trouvait derrière le cadre, si bien que la taille annoncée incluait un pouce ou plus d'image que le spectateur ne verrait jamais. L'écart est devenu un sujet de protection des consommateurs et les fabricants ont été poussés à publier une taille d'image visible distincte à côté de la taille du tube. Les dalles plates ont supprimé le problème physique, car la dalle est l'image et rien n'est caché, mais la diagonale a survécu comme unité citée par tous, par pure inertie. La convention a aussi survécu à la métrication : les diagonales d'écran se donnent en pouces dans le monde entier, y compris dans les pays qui emploient le système métrique pour tout le reste. La conséquence pratique est celle par laquelle cet article a commencé — une seule diagonale décrit toute une famille de rectangles très différents, et comparer deux écrans par leurs seules diagonales n'est valable que s'ils partagent le même rapport d'aspect.