Préparer ses images pour le web : checklist

La plupart des images qui font mauvais effet sur un site ne sont pas de mauvaises photos. Elles ont été exportées à la mauvaise taille, dans le mauvais format, accentuées au mauvais moment, ou livrées avec un profil colorimétrique que le navigateur ignore discrètement. Aucun de ces problèmes n’est difficile à corriger. Il suffit de les vérifier dans le bon ordre.

Ce guide propose cet ordre. Il commence par les deux décisions qui causent le plus de dégâts — la taille d’affichage et le format — puis passe à la couleur, à l’accentuation, à la compression et aux détails qui donnent à une page son aspect fini. Une checklist réutilisable vous attend à la fin.

1. Partez de la taille dont le navigateur a besoin, pas de celle du fichier source

Un appareil photo fournit bien plus de pixels qu’une page web n’en utilise. Une photo de 6000 px de large placée dans une colonne de 720 px gaspille de la bande passante, ralentit la page et n’apporte rien de visible. L’inverse est pire : une image de 400 px étirée sur toute la largeur d’une bannière paraît molle, quel que soit le soin apporté au traitement.

Raisonnez en partant de la mise en page :

• Mesurez la largeur maximale que l’image occupera, en pixels CSS. Pour une bannière pleine largeur sur une page de 1440 px, c’est en général la largeur du contenu, une fois les marges déduites.
• Multipliez par 2 pour les écrans à haute densité si l’image est importante. Une image affichée sur 720 px peut être exportée à 1440 px pour rester nette sur un téléphone ou un ordinateur portable à affichage haute densité.
• Plafonnez le résultat au moment où les pixels supplémentaires cessent d’être visibles. Pour la plupart des images éditoriales, cette limite est atteinte vite : au-delà de 2500 px sur le grand côté, un visuel est presque toujours plus lourd que nécessaire.

Si la même photo apparaît à trois endroits — une carte, une illustration de section et une bannière — exportez trois tailles. Le CSS peut réduire une grande image, mais le navigateur téléchargera malgré tout la version la plus lourde dans chaque emplacement.

2. Le DPI est une métadonnée, pas un réglage web

L’idée des « 72 DPI » survit parce qu’elle est facile à répéter. Elle ne décrit pas la façon dont les navigateurs affichent les images. Un navigateur lit les dimensions en pixels inscrites dans le fichier et dispose l’image en pixels CSS ; la valeur DPI des métadonnées n’entre pas dans ce calcul.

Deux conséquences pratiques :

• Passer de 300 à 72 DPI ne rend pas un fichier plus léger ni plus rapide. C’est le ré-encodage à une taille en pixels plus petite qui produit cet effet.
• Le nombre à surveiller dans une boîte d’export est la largeur et la hauteur en pixels, pas le champ DPI. Si les deux sont proposés, ajustez les pixels.

3. Choisissez le format en fonction du contenu

Il n’existe pas de meilleur format universel, seulement une bonne adéquation entre le contenu et le codec. Le partage utile ressemble à ceci :

Contenu	Format de départ conseillé	Pourquoi
Photographies, scènes texturées, dégradés doux	JPEG, WebP ou AVIF	Ces formats gèrent bien les transitions tonales douces et compressent efficacement les photographies
Aplats, icônes, logos, illustrations à bords nets	SVG si vectoriel, sinon PNG ou WebP	La compression avec pertes crée des franges et un flou visibles le long des bords nets
Captures d’écran et interfaces	PNG ou WebP	Le texte et les traits fins survivent à un encodage sans perte ou de haute qualité
Tout ce qui doit rester transparent	PNG, WebP ou AVIF	Le JPEG n’a pas de canal alpha : les zones transparentes deviennent un aplat
Images à faire fonctionner partout, y compris dans les vieux logiciels	JPEG ou PNG	Les deux formats sont compris partout

Deux erreurs de format méritent d’être signalées. La première consiste à exporter une capture d’écran en JPEG de basse qualité : chaque lettre et chaque bordure de tableau acquiert un halo, et l’image devient illisible. La seconde consiste à placer une photographie dans un SVG. Le SVG est un format vectoriel : une photo matricielle placée à l’intérieur ne devient pas plus nette. Elle est simplement emballée dans un fichier plus gros.

Les formats modernes comme WebP et AVIF produisent souvent un fichier plus léger à qualité comparable, mais ils ne sont pas automatiquement meilleurs si votre chaîne de travail ne permet pas de prévisualiser le résultat. Exportez, ouvrez le fichier, comparez-le à la taille à laquelle il sera affiché.

4. Corrigez et standardisez la couleur avant l’export

L’hypothèse raisonnable pour une diffusion web est le sRGB. Les écrans, les navigateurs et la plupart des plateformes de publication considèrent le sRGB comme la référence. Si une image porte un profil plus large — Display P3, par exemple —, elle peut être affichée comme si elle était en sRGB, ce qui transforme des couleurs riches en couleurs trop saturées et des dégradés subtils en marches visibles.

Un déroulé raisonnable :

1. Travaillez dans le profil le plus large nécessaire, si votre poste est géré en couleur.
2. Convertissez le document en sRGB avant l’export final, plutôt que de lui attribuer un profil sRGB sans conversion. Attribuer change l’étiquette ; convertir change les valeurs pour qu’elles correspondent à la nouvelle cible.
3. Regardez une dernière fois le fichier exporté, sur le web, dans un onglet de navigateur normal. Ce contrôle final révèle les bandes dans les ciels, les zones claires écrasées et les erreurs de profil qu’un éditeur géré en couleur masque.

Si vous publiez des visuels à couleurs de marque exactes, échantillonnez le résultat publié. Certaines couleurs bougent légèrement lors d’une conversion depuis un gamut étendu, et il vaut mieux le savoir avant que cent images soient en ligne.

5. Accentuez après le redimensionnement, jamais avant

Réduire une image retire du détail et la laisse légèrement molle. Le remède classique est une petite accentuation de sortie appliquée après le redimensionnement, aux dimensions finales. Accentuer avant n’est pas équivalent : le redimensionnement moyenne ensuite une partie de l’accentuation, et des artefacts invisibles en pleine taille peuvent se retrouver figés dans le petit fichier.

Gardez une accentuation de sortie mesurée. Les textes, les traits fins et les bords très contrastés sont les premiers endroits où le sur-accentuage se voit, sous la forme d’une frange claire ou sombre. Comparez le résultat exporté à 100 % avant de le mettre en ligne. Une image légèrement douce paraît naturelle ; une image sur-accentuée paraît abîmée.

La même logique vaut pour la réduction du bruit. Une réduction agressive efface le grain et la texture fine en même temps : appliquez-la à une taille proche de la taille finale et vérifiez le résultat à cette échelle.

6. Compressez pour la cible, puis vérifiez

La compression est le lieu du compromis entre qualité et poids. Il n’y a pas de réglage universellement correct, mais quelques habitudes gardent ce compromis honnête :

• Partez d’une qualité qui paraît propre à 100 %, pas du chiffre le plus bas autorisé par un curseur.
• Jugez à la taille d’affichage. Une image qui tient dans une carte de 300 px n’a pas besoin de supporter l’examen au pixel près à 300 %.
• Comparez le poids des fichiers entre deux essais d’export : la même qualité visuelle est souvent disponible pour beaucoup moins d’octets.
• Préférez une image un peu plus petite à une image mal compressée. Réduire les dimensions de 10 % coûte généralement moins de qualité que pousser la compression jusqu’à atteindre le même poids.

Comme point de départ approximatif, beaucoup de vignettes éditoriales restent confortablement sous 100 Ko, les images de section sous 250 Ko et les bannières pleine largeur sous 400 Ko après un redimensionnement correct. Ce sont des repères à vérifier, pas des règles à atteindre à tout prix.

7. Gérez la transparence volontairement

Si une image doit avoir un fond transparent, choisissez un format qui le permet réellement — PNG, WebP ou AVIF — et vérifiez le résultat sur la couleur de fond sur laquelle elle sera posée. Les bords semi-transparents peuvent montrer un halo si l’image a été exportée avec une couleur de fond qui ne correspond pas à la page.

Si vous n’avez pas besoin de transparence, la supprimer allège le fichier. Aplatir un logo sur la couleur exacte du fond de page permet souvent d’utiliser un fichier plus petit et évite qu’un rectangle discret n’apparaisse autour du visuel sur un autre fond.

8. Laissez le texte en dehors des images

Un texte intégré à une image matricielle a trois inconvénients : il devient flou dès qu’on change l’échelle, il ne peut être ni sélectionné ni traduit, et les moteurs de recherche ne savent pas le lire. Les titres, légendes, libellés d’interface et annotations appartiennent au HTML et au CSS. Si un élément textuel doit faire partie d’une image pour des raisons graphiques, exportez-le à la taille d’affichage et évitez de le redimensionner ensuite.

L’exception est la capture d’écran d’une vraie interface, où le texte est la preuve du produit et non du contenu de page. Même dans ce cas, capturez autant que possible à la taille d’affichage finale.

9. Terminez par les détails qui font fonctionner une page

Les petits détails ne sont pas décoratifs ; ils changent le comportement de la page :

• Les attributs largeur et hauteur. Déclarer les dimensions intrinsèques permet au navigateur de réserver la place avant le chargement : la mise en page ne saute plus.
• Le chargement différé. Différez les images situées sous le premier écran pour que le haut de page s’affiche en premier. Ne differez pas l’image principale, qui détermine généralement le plus grand élément affiché.
• Le texte alternatif. Décrivez ce que l’image montre et pourquoi elle est là. Une phrase courte et précise vaut mieux qu’une liste de mots-clés ; une image décorative doit avoir un alt vide.
• Le nom du fichier. hero-photo-2026.jpg vieillit mal ; equipe-atelier-retouche-fichiers-raw.jpg décrit encore la scène des années plus tard.
• Une vérification visuelle sur une vraie page. Exportez, publiez sur une page de relecture et regardez l’image en contexte, sur une fenêtre de la taille d’un téléphone. Un fichier peut réussir tous les contrôles techniques et rester à la mauvaise taille pour la mise en page.

10. Un flux de travail qui tient dans un navigateur

Rien de tout cela n’exige une application de bureau. S’il ne reste que le recadrage, le redressement, l’exposition, la conversion de couleur et un export correctement dimensionné, un éditeur dans le navigateur suffit — et il évite le problème classique du logiciel de retouche qu’on ouvre pour « améliorer » tout le reste au passage. L’éditeur photo de FreeAIGeneration fonctionne dans le navigateur, sans compte obligatoire, et l’éditeur de photos RAW prend en charge les fichiers qui demandent un dématriçage avant ces étapes finales.

Pour les logos et les tracés simples, un export en SVG depuis l’éditeur vectoriel produit un fichier net à toutes les tailles et très léger. Conservez le document source à côté de l’asset exporté pour que la personne suivante puisse modifier l’image au lieu de la recréer.

Si un outil promet de corriger une image grâce à une fonction d’IA — agrandissement, réduction du bruit, remplacement d’objet —, lisez attentivement la promesse avant de vous appuyer dessus. Notre explication sur ce que signifie vraiment « propulsé par l’IA » décrit la façon dont ces fonctions sont présentées et ce qu’il faut vérifier.

La checklist

Avant la mise en ligne d’une image :

1. Taille d’affichage mesurée, taille d’export décidée, variante haute densité choisie là où elle compte.
2. Dimensions en pixels ajustées ; DPI ignoré comme réglage web.
3. Format adapté au contenu ; aucun texte figé dans une image matricielle, sauf une capture d’écran.
4. Couleur convertie en sRGB et contrôlée dans un navigateur.
5. Accentuation de sortie et réduction du bruit appliquées après le redimensionnement.
6. Compression jugée à la taille d’affichage, poids comparé entre les essais.
7. Transparence traitée ou supprimée volontairement.
8. Largeur, hauteur, texte alternatif, nom de fichier et stratégie de chargement renseignés dans la page.
9. Un dernier regard sur la page publiée, sur une fenêtre de la taille d’un téléphone.

Ces neuf contrôles passés, le problème de qualité a généralement disparu avant même qu’on ouvre un éditeur de code.