Est-il obligatoire de conserver les images à 72DPI pour la conception Web?

Je conçois des bannières Web depuis plus d'un an, mais je n'ai jamais envisagé le DPI.

J'utilisais le 72DPI par défaut, mais je veux maintenant savoir s'il est nécessaire de créer des conceptions Web dans 72DPI. Et si nous utilisions plus que cela, par exemple 200DPI?

Je sais que plus de DPI signifie plus d’image de qualité et c’est la raison pour laquelle je veux utiliser un DPI élevé, mais récemment, j’ai lu quelque part que nous devrions utiliser 72DPI pour les bannières Web. Je veux juste savoir si c'est obligatoire et si cela a un impact négatif sur tous les aspects.

Les paramètres PPI (pixels par pouce) ne sont pas utilisés dans les images Web. Les images sur le Web, que ce soit sur les écrans Retina ou autres, sont affichées en pixels (largeur et hauteur) et non en paramètres PPI / DPI. En fait, de nombreuses images Web telles que png, gif, jpg peuvent même ne pas stocker de paramètre ppp dans leurs données internes et dépendent des paramètres de largeur et de hauteur.

Une image de 100 pixels x 100 pixels s’affiche comme sur le Web, quel que soit le réglage PPI / DPI.

C'est pourquoi les images pour les écrans Retina sont enregistrées au format 2x, au lieu d'un paramètre ppp augmenté. La densité de pixels des affichages de rétine est plus élevée, mais ils affichent toujours une image quel que soit l'état de l'écran, la largeur et la hauteur d'une image ne sont basées sur aucun réglage PPI.

En réalité, un moniteur utilisant une densité de pixels de 72 ppp n'a pas été vu depuis le début ou le milieu des années 1980. 72ppi n'a pas été exacte depuis près de 30 ans. En fait, cela n’a jamais été précis pour les systèmes Windows, car Windows utilise une valeur par défaut de 96 ppp pour la densité de pixels.

Ne me crois pas? Essayez par vous-même. Créez deux images dans Photoshop à la fois 100 pixels par 100 pixels. Faites une image 72ppi et l’autre 300ppi. Enregistrez les deux pour le Web. Sont-ils différents dans un navigateur Web? Nan. Ils sont tous les deux images 100px par 100px.

Les paramètres DPI (points par pouce) ne sont applicables que lors de l'impression d'une image. DPI n’a aucune incidence sur les images destinées à l’écran. Le DPI correspond à la quantité de points / taches d’encre que la presse placera dans un pouce. Comme aucun affichage sur Terre n'utilise d'encre, DPI est un terme incorrect à utiliser pour tout ce qui concerne les écrans d'affichage.

Sachez que certains fabricants de produits mobiles ont choisi d'utiliser le terme DPIx ou xDPI, parfois abrégé simplement DPI. Ce n'est pas la forme traditionnelle de l'acronyme et le fabricant a tout simplement brouillé les cartes. Si vous voyez DPI en relation avec les résolutions d'écran mobile, ils parlent d' un PPI efficace et ne font pas vraiment référence à Dots Per Inch. Un acronyme plus approprié aurait été xPPI ou PPIx car les écrans mobiles, comme tous les écrans, utilisent des pixels et non de l'encre.

Le paramètre ppi que vous utilisez pour les images Web ne fait aucune différence. Ce sont la largeur (pixel) et la hauteur (pixel) d'une image qui sont importantes.

Lorsque vous travaillez avec plusieurs images, il est important de rester cohérent. Vous voudrez que toutes vos images soient définies sur le même ppi pour éviter le redimensionnement et la mise à l'échelle d'aspects si vous déplacez des morceaux entre les images. Que vous choisissiez d'utiliser 72, 96, 200 ou 145,8 ppp importait peu, mais toutes les images devraient être identiques.

Bien que les PPI importent peu - les dimensions en pixels étant importantes pour la conception d'applications Web et d'applications, vous devez faire très attention à l'utilisation d'applications de conception et au mélange des paramètres PPI. Voici pourquoi:

Toutefois, si vous prévoyez d'utiliser Photoshop et différentes densités de pixels pour chaque document, faire glisser les calques et copier les styles de calque entre les styles de calques de documents - le fait de faire glisser un calque d'un document iPhone Retina 326PPI vers un document iPad Retina 264PPI signifie que tous les styles de calque sont redimensionnés. de 20% (puis arrondi à l'entier le plus proche). Et ce n'est probablement pas ce que vous voulez. En outre, l'aperçu de OS X affichera des images 72PPI à la taille exacte, quelle que soit la configuration choisie.

Pixels par pouce est juste une balise

C'est pour ces raisons que j'attribue 72PPI à tous mes documents de conception et je vous recommande de faire de même. Pour modifier la densité de pixels de votre document Photoshop sans redimensionner les données d'image, ouvrez la boîte de dialogue Taille de l'image, décochez la case Redimensionner l'image et entrez la densité de pixels souhaitée.

Je vais entrer dans les détails de ce que le "dpi" signifie réellement, par des exemples; avec cela, vous pouvez juste voir la réponse vous-même. :

En bref, votre image est constituée de points de couleur juxtaposés. Mais ils n'ont pas de taille physique.

Désormais, lorsque vous affichez une image sur un écran, vous ne mettez normalement que les couleurs du point de l'image dans la trame de rectangles colorés que votre écran peut afficher. Notez que les deux, ce que j'appelle les "points" et les rectangles, sont appelés "pixels" - mais en regardant de plus près, ils sont quelque chose de différent.

Si nous affichons une image de cette manière sur un écran, nous pouvons mesurer sa taille.
Par exemple, notre image mesure 500 points de large, nous les plaçons dans des rectangles colorés à l'écran et voyons qu'elle fait 5 pouces de large. Ensuite, nous avons 100 rectangles par pouce, montrant 100 de nos points par pouce.
C'est-à-dire que notre image a 100 ppp à l'écran.
Mais nous n'avons même pas regardé la valeur dpi dans notre fichier image!

Maintenant, si nous regardons notre fichier, il se peut bien que l’image soit 200 dpi! La valeur dpi représente environ le nombre de points de couleur visibles par pouce de largeur ou de hauteur d'écran. Ainsi, la valeur dpi de l'image nous indique que notre image aura une largeur de 2,5 pouces lorsqu'elle sera affichée - comme une promesse, pas comme un fait .

Lorsque nous avons affecté les points d'image à l'écran, nous ne nous en sommes pas souciés, car nous venons de l'afficher et de mesurer le dpi physique réel de la représentation à l'écran de l'image.
Donc, comme vous le voyez, la promesse était tout simplement fausse . Et personne ne s'en soucie! Parce que ce n'est tout simplement pas pertinent.

Le fichier était prometteur - en disant 200 dpi - il sera "2,5 pouces de large quand montré". Nous avons ensuite utilisé un écran de 5 pouces de large - nous pouvons le savoir car nous connaissons l’écran réel.
Normalement, nous ne savons même pas ce que l’utilisateur final utilisera comme affichage, nous ne pouvons donc deviner que de toute façon,

Donc, maintenant cela a du sens:

• Nous ne connaissions pas le dpi que les images, affichées sur un écran, auront, car nous ne connaissions pas l'écran.
• Mais nous avions une idée de ce à quoi cela devrait ressembler, "à peu près cette taille ... ok, alors nous avons besoin d’environ 200 dpi." et enregistré le "200 dpi" dans le fichier
• Plus tard, nous avons regardé l’écran et mesuré qu’il s’agissait en fait de 100 dpi;

De plus, il n’existe pas un seul écran sur lequel l’image peut être affichée, mais leur taille peut être différente. Il est donc impossible de connaître une valeur dpi réelle lors de la création d’un fichier image.

Voir aussi ma réponse sur Qu'est-ce qu'un "pixel"? .

Directement à la question, basée sur ce qui précède:

Lorsque vous spécifiez une résolution dpi dans un fichier image, cela n’est pas directement lié à la qualité de l’image affichée.
Mais il peut être utilisé pour communiquer sur la qualité d’image - en termes d’intention: vous pouvez dire "Je veux que cette image soit affichée sur un écran de 200 dpi".

Si je veux montrer cette image, je peux prendre soin de chercher un écran de 200 dpi; ou peut-être que je viens d'utiliser un vieil écran 75dpi qui peut être sur mon bureau. L'image sera assez grande, je dois faire défiler - mais c'est mon problème, et: vous ne saurez même pas ce qui est vraiment utilisé - la valeur 200 ppp ne contrôlait pas la qualité de l'image - elle indiquait simplement comment l'afficher "à droite" chemin "si je me soucie.

Je viens de tester deux copies d'une image que j'ai faite avec Photoshop. Cependant, je règle l’un à 72 dpi et l’autre à 720 dpi pour voir si l’un des navigateurs que j’utilise utilise leur rendrait des tailles différentes à l’écran.

Sur tous les navigateurs sauf un, ils semblaient identiques - en termes de taille et de qualité. Cependant, avec l'utilisation de Google Chrome, celui fabriqué à 72 avait l'air correct, mais celui fabriqué à 720 était extrêmement petit - comme s'il faisait 1/10 de la taille.

Bon chagrin Cela ressemble à un argument pour mettre toutes les images libres (non limitées dans une page Web) à 72. La quasi-totalité des miennes (dont le nombre se compte par centaines) sont à 120 dpi. Même s'ils semblent toujours assez grands sur Chrome, peut-être qu'avec ce navigateur, je devrais essayer de les mettre tous à 72. Peut-être que quelque part dans les petits caractères des préférences de Chrome, il existe un remède.