Quelle résolution choisir pour une image ?

Choisir la « bonne résolution » d’une image pour le Web semble simple jusqu’au moment où l’on rencontre des termes comme pixels, PPI, DPI, Retina, 2x, dimensions intrinsèques, pixels CSS ou densité d’écran. Ces notions sont souvent mélangées, ce qui conduit à deux erreurs opposées : publier des fichiers beaucoup trop grands, ou fournir des images trop petites qui deviennent floues.

Pour le Web, la question essentielle est pourtant très concrète :

De combien de pixels l’image a-t-elle réellement besoin pour être nette à la taille où elle sera affichée ?

La réponse dépend principalement de la largeur d’affichage, de la densité de l’écran et du rôle de l’image. Elle dépend beaucoup moins du fameux « 72 DPI » ou « 300 DPI » que l’on voit encore dans certains logiciels.

Avant d’aller plus loin, si les notions de pixel, canal, alpha ou image matricielle ne sont pas encore familières, commencez par Comment une image numérique est-elle construite ?. C’est la base qui permet de comprendre pourquoi le redimensionnement peut réduire fortement le poids d’un fichier sans nécessairement dégrader son rendu réel sur une page.

La première information à regarder : les dimensions en pixels

Pour une image raster, les dimensions sont généralement exprimées sous la forme :

largeur × hauteur

Par exemple :

• 800 × 600 px ;
• 1 200 × 800 px ;
• 1 920 × 1 080 px ;
• 4 032 × 3 024 px.

Une photographie de 4 032 × 3 024 pixels contient un peu plus de 12 millions de pixels. Une image de 1 200 × 800 en contient 960 000.

Ces dimensions constituent la première donnée utile pour décider si un fichier est adapté à un usage Web.

Vous pouvez les vérifier avec le lecteur de métadonnées d’image, sans avoir à envoyer le fichier sur un serveur.

Une image issue d’un smartphone peut par exemple mesurer plus de 4 000 pixels de large alors que la zone dans laquelle elle sera affichée sur le site n’en mesure que 800 ou 1 200. Dans ce cas, conserver systématiquement la définition originale peut représenter plusieurs fois plus de pixels que nécessaire.

Résolution, définition et densité : pourquoi les mots créent-ils autant de confusion ?

Dans le langage courant, « résolution » est souvent utilisé pour parler des dimensions en pixels. Techniquement, plusieurs notions différentes sont pourtant cachées derrière ce mot.

La définition

La définition décrit le nombre de pixels constituant l’image : 1 920 × 1 080 pixels, par exemple.

C’est généralement l’information la plus importante lorsqu’on prépare une image pour le Web.

La densité

La densité exprime un nombre de pixels par unité physique. On rencontre notamment :

• PPI : pixels per inch ;
• DPI : dots per inch, surtout associé à l’impression.

Un écran haute densité concentre davantage de pixels physiques dans une même surface.

La taille physique

Une image imprimée peut être décrite en centimètres ou en pouces. Sur le Web, en revanche, une image est intégrée dans une mise en page dont les dimensions sont principalement définies par CSS.

Ces trois informations sont liées dans certains contextes, mais elles ne sont pas interchangeables.

Pourquoi 72 DPI n’est pas une règle du Web

L’idée selon laquelle « une image Web doit être en 72 DPI » est l’un des mythes les plus persistants.

Pour comprendre pourquoi, prenons deux fichiers qui contiennent exactement la même grille de 1 200 × 800 pixels.

Le premier possède une métadonnée indiquant 72 DPI. Le second indique 300 DPI.

Si le navigateur les affiche tous les deux à width: 600px, ils disposent du même nombre de pixels sources et occupent la même largeur CSS. Modifier uniquement la valeur DPI n’a créé ni supprimé aucun pixel.

La valeur peut être utile lorsqu’un logiciel doit convertir une dimension numérique en dimension physique pour l’impression, mais elle ne remplace pas les dimensions réelles en pixels pour le Web.

Passer une photographie de 72 à 300 DPI dans un logiciel, sans rééchantillonnage, ne la rend donc pas quatre fois plus détaillée.

Le lecteur de métadonnées peut d’ailleurs vous aider à distinguer les propriétés réellement présentes dans le fichier.

Le pixel de l’image et le pixel CSS ne sont pas toujours équivalents

Supposons qu’une image soit affichée dans une page avec :

img {
  width: 600px;
}

Les 600px du CSS décrivent 600 pixels CSS. Ils ne signifient pas nécessairement que l’écran utilisera exactement 600 pixels physiques.

Sur un écran à densité standard, la correspondance peut être proche de 1 pour 1.

Sur un écran haute densité, le navigateur peut utiliser davantage de pixels physiques pour représenter la même largeur CSS. C’est le principe qui explique pourquoi une image fournie uniquement à 600 pixels de large peut sembler moins nette sur certains écrans lorsqu’elle occupe 600 pixels CSS.

C’est là qu’intervient le device pixel ratio, souvent abrégé DPR.

Comprendre le device pixel ratio

Le devicePixelRatio indique approximativement le rapport entre pixels physiques et pixels CSS dans le contexte d’affichage.

Un DPR de :

• 1 correspond grossièrement à un pixel physique par pixel CSS ;
• 2 peut utiliser environ deux pixels physiques dans chaque dimension pour un pixel CSS ;
• 3 peut en utiliser davantage encore.

Attention à un détail important : un DPR de 2 ne signifie pas deux fois plus de pixels au total pour une surface donnée. Il signifie environ deux fois plus sur la largeur et deux fois plus sur la hauteur.

Une zone de 600 × 400 pixels CSS peut donc théoriquement correspondre à :

• DPR 1 → 600 × 400 = 240 000 pixels ;
• DPR 2 → 1 200 × 800 = 960 000 pixels ;
• DPR 3 → 1 800 × 1 200 = 2 160 000 pixels.

C’est pourquoi les interfaces parlent parfois d’images 1x, 2x ou 3x.

Mais cela ne signifie pas qu’il faut systématiquement envoyer une image 3x à tous les visiteurs.

Une règle simple pour estimer les dimensions nécessaires

Pour une première estimation :

largeur source utile ≈ largeur CSS maximale × densité ciblée

Si une image sera affichée au maximum à 700 pixels CSS :

• cible 1x → environ 700 px de large ;
• cible 2x → environ 1 400 px ;
• cible 3x → environ 2 100 px.

Dans de nombreux projets Web, fournir une variante autour de 2x constitue déjà un excellent compromis pour les écrans haute densité.

Cela ne doit cependant pas devenir une règle absolue. Une photographie complexe, une miniature, un arrière-plan décoratif ou une illustration technique n’ont pas les mêmes exigences.

Pourquoi envoyer systématiquement du 3x peut être contre-productif

Une image deux fois plus large et deux fois plus haute contient quatre fois plus de pixels.

Passer de 1 000 × 600 à 2 000 × 1 200 signifie passer de :

600 000 pixels à 2 400 000 pixels.

À 3x, on arrive à 3 000 × 1 800, soit 5,4 millions de pixels.

Le poids compressé n’augmente pas forcément exactement dans les mêmes proportions, mais davantage de pixels signifie généralement davantage de données à télécharger, décoder et redimensionner.

Sur un téléphone utilisant une connexion mobile, envoyer systématiquement une image 3x alors qu’une variante plus petite aurait été suffisante peut donc ralentir la page sans bénéfice visuel perceptible.

La résolution doit être considérée avec la compression d’image et le choix du format, pas isolément.

Partir de la taille d’affichage, pas de la taille du fichier original

Une méthode fiable consiste à raisonner dans l’autre sens.

Ne demandez pas :

« Mon appareil photo produit 4 032 pixels de large, comment les conserver ? »

Demandez plutôt :

« Quelle est la largeur maximale à laquelle cette image sera réellement visible ? »

Supposons qu’une photographie soit destinée à une colonne dont la largeur maximale est de 800 pixels CSS.

Une source de 4 032 pixels est probablement excessive si aucune autre utilisation ne nécessite cette taille.

Une variante de l’ordre de 1 600 pixels peut déjà fournir une excellente netteté pour un affichage 800 CSS px sur un écran 2x.

Vous pouvez préparer cette variante avec le redimensionneur d’image.

Le ratio d’aspect doit être préservé

Lorsqu’on modifie les dimensions d’une image, il faut généralement préserver son ratio d’aspect.

Une image 1 600 × 900 possède un ratio 16:9.

Si vous souhaitez la réduire à 800 pixels de large tout en conservant ses proportions :

900 × 800 / 1 600 = 450

La nouvelle taille sera donc 800 × 450.

Passer arbitrairement à 800 × 600 déformerait l’image, car les proportions ne seraient plus les mêmes.

Lorsque vous connaissez une dimension mais pas l’autre, le calculateur de ratio d’image permet de retrouver rapidement les dimensions cohérentes.

Le redimensionneur d’image peut ensuite effectuer la transformation.

Redimensionnement et recadrage ne sont pas la même opération

Ces deux actions sont souvent confondues.

Redimensionner

Le redimensionnement modifie le nombre de pixels tout en conservant généralement l’intégralité du cadrage.

Une image 2 000 × 1 000 peut devenir 1 000 × 500.

Recadrer

Le recadrage supprime une partie de l’image afin d’obtenir un nouveau cadrage ou un nouveau ratio.

Une photographie 3:2 peut être recadrée en carré en supprimant une partie des côtés.

Dans une stratégie Web, on peut avoir besoin des deux. Une image de carte carrée et une bannière panoramique peuvent provenir de la même photographie, mais un simple redimensionnement ne suffit pas si leurs ratios diffèrent.

Pourquoi agrandir une petite image ne recrée pas les détails

Une image raster est constituée d’un nombre fini d’échantillons. Si une image de 400 pixels de large est agrandie à 1 600 pixels, le logiciel doit créer de nouvelles valeurs entre celles qui existaient.

C’est l’interpolation.

Les algorithmes modernes peuvent produire un résultat visuellement agréable, mais ils ne disposent pas magiquement des détails qui n’ont jamais été enregistrés.

Une petite photographie d’un visage ne révélera pas un détail précis absent de ses pixels simplement parce que l’on quadruple ses dimensions.

Les méthodes d’agrandissement utilisant l’intelligence artificielle peuvent générer des détails plausibles, mais il s’agit d’une reconstruction, pas nécessairement d’une récupération fidèle de l’information originale.

Pour comprendre ce phénomène à l’échelle du pixel, consultez Comment une image numérique est-elle construite ?.

Pourquoi réduire une grande image est généralement plus sûr

Réduire une image revient à condenser plusieurs pixels sources en moins de pixels de sortie.

Une bonne méthode de rééchantillonnage combine les informations disponibles afin de préserver les contours et les détails importants.

On perd nécessairement de l’information, puisque la nouvelle image contient moins de pixels. Mais si les détails supprimés étaient de toute façon invisibles à la taille d’affichage prévue, cette perte n’est pas problématique.

C’est précisément le principe de l’optimisation Web : ne pas transporter une information qui n’apporte rien à l’utilisateur dans le contexte réel d’affichage.

Résolution et poids du fichier : relation importante, mais pas directe

Une image contenant davantage de pixels offre davantage de données potentielles à encoder. Il existe donc une relation entre dimensions et poids.

Mais deux fichiers de mêmes dimensions peuvent avoir des poids très différents.

Une image de 1 600 × 900 peut peser :

• quelques dizaines de kilo-octets pour une illustration très simple ;
• plusieurs centaines de kilo-octets pour une photographie correctement optimisée ;
• plusieurs mégaoctets si elle est mal encodée ou contient beaucoup d’informations.

Le poids dépend aussi :

• du format ;
• de la qualité d’encodage ;
• de la complexité visuelle ;
• de la profondeur ;
• de la transparence ;
• des métadonnées.

Le redimensionnement agit donc sur un levier majeur, mais il doit être associé au bon format d’image et à une compression adaptée.

Le convertisseur et compresseur d’image permet de tester ces paramètres directement.

Quelle largeur choisir pour une image pleine largeur ?

Il n’existe pas une largeur universelle.

Il faut connaître la largeur maximale du conteneur.

Si le contenu principal de votre site ne dépasse jamais 1 200 pixels CSS, une image intégrée dans cette colonne n’a généralement pas besoin d’être dimensionnée comme si elle devait remplir un écran de 4K pixels CSS.

Pour une cible 2x, une variante autour de 2 400 pixels peut couvrir un affichage de 1 200 pixels CSS avec une forte densité.

Mais si l’image n’est qu’une photographie décorative dont les détails fins sont peu importants, une variante plus modeste peut suffire.

À l’inverse, un schéma contenant de petits textes peut exiger davantage de précision — ou être mieux servi par un SVG s’il est réellement vectoriel.

Quelle résolution pour une miniature ou une carte ?

Les miniatures sont un excellent exemple de gaspillage fréquent.

Supposons qu’une carte affiche une image à 320 × 180 pixels CSS.

Envoyer la photographie originale de 4 000 × 2 250 pixels signifie fournir énormément de données qui seront immédiatement réduites.

Une variante autour de 640 × 360 couvre déjà un affichage 2x.

Si la carte reste petite sur tous les appareils, cette variante peut être bien plus rationnelle.

Le gain se multiplie lorsqu’une page affiche dix, vingt ou cinquante cartes.

L’optimisation ne concerne donc pas seulement le poids d’un fichier isolé : elle concerne le budget total de la page.

Quelle résolution pour une image de héros ?

Une image de héros est plus délicate parce qu’elle peut occuper une grande partie de l’écran.

Il faut déterminer :

• sa largeur maximale réelle ;
• si elle est bord à bord ou limitée par un conteneur ;
• son ratio sur desktop et mobile ;
• si le cadrage change selon l’écran ;
• la densité ciblée ;
• son importance visuelle.

Une image héroïque peut justifier davantage de pixels qu’une miniature, mais cela ne signifie toujours pas qu’il faut servir la source originale à tout le monde.

Une stratégie d’images responsives permet au navigateur de sélectionner une ressource adaptée au contexte plutôt que de télécharger une seule image géante pour tous les appareils.

Ce sujet mérite une approche dédiée, car il implique srcset, sizes et parfois l’élément <picture>. Ces mécanismes seront détaillés dans Images responsives : comprendre srcset, sizes et picture.

Une seule image ou plusieurs variantes ?

Pour un site simple, fournir une image correctement dimensionnée peut suffire.

Pour un site plus exigeant, il est souvent préférable de générer plusieurs variantes, par exemple :

• 480 px ;
• 800 px ;
• 1 200 px ;
• 1 600 px ;
• 2 400 px.

Le navigateur peut alors choisir une ressource en fonction de la largeur d’affichage et de la densité.

Cette stratégie évite de choisir entre deux mauvaises solutions :

• une petite image légère mais floue sur grands écrans ;
• une énorme image nette mais inutilement lourde sur petits écrans.

Le principe est simple : donner au navigateur plusieurs options pertinentes plutôt qu’un fichier universel surdimensionné.

width et height en HTML ne servent pas seulement à redimensionner

Les attributs HTML width et height d’une image peuvent fournir au navigateur des informations sur ses proportions intrinsèques.

Par exemple :

<img
  src="/images/photo.webp"
  width="1200"
  height="800"
  alt="..."
>

Ces dimensions aident le navigateur à réserver l’espace correspondant avant même que l’image soit entièrement chargée.

Cela contribue à limiter les déplacements de mise en page pendant le chargement.

Il ne faut donc pas considérer width et height uniquement comme une manière ancienne de fixer une taille visuelle. Associés à un CSS responsive, ils peuvent participer à une mise en page plus stable.

Une image peut-elle être responsive tout en ayant width et height ?

Oui.

On peut fournir les dimensions intrinsèques dans le HTML et laisser le CSS adapter l’image :

img {
  max-width: 100%;
  height: auto;
}

L’image peut alors devenir plus petite que sa largeur intrinsèque tout en conservant son ratio.

Les dimensions HTML donnent au navigateur des informations utiles ; le CSS détermine la manière dont l’élément s’intègre dans la mise en page.

Ces deux mécanismes sont complémentaires.

Attention au width: 100%

width: 100% signifie que l’image occupe toute la largeur disponible de son conteneur.

Cela ne garantit pas que le fichier source soit adapté.

Une image de 600 pixels affichée à 100 % dans un conteneur de 1 200 pixels devra être agrandie.

Inversement, une image de 4 000 pixels affichée dans une colonne de 600 pixels sera réduite.

Le CSS définit donc la taille d’affichage, tandis que le fichier fournit une quantité d’information disponible. L’optimisation consiste à faire correspondre intelligemment les deux.

Les écrans 4K exigent-ils des images 4K ?

Pas automatiquement.

« Écran 4K » décrit la définition globale de l’écran, pas la taille de chaque image dans votre page.

Une image affichée dans une colonne de 600 pixels CSS n’a pas besoin de mesurer 3 840 pixels de large simplement parce que le moniteur est 4K.

Ce qui compte est :

taille CSS de l’image × densité pertinente.

C’est une distinction fondamentale. Sinon, l’arrivée de chaque nouvelle génération d’écrans obligerait à multiplier arbitrairement la taille de toutes les ressources Web.

Le cas particulier des captures d’écran

Les captures d’écran contiennent souvent :

• du texte ;
• des lignes fines ;
• des icônes ;
• des interfaces aux contours nets.

Elles tolèrent parfois moins bien une compression agressive qu’une photographie.

Leur résolution doit également être choisie avec soin. Une capture effectuée sur un écran 2x peut contenir deux fois plus de pixels que sa taille CSS apparente.

Avant de la publier telle quelle, demandez-vous à quelle largeur elle sera réellement affichée.

Pour les captures contenant du texte, une réduction trop forte peut rendre les caractères difficiles à lire. Dans ce cas, il peut être préférable de revoir le cadrage plutôt que de conserver une immense capture complète.

Le choix entre PNG, WebP ou un autre format est abordé dans PNG, JPEG, WebP ou AVIF : quel format choisir ?.

Le cas particulier des logos et icônes

Pour un logo géométrique, raisonner uniquement en résolution raster n’est pas toujours la meilleure solution.

Si une version vectorielle existe, un SVG peut être redimensionné sans dépendre d’une grille source fixe.

C’est particulièrement utile pour :

• logos ;
• pictogrammes ;
• illustrations géométriques ;
• graphiques simples ;
• schémas.

Le fichier peut ensuite être allégé grâce aux techniques présentées dans Optimiser un fichier SVG sans altérer son rendu ou directement avec l’optimiseur SVG.

Pour une photographie, en revanche, convertir artificiellement le contenu en SVG n’apporte généralement aucun avantage.

Le cas des images avec du texte intégré

Une image contenant du texte pose deux problèmes.

D’abord, le texte peut devenir flou si l’image est agrandie ou fortement réduite.

Ensuite, du texte intégré dans une image est moins flexible et généralement moins accessible qu’un vrai texte HTML.

Lorsque le texte fait partie de l’interface ou du contenu éditorial, il vaut souvent mieux le produire en HTML et CSS plutôt que l’intégrer dans une image.

Si l’image elle-même doit contenir du texte — par exemple une capture d’écran — préservez suffisamment de pixels pour que les caractères restent lisibles à la taille d’affichage.

Résolution et accessibilité

Une image nette n’est pas automatiquement accessible.

La résolution intervient néanmoins indirectement : un texte ou un détail informatif devenu illisible à cause d’un mauvais redimensionnement peut empêcher l’utilisateur de comprendre le contenu.

Il faut aussi considérer :

• le texte alternatif ;
• le contraste ;
• la lisibilité des informations intégrées ;
• la possibilité de zoomer.

Si vous utilisez les couleurs de l’image pour construire une interface, vérifiez ensuite leur lisibilité avec le vérificateur de contraste et le guide Contraste WCAG : comment rendre les couleurs accessibles ?.

Faut-il préparer les images avant ou après choisir le format ?

Dans la plupart des workflows, il est logique de déterminer d’abord les dimensions utiles, puis de choisir ou générer l’encodage final.

Pourquoi ?

Parce qu’une photographie de 4 000 pixels de large compressée en WebP reste une photographie de 4 000 pixels de large.

Si l’usage réel n’en nécessite que 1 600, il peut être plus efficace de réduire d’abord les dimensions puis de comparer les formats et qualités.

Une démarche pratique est donc :

1. déterminer le contexte d’affichage ;
2. choisir les dimensions nécessaires ;
3. redimensionner ;
4. choisir le format ;
5. compresser ;
6. vérifier visuellement le résultat.

Le redimensionneur d’image couvre l’étape 3, tandis que le convertisseur et compresseur d’image permet d’explorer les étapes suivantes.

Exemple : optimiser une photo de smartphone

Prenons une photographie :

• 4 032 × 3 024 px ;
• JPEG ;
• 4,8 Mo ;
• affichée au maximum à 900 px CSS.

Si l’on cible environ 2x, une largeur autour de 1 800 px est déjà cohérente.

En conservant le ratio :

3 024 × 1 800 / 4 032 = 1 350

Une variante 1 800 × 1 350 peut donc être préparée.

On peut ensuite comparer JPEG, WebP ou AVIF et ajuster la compression.

Le résultat final peut être beaucoup plus léger que l’original, sans différence perceptible à la taille d’affichage prévue.

La réduction du poids ne vient alors pas d’une astuce magique : on a simplement supprimé des pixels qui n’étaient pas nécessaires au contexte.

Exemple : image de carte e-commerce ou éditoriale

Imaginons une carte affichée à 360 × 240 pixels CSS.

Pour une cible 2x :

720 × 480 px

constitue une variante logique.

Servir systématiquement une source de 3 600 × 2 400 signifie fournir 25 fois plus de pixels :

• 720 × 480 = 345 600 pixels ;
• 3 600 × 2 400 = 8 640 000 pixels.

La compression réduit l’écart en octets, mais le surdimensionnement reste considérable.

Sur une page comportant douze cartes, ce choix peut devenir très coûteux.

Exemple : illustration technique

Une illustration technique peut contenir des lignes fines et de petits libellés.

Ici, réduire agressivement la résolution peut réellement nuire à la compréhension.

Trois solutions sont possibles :

• conserver une variante raster plus définie ;
• proposer une interaction permettant d’ouvrir l’image ;
• utiliser un SVG si l’illustration est vectorielle à l’origine.

La meilleure résolution dépend donc aussi de la nature de l’information, pas seulement de la taille de l’élément.

Comment vérifier qu’une image n’est pas trop petite ?

Le test le plus simple consiste à comparer :

1. sa largeur intrinsèque ;
2. sa largeur maximale d’affichage ;
3. la densité que vous souhaitez correctement couvrir.

Une image de 800 pixels affichée à 800 CSS px offre approximativement une ressource 1x.

La même image affichée à 400 CSS px fournit environ 2 pixels sources par pixel CSS sur la largeur.

Cela ne signifie pas que le navigateur utilisera toujours ces rapports de manière aussi simple, mais c’est une excellente estimation pratique.

Inspectez également le résultat sur de vrais écrans : les chiffres permettent de dimensionner, mais la validation visuelle reste indispensable.

Comment vérifier qu’une image n’est pas trop grande ?

Une image est probablement surdimensionnée lorsque ses dimensions intrinsèques dépassent très largement tout ce que la mise en page et les densités ciblées peuvent utiliser.

Exemple :

• largeur maximale affichée : 500 CSS px ;
• cible haute densité : 2x ;
• largeur utile approximative : 1 000 px ;
• fichier livré : 5 000 px.

Une largeur cinq fois supérieure au besoin estimé mérite clairement d’être examinée.

Utilisez le lecteur de métadonnées pour connaître les dimensions, puis le redimensionneur pour générer une version plus appropriée.

Quelle marge conserver ?

Il n’est pas nécessaire de calculer au pixel près.

Une petite marge peut être utile pour :

• des changements mineurs de mise en page ;
• des variations de densité ;
• une réutilisation dans un composant légèrement plus grand.

Mais une marge raisonnable n’est pas la même chose qu’un facteur quatre ou cinq « au cas où ».

L’objectif est de choisir une famille de tailles cohérentes, pas de conserver systématiquement le fichier original.

Les dimensions idéales changent-elles avec le format ?

Le besoin visuel en pixels ne change pas fondamentalement parce que le fichier est JPEG, WebP ou AVIF.

Une zone de 800 CSS px reste une zone de 800 CSS px.

En revanche, un format plus efficace peut rendre économiquement acceptable une variante plus définie, car il compresse mieux certains contenus.

Il faut donc traiter les décisions séparément :

• dimensions → combien de pixels faut-il ?
• format → comment les encoder ?
• compression → quel compromis entre poids et fidélité ?

Cette séparation évite beaucoup de mauvaises optimisations.

Et la transparence ?

La transparence n’impose pas directement une résolution particulière, mais elle influence le choix du format.

Si une image nécessite un canal alpha, JPEG classique ne convient pas. PNG, WebP ou AVIF peuvent être envisagés selon le contexte.

La transparence est expliquée dans Comment une image numérique est-elle construite ?, tandis que les différences de prise en charge sont comparées dans PNG, JPEG, WebP ou AVIF.

Les métadonnées DPI doivent-elles être supprimées ?

Pas nécessairement.

Une valeur DPI présente dans le fichier n’est pas dangereuse en soi. Elle peut être utile dans certains workflows d’impression ou logiciels.

Le point important est simplement de ne pas l’utiliser comme critère principal de dimensionnement Web.

Les métadonnées peuvent toutefois contenir d’autres informations inutiles ou sensibles. Avant publication, vous pouvez les inspecter avec le lecteur de métadonnées d’image.

Résolution et performance Web

Les images représentent souvent une part importante des données transférées par une page.

Réduire correctement leurs dimensions peut avoir plusieurs effets :

• moins d’octets à télécharger ;
• décodage potentiellement moins coûteux ;
• consommation mémoire réduite ;
• affichage plus rapide ;
• meilleure expérience sur connexion mobile.

Mais l’objectif n’est pas de rendre toutes les images minuscules.

Une image principale trop dégradée donne une impression de mauvaise qualité. L’optimisation consiste à supprimer l’excès invisible, pas l’information utile.

C’est pour cette raison qu’un bon workflow associe dimensions, formats modernes, compression et images responsives. Pour replacer tous ces choix dans une seule démarche, consultez également Optimiser les images d’un site Web : méthode complète.

La bonne résolution n’est pas un nombre universel

Il serait pratique de pouvoir dire :

« Toutes les images Web doivent faire 1 200 pixels de large. »

Mais ce serait faux.

Une icône, une vignette, une photographie d’article, un hero, une capture d’écran et un schéma n’ont ni la même taille d’affichage ni le même besoin de détail.

La bonne résolution est donc contextuelle.

Pour chaque image, posez trois questions :

1. quelle est sa taille maximale en CSS ?
2. quelle densité souhaite-t-on correctement couvrir ?
3. quel niveau de détail est nécessaire ?

La multiplication des deux premières fournit une estimation des dimensions sources. La troisième permet d’ajuster le compromis.

Une méthode pratique en sept étapes

Étape 1 — Inspecter le fichier

Relevez ses dimensions, son format, son poids et éventuellement ses métadonnées avec le lecteur de métadonnées.

Étape 2 — Identifier le contexte

Déterminez si l’image sera une miniature, une image d’article, un hero, un logo ou une illustration technique.

Étape 3 — Mesurer la largeur maximale d’affichage

Basez-vous sur le composant réel, pas sur la largeur totale de l’écran.

Étape 4 — Choisir une densité cible

1x peut suffire dans certains cas ; 2x constitue souvent un compromis solide pour une ressource importante. Évitez de viser 3x partout par réflexe.

Étape 5 — Préserver le ratio

Calculez la hauteur correspondante avec le calculateur de ratio.

Étape 6 — Redimensionner

Utilisez le redimensionneur d’image pour produire la variante nécessaire.

Étape 7 — Encoder et vérifier

Choisissez ensuite le format approprié, appliquez une compression raisonnable, puis comparez visuellement le résultat.

Cette séquence est plus fiable qu’un preset unique appliqué à tous les fichiers.

Tableau de décision rapide

Usage	Question principale	Point de départ raisonnable
Petite vignette	Quelle est la taille exacte de la carte ?	largeur CSS × ~2
Image d’article	Quelle largeur fait la colonne ?	largeur max CSS × ~2
Hero	Quelle largeur réelle selon les breakpoints ?	plusieurs variantes
Capture d’écran	Le texte reste-t-il lisible ?	privilégier la lisibilité
Logo	Existe-t-il une source vectorielle ?	préférer SVG si adapté
Icône	Peut-elle être vectorielle ?	SVG souvent préférable
Photo plein écran	Quelle largeur maximale réelle ?	variantes responsives

Ce tableau donne des points de départ, pas des normes rigides.

Ce qu’il faut retenir

Pour le Web, la « résolution » utile d’une image est d’abord une question de dimensions en pixels par rapport à sa taille d’affichage.

Les valeurs DPI ou PPI ne doivent pas être utilisées comme règle universelle de qualité Web.

Retenez surtout :

• regardez les dimensions en pixels ;
• partez de la taille maximale d’affichage ;
• tenez compte des écrans haute densité ;
• 2x est souvent un compromis pratique, pas une obligation ;
• préservez le ratio d’aspect ;
• ne servez pas la source originale par défaut ;
• redimensionnez avant de chercher à compenser uniquement par la compression ;
• utilisez plusieurs variantes lorsque le contexte le justifie ;
• préférez SVG pour les contenus réellement vectoriels ;
• validez toujours visuellement le résultat.

Une fois les dimensions maîtrisées, l’étape suivante consiste à comprendre comment les couleurs sont représentées dans le navigateur et dans le CSS. C’est le sujet de RGB, HEX ou HSL : quelle notation choisir ?.

Questions fréquentes

Quelle résolution faut-il pour une image Web ?

Il n’existe pas de valeur universelle. Déterminez sa largeur maximale en pixels CSS et multipliez-la par la densité que vous souhaitez couvrir. Une cible autour de 2x constitue souvent un bon point de départ pour les images importantes.

Une image Web doit-elle être en 72 DPI ?

Non. Pour l’affichage Web, les dimensions en pixels et la taille CSS sont beaucoup plus importantes. Modifier uniquement une métadonnée de 72 à 300 DPI ne crée pas de détails supplémentaires.

300 DPI donne-t-il une meilleure qualité sur un écran Retina ?

Pas en soi. Un écran haute densité bénéficie d’un nombre suffisant de pixels sources par rapport à la taille CSS. La valeur DPI inscrite dans le fichier n’est pas un substitut à ces pixels.

Quelle taille prévoir pour une image affichée à 600 pixels de large ?

Pour une cible 1x, environ 600 pixels de large. Pour une cible 2x, environ 1 200 pixels. Si le site utilise des images responsives, vous pouvez fournir plusieurs variantes.

Dois-je fournir une image 3x ?

Pas systématiquement. Le gain visuel peut être faible alors que le nombre de pixels augmente fortement. Réservez les variantes très définies aux cas où elles apportent un bénéfice réel.

Puis-je agrandir une image trop petite ?

Oui techniquement, mais l’interpolation ne recrée pas fidèlement les détails absents. Une source suffisamment grande reste préférable.

Comment réduire une image sans la déformer ?

Conservez son ratio d’aspect. Le calculateur de ratio d’image peut déterminer la seconde dimension, puis le redimensionneur permet d’appliquer la nouvelle taille.

Dois-je redimensionner avant de compresser ?

Dans la plupart des workflows Web, oui. Si l’image contient beaucoup plus de pixels que nécessaire, réduire d’abord ses dimensions évite de consacrer la compression à des données inutiles.

Une image WebP peut-elle rester trop grande ?

Oui. WebP est un format, pas une dimension. Une photographie WebP de 5 000 pixels de large peut rester largement surdimensionnée pour une vignette de 400 pixels.

Quelle résolution choisir pour un logo ?

Si le logo existe en vectoriel, la meilleure réponse est souvent de ne pas raisonner en résolution raster et d’utiliser un SVG. Il pourra être rendu à différentes tailles sans dépendre d’une grille fixe.

Pourquoi mon image paraît-elle floue uniquement sur certains écrans ?

Elle peut être suffisamment définie pour un écran 1x mais trop petite pour une densité plus élevée à la même taille CSS. Vérifiez le rapport entre largeur source, largeur CSS et densité.

Les dimensions HTML width et height empêchent-elles une image d’être responsive ?

Non. Elles peuvent fournir les proportions intrinsèques au navigateur, tandis que le CSS adapte l’affichage avec par exemple max-width: 100% et height: auto.

Une image de 4 000 pixels est-elle forcément trop grande ?

Non. Elle peut être justifiée pour certains usages très larges ou pour une source de travail. Mais si elle n’est affichée qu’à 500 pixels CSS, il faut sérieusement envisager une variante plus petite.

Comment choisir entre résolution, format et compression ?

Dans cet ordre logique : déterminez d’abord combien de pixels sont nécessaires, choisissez ensuite le format adapté, puis réglez la compression. Ce sont trois décisions différentes.