Accueil » Logiciels » La résolution d’une image pour le web

La résolution d’une image pour le web

Le titre de cet article est volontairement provocateur ; il l’est en tout cas pour ceux qui maîtrisent bien la notion de résolution d’une image numérique. Si vous ne comprenez pas pourquoi ce titre est provocateur, alors je vous conseille de lire cet article !

Le mythe de la résolution de 72 dpi pour les images web

Parler de la résolution d’une image pour le web n’a aucun sens (d’où le titre provocateur 😉 ). Pourtant, on peut encore entendre et lire à l’occasion, que pour les images sur le web, la résolution doit être fixée à 72 dpi, ce serait la valeur référence, la norme habituelle, le standard à respecter…
Si on me pose la question, quelle doit être la résolution d’une image à poster sur le web, je répondrais sans doute avec le sourire, « 72 dpi, oui pourquoi pas… » mais, en fait, pour parler sans détour, on s’en fou complètement !

La résolution d’une image n’a aucune importance pour son affichage ! Vous pouvez tout aussi bien fixer cette résolution à 2, à 300 ou à 1200 dpi cela ne changera rien à la qualité de votre image (ni même à son poids d’ailleurs). L’important pour la qualité d’une image numérique ce sont ses dimensions en pixels (nous n’aborderons pas dans cet article la question de compression d’une image qui a aussi un impact sur sa qualité visuelle).

Pour information cette croyance très répandue de devoir indiquer une résolution de 72 dpi pour des images à afficher sur internet viendrait de la résolution des anciens écrans cathodiques. A une époque, la norme était en effet de 72 dpi. Mais ce temps est bien loin et maintenant les écrans flirtent plus avec les 100 dpi ou plus. Ceux qui affirment qu’il faut mettre 72 dpi comme résolution devraient au moins se mettre au goût du jour, histoire d’aller jusqu’au bout de leur logique… Mais encore une fois, cette croyance de pouvoir influencer l’affichage par la résolution est totalement infondée : peu importe la valeur que vous mettrez en résolution, celle-ci n’aura aucune conséquence sur l’affichage de votre image.

Je sens que certains sont encore sceptiques (et oui les fausses idées ont la peau dure lorsqu’elles ont été maintes fois rabâchées), alors voici 4 images : la résolution des images est respectivement de 2 dpi, 72 dpi, 300 dpi et 1200 dpi.

Image carrée de 272 pixels avec une résolution de 2 dpi

Résolution de 2 dpi

Image carrée de 272 pixels avec une résolution de 72 dpi

Résolution de 72 dpi

Image carrée de 272 pixels avec une résolution de 300 dpi

Résolution de 300 dpi

Image carrée de 272 pixels avec une résolution de 1200 dpi

Résolution de 1200 dpi

Vous voyez une différence ? … Vous pouvez toujours chercher, il n’y en a aucune. La seule information qui diffère c’est la résolution (vous pouvez vérifier en recherchant les propriétés de chaque image).

Vous pouvez constater que les changements de résolution n’ont absolument aucune incidence sur la qualité des images affichées. Je le répète, car c’est vraiment le message à retenir pour en finir avec cette idée reçue : La résolution d’une image n’a aucune incidence sur son affichage ! Seule compte la définition de l’image c.-à-d. ses dimensions en pixels.

Mais alors à quoi peut-elle bien servir cette satanée résolution ?
Et bien c’est simplement au moment de l’impression pour déterminer quelle sera la finesse et la taille de l’image sur le papier que l’information sera utilisée.

Définition de la résolution

Petit rappel sur la définition de la résolution, avant de continuer : la résolution d’une image numérique s’exprime en pixels par pouce linéaire (soit 2,54 cm) ou en pixel par centimètre linéaire.
L’unité de mesure est :

  • PPI : pixels per inch en anglais, en français pixels par pouce (PPP)
  • PPC : pixels par centimètre (plus rarement utilisée)

En d’autres termes la résolution représente la concentration plus ou moins grande des pixels sur un espace défini (pouce, centimètre…). Plus la résolution est élevée plus il y aura de pixels dans un petit espace.

Par exemple une résolution de 100 dpi signifie que l’on peut aligner 100 pixels sur une longueur de 1 pouce, c.-à-d. sur 2,54 cm. Avec une résolution de 200 dpi : on met 2 fois plus de pixels dans le même espace.

L’affichage d’une image sur écran

Sur un écran, la résolution d’affichage est dictée par le matériel, et non par la résolution indiquée dans le fichier image. Peu importe la résolution indiquée dans votre image, sa taille d’affichage dépendra de ses dimensions en pixels et de la résolution de votre écran. Il suffit de voir nos 4 images ci-dessus : les dimensions en pixels étant les mêmes pour les 4 photos, leurs tailles d’affichage sont identiques malgré un changement de résolution. Sur un autre écran, elles apparaîtront peut-être un peu plus petites ou grandes (en raison d’une résolution d’écran différente) mais aucune n’aura une taille différente des autres.

  • Concrètement, si par exemple la résolution du moniteur est de 100 dpi et que votre image fait 100 x 100 pixels : sur cet écran elle mesurera 2,54 x 2,54 cm (1 pouce = 2,54 cm).
  • Sur le même écran, si l’image à afficher fait 200 x 200 pixels, elle fera 5,08 cm² (2 x 2,54 cm) : les 100 premiers pixels tiennent sur 1 pouce (résolution de l’écran), les 100 suivants prennent un autre pouce d’espace : il faut 2 pouces au total pour afficher l’image entière (soit 2 x 2,54 cm, une image de 5 cm environ).
  • Cette image de 200 pixels qui fait environ 5cm sur l’écran 100 dpi, fera 10 cm sur un écran d’une résolution hypothétique de 50 dpi (cette résolution d’écran n’existe pas, c’est juste pour simplifier la démonstration) : seuls 50 pixels tiennent sur 1 pouce, donc il faudra cette fois-ci 4 pouces pour afficher toute l’image (4 x 50 = 200 pixels), donc 2 fois plus d’espace pour afficher l’image : l’image fera 10 cm environ sur cet écran.

La taille d’affichage d’une image sur un écran va varier en fonction des dimensions de l’image en pixels et de la résolution de l’écran mais jamais en fonction de la résolution de l’image.

Un écran a toujours une résolution suffisante pour que les éléments affichés apparaissent nets à distance normale d’observation (on ne distingue pas les pixels). Une image affichée sur un écran  ne fait pas exception. Les pixels la constituant seront espacés selon la trame de l’écran. Quel que soit l’écran l’image sera donc nette mais sa taille pourra varier d’un écran à l’autre.

L’impression d’une image sur papier

Par contre, contrairement à un écran d’ordinateur, sur un papier, il n’y a aucune trame physique qui va imposer que n pixels seront affichés sur un pouce… c’est au moment d’imprimer une image que l’information de résolution de l’image va être utilisée ! Ouf, il était temps !

On peut reprendre exactement l’exemple précédent avec l’image de 200 pixels, en remplaçant cette fois, la résolution de l’écran par la résolution de l’image :

  • Si dans le fichier image, la résolution a été fixée à 100 dpi, alors à l’impression, l’image aura une taille d’environ 5 cm.
  • Si on baisse la résolution de l’image à seulement 50 dpi, l’image sera 2 fois plus grande  mais les points constituants l’image seront plus visibles.

C’est seulement à l’impression que la résolution de l’image influence l’aspect visuel de l’image. Sur le papier, avec une même image (même dimension en pixels), plus la résolution de l’image sera élevée plus les points constituant l’image seront serrés et l’image imprimée de petite taille. Inversement plus la résolution sera basse, plus les points constituant l’image prendront d’espace et plus l’image imprimée sera grande.

Simulation d'impression d'une image de 150 x 150 pixels avec différentes résolutions

A une même distance d’observation, la première impression (haute résolution et petite taille) semblera beaucoup plus fine et nette que la seconde (basse résolution et grande taille) mais à la base l’image est la même, elle n’est pas de meilleure qualité dans le premier cas. On a toujours autant d’informations dans un cas comme dans l’autre (le même nombre de pixels). C’est seulement la répartition de ces informations dans l’espace qui est différente. C’est la définition d’une image, ses dimensions en pixels qui détermineront quels seront les usages possibles d’une image (impression au format A4, en 10 x 15 cm, affichage internet…). Si réduire une image de dimensions importantes s’effectue facilement en gardant une bonne qualité (on a plus d’informations qu’il n’en faut), à l’inverse, augmenter les dimensions en pixels d’une image ne se fera pas sans perte de qualité (le programme devra « inventer » des pixels n’existant pas).

Sachez également qu’il est très facile de changer la résolution d’une image.

Pour une photo postée sur le web, rien ne sert donc de mettre une résolution de 72 dpi à une grande image de 3000 x 2000 pixels en pensant « protéger » son image en empêchant une impression de qualité… Au moment de l’impression, il sera tout à fait possible de changer la résolution initiale de l’image. En l’imprimant à 300 dpi, une image de 2000 x 3000 pixels donnera sur le papier une image proche du A4, de très bonne qualité, précisément de 25,4 cm sur 16,9 cm (3000 pixels / 300 dpi x 2,54 cm et 2000/300 x 2,54).

Inversement si vous récupérez une petite image de 300 x 200 pixels, vous pourrez toujours changer la résolution en mettant une résolution élevée de 300 dpi cela ne comblera absolument pas le manque de pixels. A 300 dpi, l’impression sera certes de qualité, mais l’image tiendra sur un timbre-poste (sur 2,54 x 1,69 cm exactement). Pour imprimer une image plus grande ce sera forcément au détriment d’une résolution plus faible et donc l’image aura une qualité médiocre : pour imprimer une image de 15 cm, il faudra passer la résolution à environ 51 dpi. Cela équivaut en effet à répartir les 300 pixels disponibles (pour le bord le plus large de l’image) sur 15 cm soit 5,9 pouces (15/2,54) donc environ 51 pixels à répartir sur un pouce (300/5,9) ou encore 300 pixels sur 15 cm soit 20 pixels sur un centimètre (ce qui ne donne pas une finesse d’image satisfaisante). Changer de résolution ne va pas magiquement inventer une information qui n’existe pas !

Le pixel étant l’unité d’information d’une image, intrinsèquement, la qualité d’une image, d’un point de vue purement « informatique », va donc directement dépendre de son nombre de pixels (autrement dit de ses dimensions).

Protéger ses images sur le web

Donc si vous voulez éviter que l’on vous prenne vos images sur internet, vous pouvez :

  • Mettre une signature en filigrane (un copyright) pour rappeler qu’internet n’est pas un espace de non droit (au passage, je rappelle aussi qu’une photo sans signature ou copyright est quand même protégée par le droit d’auteur et ne signifie aucunement que la photo peut être récupérée et utilisée sans autorisation).
  • Mettre une image avec des dimensions en pixels peu élevées (à mon avis 800 pixels pour le plus grand côté suffisent pour internet) et surtout pas avec les dimensions d’origine de la photo. En plus, le poids excessif d’une photo non réduite va ralentir le chargement de la page internet.

Et pour ce qui est de la résolution, vous l’aurez compris, vous pouvez mettre ce qui vous fait plaisir ! Cela n’a absolument aucune incidence sur la qualité de la photo ni même sur son poids en octets.

J’espère que cet article aura contribué à dissiper les malentendus et les fausses idées qui circulent autour de cette notion de résolution d’image.

Et vous ?Cet article vous a-t-il aidé ? Faites-vous maintenant parti des nouveaux convaincus qui allez prêcher la bonne parole ou bien y-a-t-il encore des résistances qui persistent ? N’hésitez pas à demander des précisions si certaines explications ne vous ont pas paru claires.

▼ CET ARTICLE VOUS A PLU, DITES LE EN LE NOTANT :
►| Note moyenne de 4.2 /5 attribuée par 48 votant(s) |
Bannière soutenir le blog LuzPhotos

À propos de : Hervé (LuzPhotos)

Hervé Drouet, photographe professionnel au pays basque, spécialiste formation photo et rédacteur du blog LuzPhotos.

27 commentaires

  1. Merci Hervé, voilà une explication on ne peut plus claire. C’est vrai que les vielles croyances ont tendance à rester ancrées et il est donc nécessaire de s’en défaire pour ne pas être « As been » et surtout, bien évidemment, pour savoir utiliser ses images à bon escient.

  2. Merci Hervé pour le détail de cette explication qui enfin fait « lumière » chez moi ! Personnellement je patinais gentiment sur la question…

  3. je viens de lire dans la foulée le tableau de 7d Mark II et 7d ensuite celui du 7d Mark II et 70d, puis sur la sorite vautours et enfin celui-ci . Je me régale, c’est très intéressant et ça éclaire l’amateur. Merci

  4. Merci Hervé pour cet excellent article. Il y a encore sur le web des tutoriels qui indiquent que la résolution de l’image doit être de 90 ou 100 dpi. Grâce à ton article les problèmes de résolution et taille d’une image deviennent beaucoup plus claires.
    Maïté H.

    • Merci Maïté, oui cette croyance d’un lien entre résolution d’une image et affichage à la vie particulièrement dure, notamment parce que, comme tu le dis, des internautes (qui pensent de bonne foi avoir compris) affirment haut et fort des contrevérités.

  5. Merci pour cet article super intéressant

  6. Génial cet article ! J’adore quand c’est technique et que je comprends tout ! 🙂
    Super bien expliqué, merci !
    Fini de me prendre la tête sur les résolutions, youpie. 🙂

  7. Thanks!!! pour le rappel

  8. Génial, toutes les réponses à mes questions !

  9. un grand merci pour ces explications nettes et précises !

  10. Bonjour,
    En complément de cet exposé clair, j’aurais quand même voulu savoir pourquoi des images de 7360×4912 et 1618×1080 (par exemple) s’affichaient identiquement à l’écran ?
    Il y a là aussi quelques chose d’important à préciser…
    Merci

    • Bonjour Serge,

      Il faudrait préciser dans quel contexte exactement vous avez ce constat car, sur un même écran, des photos dont la taille en pixel est différente, n’auront pas non plus la même taille d’affichage sur l’écran.
      Attention toutefois à bien s’assurer que le mode d’affichage permet bien de comparer les 2 photos : dans beaucoup de logiciels de traitement d’images, selon le mode d’affichage retenu, la photo va s’adapter à l’espace disponible d’affichage afin qu’elle soit entièrement visible. Résultat, dans ce cas de figure, si vos photos sont plus grandes que l’espace d’affichage, même si elles sont de taille différentes, elles s’afficheront de la même manière. Par contre, si vous choisissez un affichage à 100% (appelé « Taille réelle des pixels » dans Photoshop), vous allez vite constater la différence si vos photos n’ont pas les mêmes dimensions.
      Vous pouvez faire le test en enregistrant une même photo dans des tailles différentes et en les affichant ensuite à l’écran en prenant bien garde de choisir un affichage à 100% (ou du moins, un même pourcentage d’affichage pour comparer vos photos).

      Après, s’il s’agit d’un affichage par internet, généralement, pour des question de présentation, des dimensions sont imposées : l’image est redimensionnée automatiquement sous forme de vignette mais il ne s’agit pas forcément de la photo avec sa taille d’origine. Il faudra ouvrir l’image pour constater les différences de tailles.

      N’hésitez pas à me donner un exemple détaillé pour que je puisse être encore plus précis dans ma réponse.

  11. Super article mais les 4 versions de la photo de chat ont exactement la meme resolution, du coup ben c’est pas top comme exemple.

    • Oups en effet, bien vu ! J’ai compris l’erreur que j’ai faite : les fichiers originaux étaient ok (chacun avait bien une résolution différente) mais en préparant l’article j’ai comme d’habitude optimisé les images pour internet (réduction du poids des fichiers pour améliorer les temps de chargement de la page) et là… la boulette, j’ai un peu trop optimisé 🙂 j’ai supprimé les métadonnées avec l’information de résolution…
      Je viens de corriger ! C’est bon maintenant l’exemple est top 😉
      merci pour le retour

  12. Merci pour l’article ! Clair, et enfin compréhensible !
    La crédibilité de mon apprentissage en prend un coup, mais du coup ça explique aussi beaucoup de choses…
    Super idée aussi de mettre à disposition les 4 images avec des résolutions complètement différentes.

  13. Merci pour cet article ! Votre démonstration est claire et efficace, bravo !

  14. Voilà des années que je retouche des photos sur Photoshop et que je connais parfaitement tout ce qui vient d’être exposé dans cet article. Mais les habitudes ont la vie dure et je continuais comme un benêt à appliquer du 96 dpi sur mes photos destinés au web parce qu’il y a pas mal d’années nos écrans étaient passés à 96 dpi…
    Merci de m’avoir recouvré la vue ! Maintenant j’ai pris la bonne… résolution…

  15. Bonjour
    et bravo pour votre article.

    Vous avez tout à fait raison pour l’affichage WEB seule la taille en pixels compte.

    Cependant, à mon sens il faut préciser que pour l’image des chats la taille en centimètres d’une image à l’autre n’est pas du tout la même. Celle à 2 DPI fait 345cm de côté et celle à 1200 dpi fait 5mm de côté.

    Vous avez donc compensé la résolution par la taille physique de l’image en centimètres. Donc la taille physique d’un pixel (1 pouce divié par le nombre de pixels présents sur 2,54cm) en fait ne change pas (il n’y a pas d’interpolation) et c’est pour ça que vos images s’affichent à la même taille.

    Or la plupart des logiciels sont réglés pour faire une interpolation lorsque l’on change la taille et la résolution, attention à ce paramètre (la case interpolation est cochée par défaut)

    De plus, en lisant votre article on a l’impression que le poids du fichier est complètement indépendant de la résolution, alors il faut aller jusqu’au bout et dire que taille et résolution sont liés et que l’un peut compenser l’autre si l’on fait pas d’interpolation.

    Il me semble qu’il fallait apporter cette précision, j’espère qu’elle sera utile à tous.

    • Oui le sujet n’est pas toujours simple à expliquer…
      Quelques petites précisions par rapport à vos remarques :

      1) « pour l’image des chats la taille en centimètres d’une image à l’autre n’est pas du tout la même » :
      oui mais encore une fois, sur un écran, parler de taille en cm calculée par l’information de la résolution contenu dans l’image n’a pas de sens. Cette information de résolution aura uniquement un sens lorsqu’il y aura une impression sur un support physique, pas avant.

      A l’affichage, le seul cas où la résolution de l’image pourra être utile sera dans les logiciels comme Photoshop, où il existe un affichage spécifique pour simuler sur l’écran la taille que fera votre image après impression sur papier (menu Affichage – Taille d’impression). Faudra-t-il encore avoir bien paramétré votre logiciel pour que l’affichage soit exact (voir à ce sujet l’article « Affichage – Taille d’impression » erronée dans Photoshop).

      2) « Vous avez donc compensé la résolution par la taille physique de l’image en centimètres. Donc la taille physique d’un pixel en fait ne change pas et c’est pour ça que vos images s’affichent à la même taille » :
      Les images s’affichent à la même taille uniquement parce que les dimensions en pixels sont identiques (peu importe les autres paramètres). Ensuite la taille en cm que vous pouvez mesurer sur l’écran est simplement la conséquence de la résolution de l’écran et n’a aucun rapport avec la résolution contenu dans l’image (cette information sera uniquement utilisé à l’impression, pas à l’affichage). Selon l’écran, les 4 images (qui seront toujours d’une taille identique) pourront apparaître plus ou moins grandes en fonction de la résolution de l’écran (revoir à ce sujet la partie L’affichage d’une image sur écranhttp://www.luzphotos.com/logiciels/resolution-image-web#laffichage_dune_image_sur_ecran)

      3) Vous avez tout à fait raison de souligner le risque lié à l’option de rééchantillonage (interpolation des informations de pixels) qui est souvent cochée par défaut dans certains logiciels photo. Cette option est sans doute à l’origine de beaucoup d’incompréhensions… je ne voulais pas compliquer les explications avec cette notion de rééchantillonage.

      4) « en lisant votre article on a l’impression que le poids du fichier est complètement indépendant de la résolution »
      Oui, je confirme « le poids du fichier est complètement indépendant de la résolution »… sauf bien sûr si vous changez la résolution alors que vous avez cochée l’option rééchantilonnage. Dans ce dernier cas, par ricoché, les dimensions de l’images en pixels vont être modifiées et donc le poids du fichier va varier. C’est uniquement parce que les dimensions changent que le poids va varier. Il suffit de télécharger les 4 images du chats pour constater que, malgré une résolution différente, elles font toutes le même poids (19,3 Ko chacune) car elles ont exactement les mêmes dimensions en pixels.

      J’insiste, l’important pour une image c’est son nombre de pixels, ses dimensions en pixels (c’est l’unité d’information de l’image).
      Ensuite la résolution, c’est juste une simple donnée dans un fichier image. Elle n’aura d’utilité qu’au moment de l’impression pour savoir combien de pixels on va mettre par cm ou pouce. Ensuite, la taille en centimètre n’est que le résultat du nombre de pixels disponibles distribués sur le support en fonction de de cette résolution.

      Ce qui perturbe souvent c’est qu’en effet dans certains logiciels, en changeant cette information de résolution, on change automatiquement le nombre de pixels. Mais dans ce cas, il faut bien être conscient que ce n’est plus vraiment la même image : on a plus (augmentation du nombre de pixels) ou moins (diminution du nombre de pixels) d’informations par rapport à l’image d’origine.

Laisser un commentaire