DPI des images expliqué : le 72 ou le 300 DPI compte-t-il en ligne ?

Réponse rapide : le DPI n’est pas l’interrupteur de qualité web

Pour une image de site web classique, 72 DPI ou 300 DPI ne décide pas de la netteté à l’écran. Le navigateur travaille surtout avec :

• les dimensions en pixels réelles de l’image, par exemple 1200 × 800 ;
• la taille CSS dans la page, par exemple 600 px de large ;
• les règles d’images responsives comme srcset et sizes ;
• la densité de pixels de l’écran ;
• la compression et le format utilisés à l’export.

Un JPG 1200 × 800 étiqueté 72 DPI et le même JPG 1200 × 800 étiqueté 300 DPI s’affichent de la même manière sur une page web. Ils contiennent exactement les mêmes pixels. La valeur DPI est avant tout une instruction d’impression.

Le DPI commence à compter dès que l’image doit devenir une taille physique. Une photo d’identité 2 × 2 pouces en 300 DPI demande 600 × 600 pixels. Un tirage 4 × 6 pouces en 300 DPI demande 1200 × 1800 pixels. C’est là que le chiffre DPI devient utile : il relie les pixels aux pouces ou aux millimètres.

Alors quand quelqu’un demande « 300 DPI », la meilleure question en retour est :

C’est pour imprimer, ou vous avez en fait besoin d’une image avec plus de pixels pour le web ?

DPI, PPI, pixels et pixels CSS

Le terme DPI recouvre plusieurs choses différentes — c’est pour ça que les conseils partent souvent dans tous les sens.

Pour un fichier image numérique, PPI est le terme le plus juste. Un fichier ne contient pas de points d’encre : il contient des pixels. Mais on cherche « DPI », les labos parlent de « DPI » et les clients disent DPI quand ils veulent dire PPI, donc ce guide utilise les deux avec précaution.

La formule pratique est simple :

pixels = pouces d’impression × PPI
pouces d’impression = pixels / PPI

Une photo de 3000 pixels de large peut s’imprimer en 10 pouces à 300 PPI, en 20 pouces à 150 PPI ou en 41,7 pouces à 72 PPI. Le fichier ne devient ni meilleur ni pire — vous décidez seulement de la densité à laquelle les pixels sont posés sur le papier.

Ce que fait vraiment la valeur DPI dans une image

De nombreux formats peuvent stocker une valeur de résolution ou de densité. Dans les logiciels courants, vous la verrez apparaître comme :

• 72 DPI,
• 96 DPI,
• 240 PPI,
• 300 PPI,
• un champ « Résolution » dans Photoshop,
• des métadonnées de densité horizontale et verticale dans un JPG ou un PNG.

Cette valeur est une métadonnée. Elle suggère la taille à laquelle l’image devrait être imprimée ou placée dans une mise en page qui respecte cette densité. Elle n’ajoute pas de détail.

Prenez une photo 3000 × 2000 :

Mêmes pixels. Taille d’impression suggérée différente.

C’est là que beaucoup se font piéger. Si vous ne changez que le champ DPI, vous n’avez pas redimensionné l’image pour le web, vous ne l’avez pas compressée et vous ne l’avez pas rendue plus nette : vous avez changé l’étiquette d’impression.

Ce que les navigateurs utilisent à la place

Pour le travail courant sur une page web, les navigateurs s’appuient sur les données pixels du fichier et les instructions de mise en page.

Si le HTML ou le CSS dit qu’une image doit s’afficher à 600 pixels CSS de large, le navigateur la place à 600 pixels CSS de large. Fournissez une source de 1200 pixels de large pour cet emplacement et vous aurez de quoi tenir un écran haute densité 2x. Fournissez une source de 400 pixels de large et l’image risque de paraître molle parce que le navigateur doit l’agrandir.

C’est pourquoi le travail image sur le web ressemble souvent à ceci :

• Image hero : exporter autour de la plus grande largeur d’affichage prévue, souvent avec des variantes responsives.
• Image de blog : viser 1200-1600 px de large sauf si le design demande plus.
• Vignette : exporter au plus près de la taille de carte affichée.
• Icône Retina : fournir des pixels sources 2x ou 3x de la taille CSS.
• Page lente : redimensionner et compresser les pixels, pas la balise DPI.

La doc MDN sur naturalWidth est utile ici parce qu’elle décrit la largeur d’image en pixels CSS, pas « ce que dit la balise DPI ». Le guide MDN sur les images responsives explique aussi comment srcset et sizes aident le navigateur à choisir une source adaptée à la mise en page et à l’appareil.

Une petite subtilité technique : CSS propose une propriété expérimentale image-resolution, et W3C CSS Images évoque les métadonnées de résolution d’image. MDN indique aujourd’hui que image-resolution est expérimentale et que la prise en charge des navigateurs n’est pas prête pour la production. En publication web classique, ne comptez donc pas sur la balise DPI d’un JPG ou d’un PNG pour piloter la taille visible dans la page.

Pourquoi le « 72 DPI web » est devenu du folklore

La règle « 72 DPI pour le web » est surtout une habitude héritée.

Les workflows PAO d’antan avaient un lien plus étroit entre pixels d’écran, points et pouces. Les vieilles conventions d’écran Macintosh sont souvent associées à 72 pixels par pouce. Windows et l’histoire de CSS ont amené le 96 DPI dans le paysage. W3C CSS Values définit une relation fixe où 1in vaut 96px, et la doc MDN sur la résolution explique qu’en CSS 1dppx correspond à 96dpi.

Ça ne veut pas dire qu’il faut exporter les images web en 96 DPI non plus.

Ça veut dire que CSS dispose d’un système de référence pour ses unités de mise en page. Votre image web réelle a toujours besoin d’assez de pixels pour la taille où elle apparaît. Une photo de 5000 px de large est trop lourde pour une vignette 300 px, qu’elle soit étiquetée 72 DPI ou 300 DPI. Un logo de 400 px de large risque de paraître mou dans un emplacement de 600 px, quel que soit le champ DPI.

Pour les images web, la meilleure question est :

Combien de pixels cette image va-t-elle occuper dans la mise en page, et combien de pixels sources dois-je fournir pour les écrans qui m’intéressent ?

Le piège du rééchantillonnage dans Photoshop

Photoshop et ses semblables affichent largeur, hauteur et résolution dans une même boîte de dialogue. C’est pratique pour l’impression, mais c’est un piège pour le web.

La doc Taille de l’image d’Adobe sépare :

• Dimensions : le nombre de pixels.
• Largeur et hauteur : la taille physique ou de mise en page selon l’unité.
• Résolution : pixels par pouce pour la qualité d’impression.
• Rééchantillonnage : ajouter ou retirer des pixels.

L’interrupteur clé s’appelle Rééchantillonnage.

Rééchantillonnage désactivé, passer de 72 PPI à 300 PPI garde les mêmes pixels et modifie la taille d’impression suggérée. Un fichier 3000 × 2000 reste 3000 × 2000. C’est du travail au niveau des métadonnées.

Rééchantillonnage activé, changer la résolution peut ajouter ou retirer des pixels selon les champs de largeur et de hauteur. Les données d’image changent : le fichier peut devenir plus gros ou plus petit, plus net ou plus mou, et des artefacts d’interpolation apparaissent si vous agrandissez trop.

Pour un usage web, oubliez la consigne floue « mets ça en 72 DPI ». Nommez la vraie cible :

• « Redimensionne à 1600 px de large. »
• « Exporte une vignette de 320 px. »
• « Compresse ce JPG sous 200 Ko. »
• « Fais une image 2x pour un emplacement CSS de 600 px, donc 1200 px de large. »

Changer le DPI change-t-il la taille du fichier ?

En général, non.

Si vous modifiez uniquement la métadonnée DPI/PPI, la taille du fichier peut rester la même ou varier de quelques octets parce que les métadonnées ont changé. Les données d’image sont toujours la même grille de pixels.

La taille du fichier change quand vous faites l’une de ces choses :

• Redimensionner les dimensions en pixels.
• Recadrer une partie de l’image.
• Baisser la qualité JPG/WebP/AVIF.
• Convertir vers un autre format.
• Retirer l’EXIF ou d’autres métadonnées.
• Aplatir la transparence.
• Réduire le nombre d’images ou la durée d’une animation.

Si un site impose des envois sous 500 Ko, passer de 300 DPI à 72 DPI n’est pas la bonne solution. Redimensionnez, compressez, ou les deux.

Quand le 300 DPI compte vraiment

Le 300 DPI est une abréviation pratique pour l’impression regardée de près. Ça veut dire que le fichier d’impression apporte 300 pixels pour chaque pouce de sortie finale.

Cas typiques en 300 DPI :

• photos de passeport et de visa,
• tirages labo 4 × 6 et 5 × 7 pouces,
• petits flyers et brochures,
• images de livres ou de magazines,
• étiquettes produit vues de près,
• scans où les petits caractères ou les traits fins comptent.

Le calcul :

Pour l’impression, la taille physique n’est pas optionnelle. « 300 DPI » tout seul est incomplet. Une image 300 DPI pour une photo d’identité 2 × 2 pouces, c’est 600 × 600 pixels. Une image 300 DPI pour une page A4, c’est environ 2480 × 3508 pixels. Ce sont des fichiers radicalement différents.

Quand le 300 DPI n’a pas d’importance

Se focaliser sur le 300 DPI est généralement à côté du sujet pour :

• les images de site web,
• les publications sur les réseaux sociaux,
• les pièces jointes d’e-mail,
• les vignettes produit,
• les captures d’écran de blog,
• les icônes d’app et les visuels d’interface,
• les formulaires en ligne qui valident dimensions en pixels et taille de fichier.

Certains portails d’envoi mentionnent le DPI dans leurs consignes parce que le résultat final est imprimé. Même dans ce cas, le portail contrôle en pratique les dimensions en pixels, le rapport, la taille du fichier, le mode colorimétrique ou la position du visage, plutôt que la balise de métadonnées. Si la consigne dit « 2 × 2 pouces à 300 DPI », convertissez-la en pixels : 600 × 600.

Pour les écrans, exigez des pixels. Pour l’impression, exigez des pixels plus une taille physique.

Retina et HiDPI, ce n’est pas du « 300 DPI »

Les écrans haute densité ont besoin de plus de pixels sources que les anciens, mais ce n’est pas la même chose que de passer les métadonnées du fichier à 300 DPI.

Exemple :

• Le design affiche une photo produit à 600 pixels CSS de large.
• Un écran 1x se contente d’une source de 600 px de large.
• Un écran 2x profite d’une source de 1200 px de large.
• Un écran 3x profite d’une source de 1800 px de large si le détail est important.

L’image peut toujours être étiquetée 72, 96 ou 300 DPI, la logique de mise en page ne change pas. Ce qui compte, c’est le rapport entre pixels sources et pixels CSS affichés.

C’est pour ça que les images responsives utilisent des descripteurs comme 1200w ou 2x, et pas « 300dpi ». Le navigateur cherche simplement une image avec assez de données pour la taille rendue, la densité d’écran et les conditions réseau.

Comment traduire les demandes courantes

Les demandes de changement de DPI cachent souvent autre chose. Traduisez la demande avant de toucher au fichier.

Cette question supplémentaire évite la plupart des erreurs de DPI.

Comment PhotoTools traite les tâches liées au DPI

PhotoTools est bâti autour de ce qui change vraiment la sortie : les pixels.

Pour le travail web :

1. Utilisez Redimensionner pour fixer les vraies dimensions en pixels.
2. Compressez s’il y a un objectif de taille de fichier.
3. Laissez l’original intact.
4. Exportez une copie web au nom parlant, du type hero-1600.jpg ou card-600.webp.

Pour l’impression de photos d’identité :

1. Ouvrez le créateur de photo d’identité.
2. Choisissez un preset comme 2 × 2 pouces, 35 × 45 mm ou une taille personnalisée.
3. L’outil convertit la taille physique de la photo en pixels au DPI sélectionné.
4. Il construit une planche d’impression 4 × 6 ou 6 × 4 pouces dans le navigateur.
5. Imprimez à 100 %, en taille réelle, avec « ajuster à la page » désactivé.
6. Mesurez la photo imprimée avant de la remettre.

L’implémentation locale utilise la taille de photo choisie, la taille de planche et le DPI pour calculer les dimensions en pixels. Par exemple, une planche 4 × 6 pouces en 300 DPI devient un canevas 1200 × 1800 pixels. Une zone photo 2 × 2 pouces en 300 DPI devient 600 × 600 pixels.

C’est une vraie mise en page d’impression. C’est très différent d’ouvrir une petite image web, de passer le champ de métadonnées à 300 et d’espérer que l’impression sorte nette.

Checklist pratique

Utilisez cette checklist avant de modifier un fichier parce qu’on vous a parlé de DPI :

• Si la destination est un site web, demandez les dimensions en pixels et les limites de taille.
• Si la destination est une impression, demandez la taille physique et le DPI/PPI cible.
• Si le fichier est trop lourd, redimensionnez ou compressez plutôt que toucher aux métadonnées.
• Si l’image paraît floue, vérifiez pixels sources, compression et taille d’affichage.
• Si l’impression paraît molle, calculez si la source a assez de pixels.
• Si l’impression sort à la mauvaise taille physique, vérifiez la mise à l’échelle de l’imprimante et le format papier.
• S’il s’agit d’une photo de passeport ou de visa, mesurez le tirage final et vérifiez la consigne officielle.

Version courte : le DPI relie les pixels au papier. Les pixels et le CSS pilotent le web.

Sources techniques vérifiées

Ce guide a été confronté à :

• W3C CSS Values and Units Module Level 4, pour les unités absolues de CSS, les unités de résolution et la relation 1dppx = 96dpi.
• W3C CSS Images Module Level 4, pour la définition CSS de la résolution d’image et la propriété image-resolution.
• MDN : image-resolution, pour les notes d’implémentation actuelles et le statut expérimental de image-resolution en CSS.
• MDN : HTMLImageElement naturalWidth, pour le dimensionnement des images par le navigateur en pixels CSS.
• MDN : référence de l’élément img, pour srcset, sizes, les descripteurs de largeur et la sélection de source par le navigateur.
• Adobe Photoshop — taille et résolution d’image, pour la distinction Photoshop entre dimensions, résolution et rééchantillonnage.
• Adobe Photoshop — redimensionnement et rééchantillonnage, pour la manière dont le rééchantillonnage modifie les pixels et pourquoi résolution et taille physique restent des notions d’impression.

Bilan : jouer avec la balise DPI n’est presque jamais la vraie solution. Décidez d’abord de la destination, puis modifiez les pixels, la compression ou la mise en page d’impression dont cette destination a réellement besoin.