Aller au contenu principal
Bethemesh
RéférenceConcepts et technologies

Comment une image numérique est-elle construite ?

Comprenez comment pixels, canaux de couleur, profondeur et transparence s’assemblent pour former une image affichée à l’écran.

Publié le 31 août 2026Lecture : 23 minPar Équipe Bethemesh
Débutant
Schéma agrandi d’une image montrant sa grille de pixels et ses canaux rouge, vert, bleu et alpha
Afficher le sommaire
  1. Une image numérique n’est pas une photographie : c’est une représentation
  2. Qu’est-ce qu’un pixel exactement ?
  3. Un pixel couleur contient plusieurs composantes
  4. Les canaux peuvent être observés séparément
  5. La profondeur de couleur détermine la précision disponible
  6. Le canal alpha ajoute l’opacité
  7. Pourquoi un pixel totalement transparent peut-il encore avoir une couleur ?
  8. Dimensions, résolution, définition et densité : quatre notions souvent mélangées
  9. Pourquoi une image devient-elle floue lorsqu’on l’agrandit ?
  10. Réduire une image supprime aussi de l’information
  11. Une image raster et un SVG ne stockent pas la même chose
  12. Le format de fichier est un contenant, pas le contenu visuel lui-même
  13. Compression sans perte et compression avec perte
  14. Pourquoi deux images identiques à l’œil peuvent-elles avoir des poids très différents ?
  15. Les métadonnées sont des informations autour des pixels
  16. L’espace colorimétrique donne un sens aux nombres
  17. Une palette de couleurs est une simplification de l’image
  18. Couleur visible et contraste sont deux problèmes différents
  19. Le navigateur ne travaille pas directement avec les octets du fichier
  20. Comment inspecter une image avant de l’optimiser ?
  21. 1. Quelles sont ses dimensions ?
  22. 2. Quel est son format ?
  23. 3. Quel est son poids ?
  24. 4. A-t-elle besoin de transparence ?
  25. 5. Contient-elle des métadonnées utiles ou sensibles ?
  26. 6. Quelle qualité visuelle est réellement nécessaire ?
  27. Un exemple concret : préparer une photographie pour une page Web
  28. Un autre exemple : préparer un logo
  29. Les erreurs les plus fréquentes à éviter
  30. Confondre poids et dimensions
  31. Croire que 300 DPI améliore une image Web
  32. Renommer l’extension pour convertir
  33. Agrandir pour « ajouter de la qualité »
  34. Remplacer la transparence par du blanc
  35. Choisir un format uniquement parce qu’il est récent
  36. Compresser avant de dimensionner
  37. Ce qu’il faut retenir avant de passer à la suite
  38. Questions fréquentes
  39. Un pixel est-il toujours carré ?
  40. Une image de 24 bits utilise-t-elle forcément trois octets par pixel dans le fichier ?
  41. Pourquoi un pixel transparent conserve-t-il parfois une couleur ?
  42. Ajouter un canal alpha rend-il toute l’image transparente ?
  43. Pourquoi une image nette dans mon éditeur devient-elle floue sur mon site ?
  44. Une image avec plus de pixels est-elle toujours meilleure ?
  45. PNG est-il forcément de meilleure qualité que JPEG ?
  46. Comment savoir quelles couleurs dominent dans une image ?
  47. Faut-il conserver toutes les métadonnées avant de publier une image ?
  48. Quel est le meilleur ordre pour optimiser une image Web ?

Une photographie affichée sur un écran semble continue : un ciel forme un dégradé, un visage présente des nuances très fines et les contours paraissent lisses. Pourtant, une image numérique matricielle ne contient ni « ciel », ni « visage », ni « contour ». Elle contient avant tout une grille de valeurs numériques que le navigateur, l’écran ou le logiciel transforme en couleurs visibles.

Comprendre cette anatomie est utile bien au-delà de la théorie. Elle explique pourquoi une image devient floue lorsqu’on l’agrandit, pourquoi un PNG peut conserver de la transparence, pourquoi deux images de mêmes dimensions peuvent avoir des poids très différents, ou encore pourquoi changer simplement l’extension .jpg en .png ne constitue pas une conversion.

Cette structure est aussi le point de départ de toute la chaîne d’optimisation d’images pour le Web : avant de choisir une résolution adaptée, un format comme PNG, JPEG, WebP ou AVIF, ou une méthode de compression, il faut savoir ce que l’on manipule réellement.

Une image numérique n’est pas une photographie : c’est une représentation

Lorsqu’un appareil photo capture une scène, il ne stocke pas directement « un arbre devant une maison ». Son capteur mesure de la lumière. Ces mesures sont ensuite transformées, interprétées et enregistrées sous une forme numérique.

Pour une image matricielle — également appelée image raster ou bitmap — le résultat final peut être imaginé comme un tableau composé de lignes et de colonnes. Chaque intersection correspond à une position de l’image et possède des informations permettant de déterminer son apparence.

Une image de 1 200 × 800 pixels contient ainsi :

1 200 × 800 = 960 000 pixels.

Une image de 4 000 × 3 000 pixels en contient 12 millions. C’est d’ailleurs l’origine de l’expression « 12 mégapixels » utilisée pour décrire certains appareils photo : un mégapixel correspond approximativement à un million de pixels.

Mais attention : davantage de pixels ne signifie pas automatiquement meilleure image. Le nombre de pixels indique surtout la quantité d’échantillons disponibles. La netteté finale dépend aussi de la qualité de la capture, de l’optique, de la mise au point, du bruit, de la compression, du redimensionnement et de la taille à laquelle l’image sera affichée.

Pour connaître rapidement les dimensions et d’autres propriétés d’un fichier, le lecteur de métadonnées d’image permet d’inspecter une image directement dans le navigateur.

Qu’est-ce qu’un pixel exactement ?

Le terme pixel vient de picture element, c’est-à-dire « élément d’image ». On le représente souvent comme un petit carré, notamment lorsqu’on zoome fortement dans un éditeur graphique.

Cette représentation est pratique, mais elle peut être trompeuse.

Dans le fichier, un pixel n’est pas réellement un minuscule carré physique. C’est plutôt un échantillon situé à une position donnée de la grille, auquel sont associées une ou plusieurs valeurs.

Lorsque vous zoomez à 800 % sur une photographie et voyez apparaître de gros carrés colorés, le logiciel ne révèle pas des carrés cachés dans le fichier : il agrandit simplement la zone visuelle attribuée à chaque échantillon pour rendre la structure perceptible.

Cette nuance permet de comprendre un point essentiel : un pixel n’a pas de taille physique universelle.

Le même fichier de 1 200 pixels de large peut être affiché :

  • sur 300 pixels CSS dans une page Web ;
  • sur 600 pixels CSS sur un autre écran ;
  • sur plusieurs centimètres dans un document imprimé ;
  • ou à sa taille native dans un logiciel d’image.

La relation entre dimensions du fichier et taille d’affichage est détaillée dans l’article Quelle résolution choisir pour une image ?.

Un pixel couleur contient plusieurs composantes

Dans une image couleur classique destinée au Web, une seule valeur ne suffit généralement pas à décrire un pixel. La couleur est décomposée en plusieurs canaux.

Le modèle le plus courant sur écran est RGB — ou RVB en français :

  • R pour rouge ;
  • G pour vert ;
  • B pour bleu.

Chaque canal décrit l’intensité de l’une de ces composantes. Le navigateur combine ensuite les trois valeurs pour produire la couleur visible.

Avec 8 bits par canal, chaque composante dispose de 256 valeurs possibles, généralement représentées de 0 à 255.

Quelques exemples simples :

  • R=0, G=0, B=0 produit du noir ;
  • R=255, G=255, B=255 produit du blanc ;
  • R=255, G=0, B=0 produit un rouge maximal dans cet espace ;
  • R=255, G=255, B=0 combine rouge et vert et produit du jaune.

Trois canaux de 8 bits représentent donc 24 bits de couleur par pixel. Mathématiquement, cela autorise :

256 × 256 × 256 = 16 777 216 combinaisons.

C’est l’origine de l’expression « 16,7 millions de couleurs ».

Pour aller plus loin sur la manière de représenter ces mêmes couleurs dans le développement Web, l’article RGB, HEX ou HSL : quelle notation choisir ? explique la différence entre modèle colorimétrique et notation CSS. Le convertisseur de couleurs permet ensuite de passer rapidement d’une représentation à l’autre.

Les canaux peuvent être observés séparément

Une photographie RGB peut être considérée comme la superposition de trois images en niveaux d’intensité : une pour le rouge, une pour le vert et une pour le bleu.

Une zone très claire dans le canal rouge signifie que la composante rouge y est importante. Une zone sombre signifie qu’elle contribue peu.

Cette séparation est fondamentale en traitement d’image. Beaucoup d’opérations travaillent indépendamment sur les canaux avant de recomposer le résultat : correction colorimétrique, balance des blancs, extraction de couleurs, filtres, détection de contraste ou conversion vers un autre espace.

L’extracteur de couleurs d’image travaille sur cette représentation décodée : le navigateur transforme d’abord le fichier en pixels exploitables, puis l’outil analyse leurs couleurs pour identifier les teintes dominantes.

Cette distinction est importante : l’outil n’a pas besoin que l’image soit en JPEG ou en PNG pour « comprendre » une couleur. Une fois le fichier décodé, les pixels peuvent être analysés selon une représentation commune.

La profondeur de couleur détermine la précision disponible

Dire qu’un canal est codé sur 8 bits signifie que 8 chiffres binaires sont disponibles pour représenter sa valeur.

Avec 8 bits :

2⁸ = 256 niveaux.

Avec 16 bits :

2¹⁶ = 65 536 niveaux.

Une profondeur plus importante permet donc de représenter davantage de valeurs intermédiaires. Cela peut être précieux lors de retouches importantes, notamment dans les dégradés, les ombres ou les corrections d’exposition.

Imaginez un dégradé allant d’un bleu sombre à un bleu clair. Si le nombre de niveaux disponibles est insuffisant, les transitions peuvent devenir visibles sous forme de bandes. Ce phénomène est souvent appelé banding.

Une profondeur supérieure réduit ce risque pendant le traitement, mais elle augmente également la quantité de données manipulées. C’est pourquoi un fichier de travail destiné à la retouche peut conserver davantage d’informations que sa version finale optimisée pour le Web.

Il ne faut cependant pas confondre :

  • profondeur de couleur, qui détermine combien de valeurs peuvent être représentées ;
  • espace colorimétrique, qui détermine à quelles couleurs réelles ces valeurs correspondent ;
  • format de fichier, qui détermine comment les données sont organisées et compressées.

Ces trois notions interagissent, mais elles ne décrivent pas la même propriété.

Le canal alpha ajoute l’opacité

Une image RGB décrit la couleur. Une image RGBA ajoute un quatrième canal : alpha.

Le canal alpha ne décrit pas une quatrième couleur. Il indique le degré d’opacité du pixel.

Dans une représentation sur 8 bits :

  • alpha 0 correspond à une transparence totale ;
  • alpha 255 correspond à une opacité totale ;
  • les valeurs intermédiaires produisent une transparence partielle.

Cette distinction explique pourquoi transparent ne signifie pas blanc.

Prenons un logo rouge placé sur un fond transparent. Dans les zones transparentes, le navigateur doit laisser apparaître ce qui se trouve derrière l’image. Si l’on remplace ces zones par du blanc, le logo semblera correct sur une page blanche mais affichera immédiatement un rectangle blanc sur un fond sombre.

La transparence permet au contraire de composer l’image avec n’importe quel arrière-plan.

C’est l’une des différences importantes entre les formats d’image. Le JPEG classique ne gère pas de canal alpha, alors que PNG, WebP et AVIF peuvent gérer la transparence. L’article PNG, JPEG, WebP ou AVIF : quel format choisir ? détaille ces différences.

Pourquoi un pixel totalement transparent peut-il encore avoir une couleur ?

Cela semble paradoxal, mais une image peut stocker une couleur RGB même lorsque son alpha rend le pixel totalement invisible.

Par exemple, un pixel peut contenir :

  • rouge : 255 ;
  • vert : 0 ;
  • bleu : 0 ;
  • alpha : 0.

Visuellement, il est transparent. Pourtant, sa couleur sous-jacente est rouge.

Ces valeurs peuvent devenir importantes lorsque le logiciel redimensionne l’image ou interpole ses contours. Une mauvaise gestion des couleurs cachées dans les pixels transparents peut créer des halos clairs ou sombres autour d’un objet détouré.

C’est notamment pour cette raison que la gestion de l’alpha est plus subtile qu’un simple bouton « transparence ».

On distingue également l’alpha prémultiplié et l’alpha non prémultiplié. Dans le premier cas, les composantes de couleur sont déjà multipliées par l’opacité ; dans le second, couleur et alpha restent indépendants. Les logiciels et moteurs de rendu peuvent passer d’une représentation à l’autre pendant leurs calculs.

Pour un utilisateur Web, il n’est pas nécessaire de maîtriser toutes les équations, mais connaître cette existence aide à comprendre pourquoi certaines conversions ou certains redimensionnements peuvent produire des bordures inattendues.

Dimensions, résolution, définition et densité : quatre notions souvent mélangées

Dans les discussions sur les images, le mot « résolution » est souvent utilisé pour désigner plusieurs choses différentes.

Pour le Web, la propriété la plus concrète d’un fichier raster reste généralement sa dimension en pixels : 800 × 600, 1 920 × 1 080, 4 000 × 3 000, etc.

La densité d’un écran, elle, décrit la concentration de pixels physiques sur une surface. Les écrans à haute densité peuvent utiliser plusieurs pixels physiques pour restituer un pixel CSS.

Enfin, les valeurs comme DPI ou PPI sont particulièrement importantes lorsqu’on relie dimensions numériques et dimensions physiques, notamment pour l’impression.

Ainsi, une image de 2 000 × 1 000 pixels reste une image de 2 000 × 1 000 pixels même si une métadonnée indique 72, 96 ou 300 DPI. Sur une page Web, son comportement dépend principalement des dimensions intrinsèques, du CSS et de la densité de l’écran.

Avant de redimensionner un fichier, consultez Quelle résolution choisir pour une image ?. Pour effectuer le redimensionnement lui-même, le redimensionneur d’image permet d’ajuster largeur et hauteur directement dans le navigateur.

Pourquoi une image devient-elle floue lorsqu’on l’agrandit ?

Supposons qu’une image mesure 400 × 300 pixels et qu’on l’affiche à 1 600 × 1 200 pixels.

La surface affichée contient alors beaucoup plus de positions que l’image source ne fournit d’échantillons. Le navigateur ou le logiciel doit inventer des valeurs intermédiaires.

Il utilise pour cela une méthode d’interpolation.

Selon l’algorithme, le résultat peut privilégier la netteté, la douceur ou la fidélité des contours. Mais aucune interpolation classique ne peut récupérer avec certitude une information qui n’existait pas dans l’image source.

Si un œil n’occupe que quatre pixels dans une petite photographie, agrandir l’image ne révèle pas soudainement les cils qui n’ont jamais été enregistrés.

Des techniques modernes d’agrandissement utilisant l’apprentissage automatique peuvent générer des détails plausibles, mais il faut garder la nuance : elles reconstruisent ou estiment des informations ; elles ne retrouvent pas nécessairement le détail original.

Voilà pourquoi la bonne stratégie Web consiste généralement à fournir une image suffisamment définie pour sa taille d’affichage, sans envoyer inutilement une image gigantesque. C’est précisément le compromis étudié dans Quelle résolution choisir pour une image ?.

Réduire une image supprime aussi de l’information

Le problème inverse existe lorsqu’on réduit une image.

Passer de 4 000 × 3 000 à 800 × 600 pixels signifie condenser plusieurs pixels sources en un nombre beaucoup plus faible de pixels de sortie.

Le logiciel doit déterminer comment résumer ces informations. Les détails plus fins que la nouvelle grille peuvent disparaître. Les motifs répétitifs peuvent également produire des artefacts si le filtrage est insuffisant.

Un bon redimensionnement cherche donc à préserver les structures importantes tout en éliminant proprement les détails impossibles à représenter.

Cette étape peut avoir un impact spectaculaire sur le poids du fichier. Une photographie destinée à être affichée sur 800 pixels de large n’a généralement aucun intérêt à rester en 6 000 pixels de large uniquement parce que l’appareil photo l’a produite ainsi.

Le redimensionneur d’image permet d’effectuer cette opération avant la compression.

Une image raster et un SVG ne stockent pas la même chose

Jusqu’ici, nous avons surtout parlé des images matricielles. Mais toutes les images numériques ne sont pas constituées d’une grille enregistrée de pixels.

Un fichier SVG est vectoriel. Au lieu de stocker chaque pixel final, il décrit des objets et des instructions : formes, courbes, couleurs, contours, transformations ou textes.

Un cercle peut par exemple être décrit par son centre, son rayon et sa couleur. Lorsque le navigateur doit afficher le SVG, il calcule ensuite les pixels nécessaires pour la taille d’affichage demandée.

C’est pourquoi un logo vectoriel peut rester parfaitement net à 32, 320 ou 3 200 pixels de large : la forme est recalculée.

Cela ne signifie pas que le SVG remplace les formats raster. Une photographie contient des variations extrêmement nombreuses qu’il serait généralement inefficace de décrire sous forme de milliers ou millions de formes vectorielles.

La règle pratique est plutôt :

  • photographie et texture complexe → raster ;
  • logo, pictogramme, schéma ou illustration géométrique → souvent vectoriel.

Pour comprendre cette seconde famille, consultez SVG : comprendre le format vectoriel. Et lorsqu’un SVG contient du code inutile, l’optimiseur SVG peut réduire son poids sans modifier son apparence attendue.

Le format de fichier est un contenant, pas le contenu visuel lui-même

Une confusion fréquente consiste à considérer « JPEG », « PNG » ou « WebP » comme des types d’images visuellement différents.

En réalité, ces formats définissent surtout comment les informations nécessaires à la reconstruction de l’image sont enregistrées.

Une même photographie peut être encodée en JPEG, WebP ou AVIF. Après décodage, le navigateur obtient dans chaque cas une grille de pixels à afficher.

Les différences concernent notamment :

  • les méthodes de compression ;
  • la possibilité de perdre ou non certaines informations ;
  • la transparence ;
  • l’animation ;
  • les profondeurs et espaces colorimétriques pris en charge ;
  • les métadonnées ;
  • la compatibilité avec les logiciels et navigateurs.

Le format n’est donc pas équivalent aux dimensions. Convertir un JPEG de 4 000 × 3 000 pixels en WebP ne le transforme pas automatiquement en 1 200 × 900 pixels.

Inversement, redimensionner l’image ne change pas forcément son format.

Pour comparer les usages, consultez PNG, JPEG, WebP ou AVIF : quel format choisir ?. Pour tester concrètement différents encodages, le convertisseur et compresseur d’image permet de travailler localement sur vos fichiers.

Compression sans perte et compression avec perte

Une image brute contenant des millions de pixels pourrait occuper énormément d’espace si toutes les valeurs étaient enregistrées naïvement.

Les formats utilisent donc des techniques de compression.

La compression sans perte cherche à réduire la quantité de données sans modifier l’information nécessaire à la reconstruction exacte. Après décompression, on retrouve les mêmes valeurs.

La compression avec perte accepte au contraire de supprimer ou d’approximer certaines informations afin d’obtenir un fichier beaucoup plus léger. Le but est que les différences restent suffisamment discrètes pour l’usage visé.

Le JPEG est l’exemple classique d’un format couramment utilisé avec perte pour les photographies. PNG est connu pour sa compression sans perte. WebP et AVIF proposent plusieurs possibilités selon les modes utilisés.

Mais « sans perte » ne signifie pas automatiquement « meilleur pour le Web ». Un fichier parfaitement fidèle mais cinq fois plus lourd peut dégrader le chargement d’une page sans apporter de différence visible utile.

La bonne question n’est donc pas « quelle compression conserve absolument tout ? », mais plutôt « quelle quantité d’information faut-il conserver pour cet usage ? ».

L’article Comment compresser une image sans perdre en qualité ? approfondit précisément ce compromis.

Pourquoi deux images identiques à l’œil peuvent-elles avoir des poids très différents ?

Le nombre de pixels n’est qu’un facteur parmi d’autres.

Deux images de 1 600 × 900 pixels peuvent présenter des tailles de fichier très différentes selon :

  • leur format ;
  • leur niveau de compression ;
  • la complexité visuelle de la scène ;
  • leur profondeur ;
  • la présence d’un canal alpha ;
  • les métadonnées ;
  • leur profil colorimétrique ;
  • la qualité choisie à l’encodage.

Une grande zone de couleur uniforme peut souvent être compressée efficacement. Une photographie remplie de feuillage, de bruit et de textures fines est plus difficile à résumer.

C’est pourquoi il est impossible de déduire précisément le poids final d’une image uniquement à partir de sa largeur et de sa hauteur.

De même, un fichier lourd n’est pas nécessairement « de meilleure qualité ». Il peut simplement être mal dimensionné, mal compressé ou contenir des données inutiles.

Les métadonnées sont des informations autour des pixels

Un fichier image peut contenir autre chose que les données nécessaires à son rendu.

Les métadonnées peuvent inclure, selon le format et l’appareil :

  • date de prise de vue ;
  • modèle d’appareil ;
  • paramètres d’exposition ;
  • orientation ;
  • logiciel utilisé ;
  • profil colorimétrique ;
  • informations descriptives ;
  • parfois des coordonnées géographiques.

Ces données ne constituent pas les pixels eux-mêmes, mais elles peuvent influencer l’interprétation ou fournir du contexte.

L’orientation EXIF est un bon exemple. Une photographie peut être enregistrée avec une certaine organisation de pixels et contenir une instruction indiquant au logiciel comment l’orienter à l’affichage. Si un programme ignore cette information, l’image peut apparaître tournée.

Le lecteur de métadonnées d’image permet d’examiner ce type d’informations. C’est aussi une bonne habitude avant de publier certaines photographies, car des métadonnées peuvent révéler plus d’informations qu’on ne le souhaite. La question mérite d’ailleurs un traitement dédié dans Métadonnées d’image et vie privée : que révèle réellement un fichier ?.

L’espace colorimétrique donne un sens aux nombres

Un triplet comme RGB(200, 40, 60) est constitué de nombres, mais ces nombres doivent être interprétés dans un cadre donné.

Un espace colorimétrique définit notamment la manière dont les valeurs numériques correspondent à des couleurs.

Pour le Web, sRGB constitue historiquement la référence la plus courante. Les écrans modernes et certains navigateurs savent également gérer des espaces plus larges, capables de représenter des couleurs plus saturées.

Cela explique pourquoi une image peut sembler légèrement différente entre deux logiciels si les profils sont absents, mal interprétés ou convertis différemment.

Il faut donc distinguer :

  • le modèle RGB : la couleur est décrite avec des composantes rouge, verte et bleue ;
  • l’espace sRGB ou un autre espace : il précise ce que ces valeurs signifient ;
  • la notation HEX ou rgb() en CSS : elle fournit une manière d’écrire des valeurs.

L’article RGB, HEX ou HSL : quelle notation choisir ? revient sur ces notions du point de vue du Web.

Une palette de couleurs est une simplification de l’image

Une photographie peut contenir des centaines de milliers de couleurs légèrement différentes. Pourtant, lorsqu’on veut créer une charte graphique à partir d’une image, on ne souhaite généralement pas récupérer chaque valeur.

On cherche plutôt quelques couleurs représentatives.

L’extraction d’une palette consiste donc à regrouper ou sélectionner les couleurs afin de résumer l’apparence générale de l’image.

Ce processus illustre bien l’intérêt de comprendre les pixels : une palette n’est pas nécessairement une liste des couleurs les plus fréquentes au sens naïf. Une bonne méthode doit aussi éviter que dix nuances presque identiques occupent toute la palette.

L’article Comment créer une palette de couleurs à partir d’une image ? détaille cette logique. Vous pouvez également tester directement l’extracteur de couleurs ou le générateur de palette.

Couleur visible et contraste sont deux problèmes différents

Une image peut contenir une palette harmonieuse tout en produisant une interface illisible.

Lorsqu’une couleur extraite sert ensuite à afficher du texte ou des composants Web, il faut vérifier son contraste avec l’arrière-plan.

Le contraste ne dépend pas seulement de l’écart apparent entre deux codes HEX. Les recommandations d’accessibilité utilisent des calculs fondés sur la luminance relative.

Ainsi, comprendre les valeurs des pixels mène naturellement à une autre question : les couleurs choisies restent-elles lisibles pour les utilisateurs ?

L’article Contraste WCAG : comment rendre les couleurs accessibles ? explique ces critères. Le vérificateur de contraste permet de tester directement deux couleurs.

Le navigateur ne travaille pas directement avec les octets du fichier

Lorsqu’une page charge une image, plusieurs étapes se succèdent.

De manière simplifiée :

  1. le navigateur récupère les octets du fichier ;
  2. il identifie ou interprète son format ;
  3. un décodeur reconstruit les informations de l’image ;
  4. les couleurs et profils sont interprétés ;
  5. l’image est redimensionnée si nécessaire ;
  6. elle est composée avec les autres éléments de la page ;
  7. le résultat est finalement affiché par le système graphique.

Cette chaîne explique pourquoi un outil Web peut accepter plusieurs formats et appliquer ensuite le même traitement à leurs pixels.

Par exemple, un extracteur de couleurs peut accepter JPEG, PNG ou WebP : une fois le décodage effectué, l’algorithme peut travailler sur une représentation de pixels commune.

C’est également ce qui rend possible le traitement local dans le navigateur : un fichier peut être sélectionné par l’utilisateur, décodé et analysé côté client sans qu’il soit nécessaire de l’envoyer à un serveur.

Comment inspecter une image avant de l’optimiser ?

Avant toute modification, il est utile de séparer les questions.

1. Quelles sont ses dimensions ?

Elles déterminent combien de pixels composent l’image. Comparez-les à la taille d’affichage réellement nécessaire.

2. Quel est son format ?

Le format doit être adapté au contenu : photographie, transparence, illustration, besoin de compatibilité, etc.

3. Quel est son poids ?

Un poids important peut indiquer une image trop grande, une compression insuffisante ou simplement un contenu complexe.

4. A-t-elle besoin de transparence ?

Si oui, un format qui ne conserve pas l’alpha ne convient pas.

5. Contient-elle des métadonnées utiles ou sensibles ?

Certaines peuvent être conservées ; d’autres peuvent être inutiles pour une publication Web.

6. Quelle qualité visuelle est réellement nécessaire ?

Une image destinée à une vignette de 300 pixels n’a pas les mêmes besoins qu’une illustration affichée en plein écran.

Cette méthode évite de chercher une solution universelle du type « convertir toutes les images en WebP » ou « mettre toutes les images à 80 % de qualité ».

Un exemple concret : préparer une photographie pour une page Web

Imaginons une photographie issue d’un smartphone :

  • 4 032 × 3 024 pixels ;
  • JPEG ;
  • plusieurs mégaoctets ;
  • destinée à être affichée à environ 1 200 pixels de large.

La première erreur serait de commencer uniquement par réduire le curseur de qualité JPEG.

La démarche la plus logique est plutôt :

  1. vérifier les dimensions et les métadonnées avec le lecteur de métadonnées ;
  2. déterminer la largeur réellement nécessaire grâce aux principes de résolution d’image ;
  3. redimensionner la photographie avec le redimensionneur d’image ;
  4. choisir le format approprié en comparant JPEG, WebP et AVIF ;
  5. ajuster la compression avec le convertisseur et compresseur d’image ;
  6. vérifier visuellement que la qualité reste suffisante.

Le gain principal peut venir du redimensionnement avant même la compression.

C’est exactement pour cela que dimensions, format et compression doivent être considérés comme trois décisions différentes.

Pour un logo, la logique change.

Si le fichier original existe en vectoriel, le format SVG est souvent particulièrement adapté : il peut rester net à différentes tailles et son poids peut être très faible pour des formes simples.

S’il contient du code ou des métadonnées inutiles, l’article Optimiser un fichier SVG sans altérer son rendu et l’optimiseur SVG permettent d’alléger le fichier.

Si le logo n’existe qu’en raster et nécessite un fond transparent, un format gérant l’alpha sera nécessaire.

Même objectif visuel, mais anatomie et stratégie complètement différentes.

Les erreurs les plus fréquentes à éviter

Confondre poids et dimensions

Une image de 5 Mo n’est pas nécessairement grande à l’écran, et une image de 500 Ko peut posséder des dimensions excessives.

Croire que 300 DPI améliore une image Web

Modifier uniquement une métadonnée de densité ne crée aucun pixel supplémentaire.

Renommer l’extension pour convertir

Passer de photo.jpg à photo.png en renommant le fichier ne change pas son encodage.

Agrandir pour « ajouter de la qualité »

Un redimensionnement peut produire davantage de pixels, mais pas retrouver automatiquement l’information originale absente.

Remplacer la transparence par du blanc

Cela détruit la capacité de l’image à s’intégrer sur différents arrière-plans.

Choisir un format uniquement parce qu’il est récent

AVIF ou WebP peuvent être excellents, mais le meilleur choix dépend du contenu, du workflow et de l’objectif. Comparer les formats d’image reste plus utile qu’une règle absolue.

Compresser avant de dimensionner

Si une image est quatre fois trop large pour son usage, la redimensionner d’abord peut apporter un gain plus important et plus propre.

Ce qu’il faut retenir avant de passer à la suite

Une image numérique matricielle est d’abord une grille d’échantillons. Chaque pixel contient des valeurs qui décrivent sa couleur et éventuellement son opacité. La profondeur détermine la précision disponible, l’espace colorimétrique donne un sens aux valeurs, le format organise et compresse les données, et les métadonnées ajoutent des informations autour de l’image.

Ces propriétés sont liées, mais elles ne sont pas interchangeables.

À l’échelle d’un site complet, cette compréhension sert ensuite à bâtir une vraie stratégie : dimensions adaptées, variantes responsives, formats, compression et métadonnées. Cette démarche sera synthétisée dans Optimiser les images d’un site Web : méthode complète.

C’est cette séparation qui permet de raisonner correctement :

  • les dimensions répondent à « combien de pixels ? » ;
  • les canaux répondent à « quelles composantes sont stockées ? » ;
  • la profondeur répond à « avec quelle précision ? » ;
  • l’alpha répond à « avec quelle opacité ? » ;
  • le format répond à « comment ces informations sont-elles enregistrées ? » ;
  • la compression répond à « comment réduire la quantité de données ? » ;
  • les métadonnées répondent à « quelles informations supplémentaires accompagnent l’image ? ».

La prochaine étape logique consiste donc à déterminer combien de pixels sont réellement nécessaires. C’est le sujet de Quelle résolution choisir pour une image ?, deuxième article de cette collection.

Questions fréquentes

Un pixel est-il toujours carré ?

Dans les images Web modernes, on raisonne généralement avec des pixels carrés. Mais un pixel reste avant tout un échantillon numérique. Certains systèmes vidéo ou formats historiques ont utilisé des rapports de pixel non carrés.

Une image de 24 bits utilise-t-elle forcément trois octets par pixel dans le fichier ?

Non. « 24 bits » décrit souvent trois canaux de 8 bits dans la représentation non compressée. Le fichier peut ensuite utiliser une compression, une palette ou une organisation qui change fortement son poids réel.

Pourquoi un pixel transparent conserve-t-il parfois une couleur ?

Parce que couleur RGB et opacité alpha peuvent être stockées séparément. Un pixel dont l’alpha vaut zéro peut conserver des valeurs RGB invisibles. Elles peuvent toutefois influencer certains traitements de bord ou interpolations.

Ajouter un canal alpha rend-il toute l’image transparente ?

Non. Chaque pixel possède sa propre valeur alpha. Une même image peut donc contenir des zones totalement opaques, totalement transparentes et partiellement transparentes.

Pourquoi une image nette dans mon éditeur devient-elle floue sur mon site ?

Elle est souvent affichée au-delà de ses dimensions utiles, ou le navigateur doit la redimensionner fortement. Vérifiez ses dimensions avec le lecteur de métadonnées, puis consultez le guide sur la résolution des images.

Une image avec plus de pixels est-elle toujours meilleure ?

Non. Elle offre davantage d’échantillons, mais la qualité dépend aussi de la source, de la mise au point, de la compression et de l’usage final. Des pixels inutiles augmentent surtout le poids et le temps de traitement.

PNG est-il forcément de meilleure qualité que JPEG ?

Non. Ils répondent à des besoins différents. PNG est particulièrement utile pour la transparence et certains contenus graphiques ; JPEG reste efficace pour de nombreuses photographies. WebP et AVIF offrent d’autres compromis. Consultez la comparaison des formats d’image.

Comment savoir quelles couleurs dominent dans une image ?

Le navigateur peut décoder les pixels puis analyser leur distribution. Vous pouvez le faire directement avec l’extracteur de couleurs d’image, puis approfondir la méthode dans l’article sur la création d’une palette à partir d’une image.

Faut-il conserver toutes les métadonnées avant de publier une image ?

Pas nécessairement. Certaines sont utiles, d’autres peuvent alourdir le fichier ou révéler des informations dont vous n’avez pas besoin. Inspectez-les avant publication avec le lecteur de métadonnées d’image.

Quel est le meilleur ordre pour optimiser une image Web ?

Commencez généralement par définir la taille d’affichage nécessaire, redimensionnez si besoin, choisissez un format adapté, puis ajustez la compression. Cette approche évite d’essayer de compenser une image surdimensionnée uniquement avec une compression agressive.

Outils associés

Images & graphisme

Extracteur de couleurs d’image

Extrayez une palette dominante depuis une image, sans l’envoyer sur un serveur.

100 % local
Utiliser l’outil

Sources et références

  1. 1.W3C — Portable Network Graphics (PNG) Specification, Third Edition
  2. 2.MDN Web Docs — Pixel manipulation with canvas
  3. 3.MDN Web Docs — ImageData

Collection

Images pour le Web

  1. 01Comment une image numérique est-elle construite ?
  2. 02Quelle résolution choisir pour une image ?
  3. 03RGB, HEX ou HSL : quelle notation choisir ?
  4. 04Comment créer une palette de couleurs à partir d’une image ?
  5. 05Contraste WCAG : comment rendre les couleurs accessibles ?
  6. 06PNG, JPEG, WebP ou AVIF : quel format choisir ?
  7. 07Comment compresser une image sans perdre en qualité ?
  8. 08SVG : comprendre le format vectoriel
  9. 09Optimiser un fichier SVG sans altérer son rendu
  10. 10Images responsives : comprendre srcset et sizes
  11. 11Optimiser ses images pour le Web sans perdre en qualité
  12. 12WebP, AVIF, JPEG XL : quels formats d’image choisir en 2026 ?
  13. 13Métadonnées d’image : les lire, les conserver ou les supprimer
  14. 14Optimiser les images pour les performances Web
GuideConcepts et technologiesDébutant

Quelle résolution choisir pour une image ?

Distinguez dimensions, densité de pixels et DPI afin de redimensionner une image pour le Web ou l’impression sans perdre de netteté.

31 août 202625 minLire
RéférenceConcepts et technologiesDébutant

RGB, HEX ou HSL : quelle notation choisir ?

Comprenez comment RGB, HEX et HSL décrivent les couleurs sRGB afin de choisir une notation CSS lisible et de convertir les valeurs sans confusion.

31 août 202623 minLire
GuideFormatsDébutant

PNG, JPEG, WebP ou AVIF : quel format choisir ?

Choisissez le bon format d’image pour une photo, une capture, un visuel transparent ou une interface, sans sacrifier inutilement la qualité ni les performances.

31 août 202627 minLire

Cet article vous a-t-il été utile ?