Le guide ultime à la résolution de l’image

Rafraîchissez vos connaissances en résolution d’image, de la taille en pixels au DPI.

Lorsque vous travaillez dans le secteur du design depuis un certain temps, la résolution de l’image et le DPI ont probablement un sens parfaitement intuitif. Mais pour les débutants – ou ceux qui travaillent avec des designers mais ne sont pas eux-mêmes des professionnels du design – cela peut être un désordre complètement déroutant.

Même si vous utilisez volontiers les valeurs DPI dans votre travail quotidien, répondre à la question « Qu’est-ce que le DPI ? » peut rapidement vous amener à faire des nœuds.

Nous sommes donc là pour vous aider. Ce guide est conçu pour aider tout le monde à comprendre la résolution de l’image, que vous soyez débutant ou non ; travailliez dans un département tel que le marketing où vous deviez traiter avec des professionnels du design ; ou même un expert chevronné qui doit indiquer à un collègue un guide qui aide à expliquer pourquoi, le simple fait de changer la résolution en 300 dpi dans Photoshop CC n’en fait pas, comme par magie, une image de 300 dpi (eh bien, ça le fait… mais pas de la façon dont je veux dire, d’accord ?)

Avant de commencer, il y a quelques points à noter. Tout d’abord, une partie de ce que je dis sera une simplification, et bien que j’ajouterai quelques mises en garde et quelques détails par la suite, je souhaite essayer de garder les choses simples dès le début.

Deuxièmement, nous aborderons ici les formats bitmap (grosso modo, tels que JPEG, PNG, GIF et PSD), car ce sont les plus difficiles en termes de taille d’image : ils contiennent une quantité de détails finie. Les images vectorielles telles que EPS, SVG et AI sont généralement évolutives à l’infini. Elles ont leurs propres problèmes, mais nous les ignorons ici !

Qu’est-ce qu’un pixel ?

Les images bitmap sont formées de rangées de carrés colorés

Peut-être que probablement tout le monde le sait, mais nous devons commencer par le début. Quel que soit le format dans lequel ils sont enregistrés, les images bitmap (matricielles) sont toutes formées de la même manière : des rangées et des rangées de carrés colorés empilés les uns sur les autres. Zoomez sur une image bitmap assez près et vous pouvez voir ces carrés – « éléments d’image » ou pixels ; un peu comme des carreaux individuels de mosaïques romaines ou des points de suture au point de croix – mais éloignez-vous et vos yeux les perçoivent comme des dégradés lisses et des lignes ininterrompues.

Qu’est-ce que le DPI ?

DPI (dots per inch) signifie « points par pouce ». En gros, plus le DPI est élevé, plus il y a d’informations dans une image, donc plus vous pouvez voir de détails et plus nette sera l’image.

Pensez-y de cette façon : si vous construisiez une photo sur un mur en utilisant des carreaux de couleur d’un pouce carré, votre image aurait une résolution de 1 dpi, et vous auriez dû vous tenir assez loin en arrière pour voir l’image comme suit : lisse et cohérente. Si vous utilisiez plutôt des carreaux d’un demi-pouce de côté, vous produiriez quelque chose qui serait de 2 dpi et pour laquelle vous n’auriez pas à rester aussi loin en arrière avant que le pavé ne commence à paraître.

(Techniquement, vous n’utilisez « points par pouce » que lorsque vous parlez d’impression, alors que « pixels par pouce » est utilisé pour les affichages et les images numériques et « échantillons par pouce » (samples per inch) pour les scanners, mais les concepts sont si étroitement liés que, à ce stade, dans l’explication, vous pouvez les traiter de manière interchangeable. C’est le mensonge le plus flagrant envers les enfants dans cette partie ; une clarification à venir.)

Quelle est la taille des pixels ?

Ce qui précède semble assez simple : une résolution plus élevée équivaut à une image plus nette, non ? Eh bien, il y a un problème. Le problème est que la taille des pixels, ou mosaïques, dans l’analogie ci-dessus, n’est que l’un des deux facteurs qui régissent la taille et la qualité de l’image. L’autre est la taille physique d’une image une fois qu’elle est imprimée. Ce qui les lie est le nombre de pixels dans une image : les dimensions en pixels, souvent exprimées en nombre de pixels de large et en hauteur, telles que 640 × 480.

(En photographie, la taille de l’image est généralement exprimée en mégapixels. Toutefois, il suffit de multiplier le nombre de pixels en largeur par le nombre de pixels que produisent les appareils photo. 640 × 480 = 307200 et, depuis, la réponse divisée par un millions – le « méga » en mégapixels – est de 0,3, on pourrait dire que les premiers appareils produisaient des images de « 0,3 mégapixels. »)

Les deux choses (combien de points par pouce et la taille de l’image finie) sont complètement dépendantes l’une de l’autre (avec une mise en garde qui apparaît après l’exemple B) ; changez-en une, et les autres changent.

Je vais vous donner quelques exemples pour aider à expliquer comment cela fonctionne, mais les visualiser ici à l’écran (surtout si vous utilisez un smartphone) n’est qu’une indication des effets dont nous parlons. Pour obtenir un effet réel, téléchargez et imprimez ce PDF, et suivez-le ! Les chiffres que je mentionne se rapportent à ce document, pas à ce que vous voyez à l’écran.

[gview file= »https://lotincorp.biz/wp-content/uploads/2019/06/dpi_cheatsheet.pdf »]

J’ai donné une photo et un logo pour chaque exemple, car l’effet peut parfois affecter différents types d’images de différentes manières.

Exemple A : mêmes dimensions en pixels, DPI plus élevé ; taille physique inférieure

Ici, il y a le même nombre de pixels dans les images à droite que dans les originaux à gauche, mais nous venons d’augmenter la valeur DPI de 72 à 300. L’effet est qu’il y a maintenant plus de points à chaque pouce, mais comme le nombre total de points composant l’image n’a pas changé, l’inévitabilité mathématique est que l’image devient plus petite, étant donné que chacun des pixels composant l’image est devenu plus petit afin de pouvoir en contenir davantage dans un pouce.

La grille de pixels qui compose l’écran de votre ordinateur ne change jamais de taille – « un pixel » est une chose abstraite et sans taille – mais les pixels qui composent une image peuvent être imprimés à n’importe quelle taille. Ci-dessous, de manière simplifiée, voici ce qui se passe :

Exemple B : Même taille physique, DPI inférieur ; dimensions de pixel inférieures

Sur la gauche sont les images originales. Sur la droite, le nombre de pixels de chacun a été réduit à environ un quart des valeurs d’origine tout en conservant la même taille physique. Cela signifie que chaque pixel a grossi et que la valeur DPI a diminué (car il y a moins de points adaptés à chaque pouce) et l’image devient plus floue. Ci-dessous, de manière simplifiée, voici ce qui se passe :

Qu’est-ce que l’interpolation ?

Avec moi jusqu’à présent ? Bien, parce que je suis sur le point de lancer une balle courbe. Bien que l’exemple A ne modifie pas la quantité d’informations dans l’image et que l’exemple B la réduise, vous pouvez ajouter davantage d’informations par le biais d’un processus appelé interpolation. Pensez-y comme ceci : si vous avez un pixel bleu à côté d’un pixel jaune et que vous souhaitez ajouter un troisième pixel entre les deux, vous pouvez augmenter le DPI tout en conservant la même taille physique, ou plus généralement augmenter la taille à laquelle il peut être généré tout en conservant un DPI similaire, l’ordinateur peut alors deviner que ce pixel doit être vert.

Cela semble bien, mais dans la pratique, vous ne pouvez pas créer des tonnes d’informations qui n’étaient pas là. C’est pourquoi prendre une image de 150 dpi, par exemple, et la porter à 300 dpi (à la même taille physique) n’est pas une solution au problème de l’absence de résolution suffisante.

Exemple C : Dimensions supérieures en pixels (interpolées), même taille physique ; DPI supérieur

À gauche, une image de 72 dpi et à droite, une image de 300 dpi obtenue en interpolant des informations provenant de celle de gauche. Voici ce qui se passe, de manière simplifiée :

Cependant, examinez de plus près l’image de 300 dpi que nous venons de créer avec une interpolation (en bas à gauche) et un original de 300 dpi (en bas à droite) et vous verrez que le « faux » détail ajouté avec l’interpolation ne se compare pas à une image qui a vraiment tout ce détail. Sur le PDF, comparez l’image en bas à droite avec celle à gauche de la ligne du milieu.

Comment faites-vous réellement tout cela dans Photoshop ?

La boîte de dialogue « Taille de l’image… » dans Photoshop – ou des applications similaires – semble simple, mais c’est un terrain miné si vous ne savez pas ce que vous faites. L’essentiel à retenir est que tous les champs sont essentiellement connectés (car les dimensions en pixels, la résolution et la taille d’impression physique le sont). Changer une valeur changera aussi les autres, en fonction du type de redimensionnement que vous essayez de faire. Voici une visite guidée.

Ratio d’aspect (1)

Cela maintient le rapport d’aspect – la relation entre la largeur et la hauteur. Cela devrait être actif pour presque chaque travail que vous faites. Cliquez pour basculer.

Unités de mesure (2)

Vous pouvez voir la taille de l’image affichée en pixels, centimètres ou autres mesures. Notez que bien sûr, tout est toujours interdépendant. Par conséquent, si vous passez en centimètres et modifiez les valeurs, le nombre de pixels peut également changer.

DPI (3)

C’est le DPI (ou plus exactement le PPI ; clarification à venir…) de l’image.

Option de re-échantillonnage (4)

C’est le plus délicat. Lorsque cette option est désactivée, les dimensions en pixels (le nombre de pixels à travers et vers le bas) de votre image ne changeront pas si vous modifiez les valeurs. En gros, vous rendez simplement chaque pixel plus grand et plus petit pour la sortie (comme dans l’exemple A précédent) lorsque vous ajustez la résolution ou la taille physique. Lorsque cette case est cochée, vous modifiez les dimensions en pixels, vers le haut ou vers le bas. Si vous ajoutez finalement plus de pixels (gardez un œil sur l’affichage Dimensions en haut), ils seront ajoutés à l’aide d’une interpolation (exemple C).

Types de re-échantillonnage (5)

Vous avez quelques options pour la façon dont l’image est re-échantillonnée ici ; si vous n’êtes pas sûr, laissez-le sur Automatique. Le « voisin le plus proche » est la seule option pour ne pas utiliser l’interpolation et vous ne devriez généralement pas l’utiliser. Une exception courante est si vous avez affaire à des graphiques parfaits comme des captures d’écran en basse résolution ou des pixel art, et que vous souhaitez que les détails ne deviennent pas maculés lorsque vous augmentez ou réduisez la résolution. Dans ce cas, travaillez par incréments de 100%.

J’espère que cela vous aura donné une compréhension de base du rôle de DPI et de la résolution, mais je parie que vous avez encore des questions. Laissez-moi deviner ce qu’elles sont et essayer d’y répondre !

En quelle résolution mes images doivent-elles être imprimées ?

Pour l’impression, 300 dpi est généralement optimal, mais vous pouvez vous en tirer avec moins ; Même 150 ppp convient souvent aux images photographiques, bien que cela commence à paraître un peu nul pour les logos, etc. Toutefois…

De quel DPI ai-je besoin pour l’écran ?

La plupart des gens ont l’impression que toutes les images à l’écran devraient être à 72 ou 96 dpi. Cependant, les DPI ne sont généralement pas pertinents pour la design d’images pour l’écran, et pas seulement parce que « DPI » est spécifiquement une préoccupation de l’impression. Parce que vous allez présenter une grille de pixels (votre image) insérée un par un dans une autre grille de pixels (un écran), « la taille des pixels », ce dont on parle quand on parle de DPI, n’est pas pertinent. Donc, en termes généraux, vous devez simplement vous soucier des dimensions en pixels, et non des DPI / PPI.

La résolution de 72/96 ppp est un héritage traditionnel que vous pouvez ignorer, surtout avec les écrans haute résolution actuels, qui rencontrent des problèmes de création de versions @2x.

Il y a cependant un problème : dans certains contextes, les systèmes peuvent essayer de lire une valeur DPI à partir de métadonnées et faire preuve de discernement quant à la manière dont ils présentent une image, lorsque tout ce que vous voulez, c’est d’afficher les pixels 1:1. Donc, même si cela me gêne, je règle parfois manuellement la résolution des images destinées à des pages Web à 72 ppp.

Pourquoi mon imprimante imprime-t-elle à 4800 dpi ?

Chaque pixel d’un écran d’ordinateur moderne peut afficher l’une des 16,8 millions de couleurs, mais lorsque ce pixel est imprimé, par exemple, sur une imprimante à jet d’encre, à moins que ce soit du cyan pur, du magenta, du jaune ou du noir, l’imprimante doit recréer sa couleur en plaçant encore de plus petits points d’encre C, M, J ou N pure dans les limites de ce pixel pour que nos yeux perçoivent le pixel comme la couleur correcte.

Par conséquent, le nombre de points par pouce que l’imprimante doit pouvoir placer doit être élevé – beaucoup plus élevé que la plupart des images que vous lui enverriez – afin que vous puissiez créer les couleurs nécessaires à chaque pixel. Et c’est pourquoi, confondre DPI, PPI et SPI comme je l’ai fait très tôt est en réalité une idée terrible, techniquement.

Cependant, beaucoup de gens appellent les trois « DPI » – même si Photoshop l’appelle correctement PPI dans sa boîte de dialogue – et à moins que vous ne deveniez technique ou pédant, vous le pouvez aussi. (Il y a aussi l’IPV, mais ne compliquons pas davantage les choses.)

Qu’est-ce que la résolution de l’image ?

À ce stade, vous vous demandez probablement quand quelqu’un demande la « résolution de l’image », s’il fait référence aux dimensions en pixels ou au DPI (ou PPI) ? Eh bien, ça peut être l’un ou l’autre. Pardon. Différentes personnes utilisent le terme pour chacun, et de toute façon cela dépend du contexte. Si vous n’êtes pas sûr, clarifiez.