Le Mythe de la résolution Web 72 PPI

écrit par Steve Patterson.

Si vous avez été autour des ordinateurs et des images numériques pendant un certain temps, surtout si vous êtes un web designer ou un photographe publiant vos photos en ligne, vous avez sans 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 (ppi).,

Vous avez peut-être même entendu dire que si 72 ppi est correct pour les images affichées sur un Mac, un PC Windows a besoin de la résolution définie sur 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 devenir très déroutant si ce n’était pas un petit fait – tout non-sens complet! Dans ce tutoriel, nous allons apprendre 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 – exactement deux fois la résolution de l’écran., Cela a facilité la mise à l’échelle de l’affichage à l’écran sur la page imprimée, ce qui signifie que votre texte et vos graphiques pourraient être prévisualisés à l’écran à la taille exacte à laquelle ils apparaîtraient lors de l’impression. Plus tard, comme Apple a commencé à faire des écrans plus grands pour le Macintosh, ils ont veillé à garder les résolutions d’écran définies sur les mêmes 72 pixels par pouce afin que les utilisateurs puissent toujours voir un aperçu précis à l’écran du document imprimé (tant qu’ils utilisaient une imprimante ImageWriter).

Mais la résolution d’écran de 72 pixels par pouce était une norme uniquement avec Apple, et cela n’a pas duré., Les sociétés tierces vendant des moniteurs pour Macintosh ne respectaient pas la norme, et les moniteurs PC concurrents non plus. Aujourd’hui, près de trois décennies plus tard, la technologie s’est grandement améliorée et l’époque des écrans avec une résolution de seulement 72 ppi est révolue depuis longtemps. Même Apple, la société qui a commencé le tout, vend maintenant leurs écrans avec des résolutions beaucoup plus élevées. Plus personne ne fait 72 écrans ppi. Plus personne n’utilise 72 écrans ppi., Et pourtant, même si cette vieille technologie est loin derrière nous, nous avons encore beaucoup de gens qui 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 en est que les images s’affichent correctement à l’écran, alors commençons par apprendre un moyen facile de prouver que votre écran d’ordinateur, ainsi que chaque écran d’ordinateur moderne, a en fait une résolution beaucoup plus élevée que 72 ppi.,

mise à l’épreuve de la norme 72 PPI

comme tout le monde de nos jours, 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 Vous pouvez facilement le tester vous-même. Tous vous avez besoin est une règle ou un ruban à mesurer. Maintenant, quand un magasin vous vend un écran d’ordinateur, ils vous indiquent généralement sa taille en fonction de sa largeur diagonale, certaines tailles courantes étant de 17 pouces, 19 pouces, 24 pouces, etc., C’est bien, mais pour notre test ici, nous n’avons pas besoin de nous soucier de ce nombre. Ce que nous devons savoir est la largeur réelle, en pouces, de votre écran. Pour ce faire, prenez simplement votre règle ou votre ruban à mesurer et mesurez la zone de votre écran de gauche à droite. Assurez-vous que vous ne mesurez que 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 d’ordinateur à partir de ):

mesurez la largeur de votre écran (sans 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 que vous avez le moniteur défini dans les options,

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), prenez simplement le premier chiffre de la résolution d’affichage native, qui vous indique la largeur de votre écran en pixels, et divisez-le par la largeur de votre écran en pouces. Par exemple, ma résolution d’affichage native est 2560 x 1440, donc je vais prendre ce premier nombre, 2560, qui est la largeur de l’écran en pixels, et je vais le diviser 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 je vais arrondir à 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 de 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 ppi.

Si vous le souhaitez, vous pouvez faire la même chose à 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 de lui):

mesurez la hauteur de votre écran (sans 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, donc je vais prendre ce deuxième numéro, 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 Qui encore une fois je vais 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 travaillé à 109 pixels par pouce, pas 72 pixels par pouce.

pour 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 ppi 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 vais prendre ce premier nombre, 1920, qui me donne la largeur de l’écran en pixels, et je vais le diviser par la largeur de l’écran en pouces, qui dans ce cas est 14.4. Donc, 1920 ÷ 14.4 = 133.3, que je vais arrondir à 133 pixels par pouce. C’est beaucoup plus élevé que 72 et même plus élevé que mon moniteur autonome. Je vais faire 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 arrondi à 133 pixels par pouce.,

deux écrans différents, chacun avec deux résolutions d’écran différentes (109 ppi et 133 ppi), tous deux considérablement supérieurs à 72 ppi qui, selon beaucoup de gens aujourd’hui, reste la résolution standard de l’industrie pour visualiser des images sur le web et à l’écran., Si mon écran, votre écran et l’écran de tout le monde a une résolution supérieure à 72 ppi, sans parler du fait que mes deux écrans avaient des résolutions très différentes l’un de l’autre et que votre écran peut également avoir une résolution différente, alors clairement, non seulement il n’y a plus de norme officielle pour la résolution d’écran, mais même s’il y en avait, ce ne serait plus 72 ppi. Ces jours-là, comme les ordinateurs Macintosh originaux pour lesquels il a été conçu, appartiennent à l’histoire.,

la résolution de L’Image affecte la taille de L’impression, Pas La Taille de l’écran

Si le fait que les écrans d’ordinateur aujourd’hui ont tous des résolutions d’écran supérieures à 72 ppi ne vous a pas convaincu qu’il n’existe plus de norme de résolution d’écran de 72 ppi, Si vous avez déjà lu notre tutoriel résolution D’Image, dimensions des pixels et 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 inhérente. C’est juste 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 sous le nom de dimensions de pixels, et c’est tout ce qui intéresse un écran d’ordinateur.

La taille, une image apparaît sur votre écran ne dépend que de deux choses: les dimensions en pixels de l’image et de la résolution d’affichage de votre écran. Tant que vous avez défini votre écran sur sa résolution d’affichage native comme nous l’avons discuté précédemment, une image sera affichée pixel pour pixel., En d’autres termes, chaque pixel dans l’image prend exactement un pixel sur votre écran. Par exemple, une image de 640×480 pixels remplirait une zone de 640×480 pixels de votre écran. De 800 pixels de large bannière sur un site apparaît 800 pixels de large sur l’écran. Pas plus, pas moins. Et peu importe la résolution de L’image que vous définissez dans Photoshop, que ce soit 72 ppi, 300 ppi ou 3000 ppi, cela n’aura aucun effet sur la taille ou la taille de l’image à 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 à presser dans un pouce de papier. Plus vous pressez de pixels dans chaque pouce de papier, plus l’image apparaîtra petite lors de l’impression. Et d’une manière générale, plus vous imprimez de pixels par pouce, plus la qualité d’impression est élevée.

Nous pouvons facilement déterminer la taille d’une photo 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, à titre d’exemple, et définissons sa résolution à 72 ppi 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 ppi, ce 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 imprimerait à une taille de 2,7 x 2 pouces, ce qui est beaucoup plus petit que si nous l’avions imprimée à 72 ppi, 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 pense un peu (en pensant à la photo de l’enfant ):

la résolution D’Image n’est vraiment pas si compliquée, mais certainement un a pour effort.,

je vais ouvrir la boîte de dialogue Taille de L’Image de Photoshop en allant jusqu’au menu Image dans la barre de Menu en haut de l’écran et en choisissant Taille de L’Image:

aller à Image> Taille de l’Image.

en haut de la boîte de dialogue Taille de L’Image se trouve la section dimensions des pixels qui nous indique la largeur et la hauteur de l’image en pixels. Ici, nous pouvons voir que ma photo a à la fois une largeur et une hauteur de 500 pixels, rendre 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 dont votre écran d’ordinateur se soucie – 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 de l’image qui apparaîtrait actuellement sur papier si nous devions l’imprimer. 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 qu’il abrite l’option de résolution très importante (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 ppi), et directement au-dessus de L’option de résolution, dans les zones largeur et hauteur, nous pouvons voir qu’à 72 ppi, ma photo de 500 x 500 pixels imprimerait (500 ÷ 72 = 6.944):

la section Taille du Document nous montre la taille d’impression en fonction de la résolution actuelle. Il 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 de pixel d’origine lorsque je modifie la résolution:

décochant L’option Rééchantillonner L’Image.

avec Rééchantillonner L’Image décochée, je vais augmenter la résolution de 72 pixels par pouce à 240 pixels par pouce. Nous pouvons voir dans la section dimensions des pixels en haut que l’augmentation de la résolution n’a pas changé les dimensions réelles des pixels., C’est encore de 500 x 500 pixels, ce qui signifie qu’il serait encore prendre un 500 x 500 pixels sur l’écran. Mais à 240 ppp, il imprimerait maintenant sur papier à une taille de seulement 2,083 x 2,083 pouces (500 ÷ 240 = 2,083). La modification de 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 le calcul vraiment facile., Une image de 500 x 500 pixels, définie sur 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 pas plus grande ou plus petite à l’écran qu’à 72 ppp, ou 240 ppp, 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 ce dont votre écran d’ordinateur se soucie:

à 500 ppp, l’image imprimerait très petit en effet mais apparaîtrait toujours comme un 500 x image de 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 de pouvoir adapter les trois versions l’une à côté de l’autre, mais la première version à gauche a été enregistrée à 72 ppi. La version dans le milieu a été enregistré à 240 ppi, et la version sur le droit a été enregistré à 500 ppi:

72 ppi (à gauche), 240 ppi (au milieu) et de 500 ppi (à droite) la version 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 de 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 imprimerait à une taille très différente en raison des différents paramètres de résolution, mais cela ne fait aucune différence quant à la taille de l’écran ou à la qualité de l’image.

bien qu’il soit douteux que ce non-sens de la résolution web et de l’écran de 72 ppi disparaisse de sitôt, j’espère que ce tutoriel a au moins facilité la compréhension des raisons pour lesquelles il s’agit en fait d’un non-sens à ce stade., Les écrans d’ordinateur de nos jours ont tous des résolutions d’écran supérieures à 72 ppi, et L’option 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 assez 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 vue qu’à l’écran, que ce soit sur le web, dans un e-mail, ou quel que soit le cas, il n’y a tout simplement aucune raison logique pour laquelle vous auriez besoin de définir sa résolution à 72 ppi dans Photoshop., Sauf si vous imprimez la photo, vous n’avez pas à vous soucier de la résolution de l’image. Et là, nous avons!

Obtenez tous nos tutoriels Photoshop au format PDF! Téléchargez-les aujourd’hui!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *