Si vous travaillez avec des ordinateurs et des images numériques depuis un certain temps, surtout si vous êtes un concepteur de sites Web ou un photographe publiant vos photos en ligne, vous avez sans aucun doute entendu dire que la résolution correcte pour les images affichées sur le Web, ou sur les écrans d'ordinateur en général, est de 72 pixels par pouce (ppp).
Vous avez peut-être même entendu dire que bien que 72 ppp soit correct pour les images affichées sur un Mac, un PC Windows a besoin d'une résolution réglée à 96 ppi.
Certains disent que c'est "ppi" ( pixels par pouce), d'autres prétendent que c'est "dpi" ( points par pouce), et le tout serait très déroutant si ce n'était pour un petit fait - c'est tout un non-sens! Dans ce didacticiel, nous allons découvrir pourquoi il n'existe tout simplement pas de résolution Web ou d'écran standard et pourquoi, si vos images sont destinées au Web, vous n'avez pas du tout à vous soucier de la résolution d'image!
Un peu d'histoire …
L'origine de la résolution d'écran de 72 ppi remonte au milieu des années 1980 lorsque Apple a sorti ses premiers ordinateurs Macintosh. Ces ordinateurs comprenaient un écran intégré de 9 pouces avec une résolution d'écran de 72 pixels par pouce. Pourquoi 72 pixels par pouce? C'est parce que les écrans Macintosh ont été spécialement conçus pour fonctionner en parfaite harmonie avec les imprimantes ImageWriter d'Apple, qui avaient une résolution d'impression de 144 points par pouce, soit exactement le double de la résolution de l'écran. Cela a facilité la mise à l'échelle de l'affichage de l'écran à la page imprimée, ce qui signifiait que votre texte et vos graphiques pouvaient être prévisualisés à l'écran à la taille exacte qu'ils apparaîtraient lors de l'impression. Plus tard, alors qu'Apple commençait à faire des écrans plus grands pour le Macintosh, ils se sont assurés de maintenir les résolutions d'écran définies sur les mêmes 72 pixels par pouce afin que les utilisateurs voient toujours un aperçu précis à l'écran du document imprimé (tant qu'ils étaient à l'aide d'une imprimante ImageWriter).
Mais la résolution d'écran de 72 pixels par pouce n'était une norme qu'avec Apple, et cela n'a pas duré. Les sociétés tierces vendant des moniteurs pour Macintosh ne respectaient pas la norme, pas plus que les moniteurs PC concurrents. Aujourd'hui, près de trois décennies plus tard, la technologie s'est considérablement améliorée et le temps des écrans avec une résolution de seulement 72 ppp est révolu depuis longtemps. Même Apple, la société qui a lancé le tout, vend désormais ses écrans avec des résolutions beaucoup plus élevées. Personne ne fait plus d'écrans 72 ppp. Personne n'utilise plus d'écrans 72 ppi. Et pourtant, même si cette ancienne technologie est loin derrière nous, beaucoup de gens continuent de croire que nous devons définir la résolution de nos images à 72 pixels par pouce dans Photoshop avant de les télécharger sur le Web. La plupart des gens pensent que la raison est que les images s'afficheront correctement à l'écran, alors commençons par apprendre un moyen facile de prouver que votre écran d'ordinateur, avec tous les écrans d'ordinateur modernes, a en réalité une résolution bien supérieure à 72 ppp.
Mettre la norme 72 PPI à l'épreuve
Comme tout le monde ces jours-ci, l'écran de votre ordinateur (qu'il s'agisse d'un moniteur autonome, d'un système tout-en-un comme un iMac ou d'une partie d'un ordinateur portable) a une résolution d'écran supérieure à 72 pixels par pouce, et vous n'avez pas de me croire sur parole. Vous pouvez facilement le tester vous-même. Tout ce dont vous avez besoin est une règle ou un ruban à mesurer. Désormais, lorsqu'un magasin vous vend un écran d'ordinateur, il vous indique généralement sa taille en fonction de sa largeur diagonale, certaines tailles courantes étant 17 pouces, 19 pouces, 24 pouces, etc. C'est bien, mais pour notre test ici, nous n'avons pas besoin de nous préoccuper de ce nombre. Ce que nous devons savoir, c'est la largeur réelle, en pouces, de votre écran. Pour ce faire, saisissez simplement votre règle ou votre ruban à mesurer et mesurez votre zone d'écran de gauche à droite. Assurez-vous de mesurer uniquement la zone d'écran elle-même. N'incluez aucune bordure autour de l'écran. Nous avons besoin de la largeur réelle de l'écran (photo de l'écran de l'ordinateur de Shutterstock):
Mesurez la largeur de votre écran (sans compter la bordure extérieure).
Une fois que vous avez mesuré la largeur, l'autre chose dont vous devez vous assurer est que votre moniteur est réglé sur sa résolution d'affichage native, qui est le nombre réel de pixels que votre écran peut afficher de gauche à droite et de haut en bas. Par exemple, un moniteur avec une résolution d'affichage native de 1920 x 1080 (communément appelé de nos jours "full HD") contient 1920 pixels de gauche à droite et 1080 pixels de haut en bas. J'utilise actuellement un moniteur avec une résolution d'affichage native de 2560 x 1440, mais mon ordinateur portable a une résolution d'affichage native de 1920 x 1200, donc cela varie, ce qui signifie que vous devrez connaître la résolution d'affichage native de votre moniteur spécifique et assurez-vous que c'est ce sur quoi le moniteur est réglé dans les options d'affichage de votre système d'exploitation.
Maintenant que vous avez mesuré la largeur réelle de votre écran et que vous vous êtes assuré que votre moniteur fonctionne à sa résolution d'affichage native, pour savoir quelle est sa résolution d'écran réelle (en pixels par pouce), il vous suffit de prendre le premier nombre du natif la résolution d'affichage, qui vous indique la largeur de votre écran en pixels, et la divise par la largeur de votre écran en pouces. Par exemple, ma résolution d'affichage native est de 2560 x 1440, donc je prendrai ce premier nombre, 2560, qui est la largeur de l'écran en pixels, et je le diviserai par la largeur en pouces, qui dans mon cas était 23, 4 (ou assez proche, de toute façon). En utilisant la calculatrice intégrée pratique de mon système d'exploitation, 2560 ÷ 23, 4 = 109, 4, que j'arrondirai à 109. Donc, juste à partir de ce test rapide et simple, j'ai confirmé que ma résolution d'écran est de 109 pixels par pouce, pas 72 pixels par pouce. Votre propre test avec votre écran peut vous donner un résultat différent du mien, mais à moins que vous n'utilisiez toujours l'un de ces ordinateurs Macintosh originaux du milieu des années 80, il sera beaucoup plus élevé que 72 ppp.
Si vous le souhaitez, vous pouvez faire la même chose avec la hauteur de votre écran. Prenez simplement votre règle ou votre ruban à mesurer et mesurez la hauteur réelle de l'écran en pouces (en évitant encore une fois la zone de bordure autour):
Mesurez la hauteur de votre écran (sans compter la bordure extérieure).
Ensuite, prenez le deuxième nombre de la résolution d'affichage native de votre écran, qui vous donne la hauteur en pixels, et divisez-le par la hauteur en pouces. Encore une fois, ma résolution d'affichage native est de 2560 x 1440, je vais donc prendre ce deuxième nombre, 1440, et le diviser par ma hauteur d'écran mesurée qui était de 13, 2 pouces. En utilisant ma calculatrice, 1440 ÷ 13, 2 = 109, 09 que je vais encore arrondir à 109. Comme nous pouvons le voir, vous devriez obtenir à peu près le même résultat en utilisant la largeur ou la hauteur de votre écran. Dans mon cas, ils ont tous deux fonctionné à 109 pixels par pouce, et non à 72 pixels par pouce.
À titre de comparaison, vérifions la résolution d'écran réelle de mon ordinateur portable. C'est un MacBook Pro (fabriqué bien sûr par Apple, la société qui nous a donné la norme originale de 72 ppp il y a de nombreuses années). Mon MacBook Pro a une résolution d'affichage native de 1920 x 1200, donc comme je l'ai fait auparavant, je prendrai ce premier nombre, 1920, qui me donne la largeur de l'écran en pixels, et je la diviserai par la largeur du écran en pouces, qui dans ce cas est de 14, 4. Donc, 1920 ÷ 14, 4 = 133, 3, que j'arrondirai à 133 pixels par pouce . C'est beaucoup plus que 72 et même plus que mon moniteur autonome. Je ferai la même chose avec la hauteur, en prenant la hauteur en pixels (1200) et en la divisant par la hauteur en pouces (9). 1200 ÷ 9 = 133, 3, encore une fois arrondi à 133 pixels par pouce.
Deux affichages différents, chacun avec deux résolutions d'écran différentes (109 ppp et 133 ppp), toutes deux considérablement supérieures à 72 ppp qui, selon de nombreuses personnes aujourd'hui, restent la résolution standard de l'industrie pour la visualisation d'images sur le Web et à l'écran. Si mon écran, votre écran et celui de tous les autres ont une résolution supérieure à 72 ppp, sans parler du fait que mes deux écrans avaient des résolutions très différentes l'une de l'autre et que votre écran peut également avoir une résolution différente, alors clairement, non non seulement il n'y a plus de standard officiel pour la résolution d'écran, mais même s'il y en avait, ce ne serait plus 72 ppp. Ces jours, comme les ordinateurs Macintosh originaux pour lesquels il a été conçu, sont de l'histoire ancienne.
Plugin Shortcodes, Actions et Filtres: Erreur dans le shortcode (ads-essentials-middle)
La résolution de l'image affecte la taille d'impression et non la taille de l'écran
Si le fait que les écrans d'ordinateur aient tous aujourd'hui des résolutions d'écran supérieures à 72 ppp ne vous a pas convaincu qu'il n'existe plus de standard de résolution d'écran de 72 ppi, voici un autre fait important à considérer. Si vous avez déjà lu notre didacticiel sur la résolution d'image, les dimensions en pixels et la taille du document, vous savez déjà que la résolution d'image n'a absolument rien à voir avec la façon dont votre image apparaît sur votre écran. En fait, une image numérique, à elle seule, n'a aucune résolution intrinsèque. Ce ne sont que des pixels. Il a un certain nombre de pixels de gauche à droite et un certain nombre de haut en bas. La largeur et la hauteur d'une image, en pixels, sont connues comme ses dimensions en pixels, et c'est tout ce qui importe à un écran d'ordinateur.
La taille à laquelle une image apparaît sur votre écran ne dépend que de deux choses - les dimensions en pixels de l'image et la résolution d'affichage de votre écran. Tant que vous avez réglé votre écran sur sa résolution d'affichage native comme nous l'avons vu précédemment, une image sera affichée pixel par pixel. En d'autres termes, chaque pixel de l'image occupera exactement un pixel sur votre écran. Par exemple, une image de 640 x 480 pixels occupera une zone de 640 x 480 pixels de votre écran. Une bannière de 800 pixels de large sur un site Web apparaîtrait à 800 pixels de large à l'écran. Ni plus ni moins. Et peu importe la définition de la résolution de l'image dans Photoshop, que ce soit 72 ppp, 300 ppp ou 3000 ppp, cela n'aura aucun effet sur la taille de l'image, quelle que soit sa taille, à l'écran.
En effet, la résolution de l'image n'affecte qu'une seule chose: la taille de l'image lorsqu'elle est imprimée . En définissant la résolution dans Photoshop, nous indiquons à l' imprimante, et non à l'écran, combien de pixels de l'image doivent être pressés dans un pouce de papier. Plus vous serrez de pixels dans chaque pouce de papier, plus l'image apparaît petite lors de l'impression. Et d'une manière générale, plus vous imprimez de pixels par pouce, meilleure est la qualité d'impression.
Nous pouvons facilement déterminer la taille d'une photo à imprimer en fonction d'une certaine résolution d'image. Prenez simplement la largeur de la photo en pixels et divisez-la par la résolution de votre image, puis prenez la hauteur de la photo en pixels et divisez-la également par la résolution de l'image. Si nous prenons une image de 640 x 480 pixels, par exemple, et définissons sa résolution à 72 ppp dans Photoshop, nous pouvons diviser la largeur et la hauteur de la photo par sa résolution pour déterminer qu'elle imprimera sur papier à environ 8, 9 x 6, 7 pouces. Si nous augmentons sa résolution dans Photoshop à, disons, 240 ppp, qui est une résolution d'impression plus courante, alors encore une fois si nous faisons le calcul, en divisant la largeur et la hauteur des pixels par 240 ppi, nous savons que la photo s'imprimera à une taille de 2, 7 x 2 pouces, ce qui est beaucoup plus petit que si nous l'avions imprimé à 72 ppp mais la qualité d'impression globale serait bien meilleure. Mais ce qui est plus important à comprendre ici, c'est qu'en changeant la résolution, nous n'affectons en aucune façon l'apparence de l'image à l'écran.
Pour voir plus clairement comment la résolution affecte la taille d'impression et non la taille de l'écran, voici une image que j'ai ouverte dans Photoshop. Ce petit gars a également essayé de donner un sens à tous ces trucs de résolution Web de 72 ppi, mais il semble qu'il y réfléchisse un peu (en pensant à une photo d'enfant de Shutterstock):
La résolution d'image n'est vraiment pas si compliquée, mais certainement un A pour l'effort.
Je vais ouvrir la boîte de dialogue Taille d'image de Photoshop en allant dans le menu Image de la barre de menus en haut de l'écran et en choisissant Taille d'image :
Allez dans Image> Taille de l'image.
En haut de la boîte de dialogue Taille de l'image se trouve la section Dimensions en pixels qui nous indique la largeur et la hauteur de l'image en pixels. Ici, nous pouvons voir que ma photo a une largeur et une hauteur de 500 pixels, ce qui en fait une taille décente pour l'affichage sur le Web. C'est la seule partie de la boîte de dialogue Taille de l'image qui intéresse votre écran d'ordinateur - les dimensions réelles en pixels de l'image:
La section Dimensions en pixels nous montre la largeur et la hauteur en pixels.
Sous les dimensions en pixels se trouve la section Taille du document qui nous indique la taille actuelle de l'image sur le papier si nous l'imprimions. Cette section traite exclusivement de la taille d'impression et n'a aucun effet sur la façon dont l'image apparaît à l'écran. Il se trouve également que l'option de résolution est primordiale (la raison pour laquelle nous sommes tous ici!), Ce qui est logique car la résolution affecte la taille d'impression, pas la taille de l'écran. Comme nous pouvons le voir, Photoshop est allé de l'avant et a défini la résolution de ma photo à 72 pixels par pouce (oui, même Photoshop contribue au mythe des 72 ppp), et directement au-dessus de l'option Résolution, dans les zones Largeur et Hauteur, nous peut voir qu'à 72 ppp, ma photo de 500 x 500 pixels s'imprimerait à 6, 944 x 6, 944 pouces sur papier (500 ÷ 72 = 6, 944):
La section Taille du document nous montre la taille d'impression basée sur la résolution actuelle. Cela n'a aucun effet sur la taille de l'écran.
Voyons ce qui se passe si j'augmente la résolution de l'image. Avant de faire cela, cependant, je vais rapidement décocher l'option Rééchantillonner l'image près du bas de la boîte de dialogue afin que l'image conserve ses dimensions originales en pixels lorsque je change la résolution:
Décochez l'option Rééchantillonner l'image.
Avec Rééchantillonner l'image non cochée, je vais augmenter la résolution de 72 pixels par pouce à 240 pixels par pouce . Nous pouvons voir dans la section Pixel Dimensions en haut que l'augmentation de la résolution n'a pas changé les dimensions réelles des pixels. Il est toujours de 500 x 500 pixels, ce qui signifie qu'il occuperait toujours une zone de 500 x 500 pixels à l'écran. Mais à 240 ppp, il imprimait désormais sur du papier à une taille de seulement 2, 083 x 2, 083 pouces (500 ÷ 240 = 2, 083). Changer la résolution a changé la taille d'impression de la photo, mais rien d'autre:
L'image s'imprimerait désormais plus petite mais resterait exactement la même taille de 500 x 500 pixels à l'écran.
Je vais encore augmenter la résolution de l'image, cette fois à quelque chose de fou comme 500 pixels par pouce, juste pour rendre les calculs vraiment faciles. Une image de 500 x 500 pixels, définie à une résolution de 500 pixels par pouce, s'imprimerait comme une image de 1 x 1 pouce sur papier (500 ÷ 500 = 1). Encore une fois, les dimensions réelles en pixels de l'image n'ont pas changé. Même à 500 ppp, mon image n'apparaîtrait ni plus grande ni plus petite à l'écran qu'à 72 ppi, ou 240 ppi, ou à n'importe quelle résolution car c'est toujours une image de 500 x 500 pixels quel que soit le paramètre de résolution, et ses dimensions en pixels sont tout votre écran d'ordinateur se soucie de:
À 500 ppp, l'image s'imprimerait en effet très petit mais apparaîtrait toujours comme une image de 500 x 500 pixels à l'écran.
Enfin, voici une comparaison côte à côte de l'image telle qu'elle apparaît dans les trois résolutions ci-dessus. J'ai réduit l'image (elle ne fait plus que 200 x 200 pixels) afin que je puisse adapter les trois versions l'une à côté de l'autre, mais la première version à gauche a été enregistrée à 72 ppp. La version du milieu a été enregistrée à 240 ppp, et la version de droite a été enregistrée à 500 ppi:
Une version 72 ppp (gauche), 240 ppp (milieu) et 500 ppp (droite) de l'image.
Comme nous pouvons le voir clairement, la résolution n'a aucun effet sur l'apparence de l'image à l'écran. Les trois versions occupent chacune un espace d'exactement 200 x 200 pixels, quel que soit le paramètre de résolution. La qualité de chaque version est également exactement la même. Chaque version s'imprimerait à une taille très différente en raison des différents paramètres de résolution, mais cela ne fait aucune différence que ce soit à la taille de l'écran ou à la qualité de l'image.
Bien qu'il soit douteux que ce non-sens de résolution Web et d'écran de 72 ppi disparaisse de sitôt, j'espère que ce didacticiel a au moins permis de comprendre pourquoi il est, en fait, un non-sens à ce stade. De nos jours, les écrans d'ordinateur ont tous des résolutions d'écran supérieures à 72 ppp, et l'option de résolution d'image dans Photoshop affecte uniquement la taille d'impression d'une photo, pas sa taille d'écran.
Toute photo avec des dimensions en pixels suffisamment petites pour être affichée sur le Web serait trop petite pour que quiconque puisse télécharger et imprimer une version de bonne qualité à une taille utile, donc avec toutes ces raisons à l'esprit, si votre photo ne sera affichée qu'à l'écran, que ce soit c'est sur le web, dans un e-mail, ou quoi que ce soit, il n'y a tout simplement pas de raison logique pour laquelle vous auriez besoin de régler sa résolution à 72 ppp dans Photoshop. À moins que vous n'imprimiez la photo, vous n'avez pas du tout à vous soucier de la résolution de l'image. Et nous l'avons là!