L’essentiel en bref
- La compression d’image réduit la taille des fichiers soit sans perte, en stockant les mêmes pixels plus efficacement, soit avec perte, en supprimant des détails.
- Les dégradés doux souffrent le plus de la compression avec perte, car les couleurs voisines sont fusionnées en bandes et en blocs visibles.
- Les dégradés sombres et subtils forment des bandes en premier, car une image 8 bits n’a que très peu de valeurs distinctes entre deux couleurs sombres proches.
- Une légère couche de grain ou de tramage masque les bandes mieux que n’importe quel réglage de qualité, car elle casse les paliers.
- Pour des visuels avec dégradés, exportez en PNG ou WebP sans perte, ou en JPG à une qualité de 90 ou plus avec le sous-échantillonnage de la chrominance désactivé.
Sur cette page
La compression d’image réduit un fichier de deux façons. La compression sans perte stocke exactement les mêmes pixels plus efficacement, comme un document zippé. La compression avec perte supprime des détails qu’elle prévoit que vous ne remarquerez pas. Les photos cachent bien cette perte, car elles sont pleines de texture. Les dégradés doux ne cachent rien : compressez trop un fondu léger et il se brise en rayures, en taches et en blocs. La solution combine le bon format, le bon réglage de qualité et un peu de grain.
Pourquoi les dégradés cassent à la compression
Une image standard stocke 256 niveaux pour chacun des canaux rouge, vert et bleu. Cela semble beaucoup, jusqu’à ce que vous regardiez un fondu sombre et subtil. De #14101f à #2a2147 sur un hero de 1920 pixels de large, le canal rouge ne monte que de 22 niveaux. Chaque niveau doit s’étirer sur environ 87 pixels : vous êtes déjà à un pas de bandes visibles avant toute compression.
linear-gradient(90deg, #14101f 0%, #2a2147 100%)La compression avec perte simplifie ensuite l’image par petits blocs et fusionne les couleurs presque identiques. Dans une photo, les pixels voisins sont rarement identiques, donc peu de choses changent. Dans un dégradé, presque chaque voisin est presque identique, si bien que des séries entières de couleurs s’effondrent en une seule. C’est l’effet de bandes dans les dégradés, et les fondus sombres et pastel le montrent le plus.
Forme facilement des bandes
- Fondus sombres entre couleurs proches
- Pastels pâles sur une grande surface
- Surfaces numériques parfaitement lisses
- Formats larges comme un hero 1920×1080
Résiste bien
- Fondus vifs aux points de couleur éloignés
- Dégradés avec grain ou texture
- Photos et illustrations chargées
- Petites images aux séries de couleurs courtes
Les réglages de qualité qui comptent
Chaque format a un réglage principal et quelques réglages cachés. Ces points de départ sont prudents pour les visuels avec dégradés et texte ; les photos peuvent en général descendre plus bas. Jugez toujours à 100 % de zoom sur un bon écran, jamais sur une vignette.
Réglage pour photos
Remarques
Réglage pour photos
Remarques
Réglage pour photos
Remarques
Réglage pour photos
Remarques
Sous-échantillonnage de la chrominance
La plupart des encodeurs JPG stockent la couleur à la moitié de la résolution de la luminosité, ce qui s’écrit 4:2:0. L’œil le remarque à peine sur une photo, mais les lettres colorées et les dégradés saturés prennent des bords mous et baveux. Beaucoup d’outils le cachent dans une option avancée ; le désactiver (4:4:4) coûte un peu de poids et garde des bords de couleur nets.
Quantification des PNG
Les optimiseurs de PNG réduisent souvent les fichiers en les ramenant à une palette de 256 couleurs ou moins. C’est excellent pour des logos en aplat et désastreux pour des dégradés, qui ont besoin de milliers de nuances. Si un PNG compressé se met soudain à former des bandes, la quantification en est presque toujours la cause.
Le grain : le meilleur remède aux bandes
Ajouter une fine couche de bruit semble contre-intuitif, mais c’est le remède le plus fiable. Le grain disperse des pixels un peu plus clairs et plus sombres : l’œil fond les paliers en une rampe douce, et le compresseur a de la texture à préserver au lieu d’aplats à fusionner. Il donne aussi à un dégradé numérique l’allure d’une matière. Les dégradés granuleux montrent quelle dose utiliser.
Un fondu sombre et lisse en 1920×1080 est l’image la plus susceptible de former des bandes après compression.
Avec un grain fin dans la surface, le même type de fondu survit à la compression et se lit comme une matière.
Sur le web, vous pouvez ajouter le grain en CSS ou en SVG au lieu de l’intégrer à une grande image, ce qui garde le téléchargement minuscule. Voir la texture de bruit en CSS. Les Marks de Gradiently portent le grain dans leur matière : une création faite avec possède déjà la texture qui l’aide à survivre à la recompression d’une plateforme.
Une méthode pour compresser n’importe quelle image
- 1
Redimensionnez à la taille d’affichage
Le plus gros gain, ce sont les pixels dont vous n’aviez pas besoin. Une publication Instagram 1080×1350 doit être exportée en 1080×1350, pas sur 4000 pixels de large.
- 2
Choisissez le format selon le contenu
Texte, logos et dégradés : PNG ou WebP sans perte. Photos : JPG, WebP ou AVIF. PNG ou JPG et WebP face au PNG et au JPG vont plus loin.
- 3
Partez d’une qualité élevée, puis baissez
Commencez à 90, descendez par pas de cinq et comparez à 100 %. Arrêtez-vous au pas qui précède un changement visible dans le dégradé le plus sombre.
- 4
Compressez une seule fois, depuis l’original
Gardez un original non compressé. Chaque nouvel export en part, jamais d’un JPG précédent.
- 5
Vérifiez le fichier final là où il vit
Publiez un test ou chargez la page sur un téléphone. Les plateformes et les CDN peuvent recompresser à nouveau.
Des outils de compression fiables
L’application web Squoosh de Google permet de comparer formats et réglages côte à côte avec un curseur : c’est le moyen le plus rapide de comprendre ce que fait chaque réglage. Pour des dossiers d’images, les encodeurs en ligne de commande font le même travail en masse.
# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg
# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp
# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webpSi votre dégradé est un fond de site, l’image la plus légère est l’absence d’image : un dégradé CSS ne coûte aucun téléchargement et ne forme jamais de bandes dues à la compression, même s’il peut encore montrer des paliers 8 bits sur de larges fondus sombres. Les arrière-plans CSS montrent comment superposer des dégradés et une minuscule texture de grain, et optimiser les images pour le web détaille ce que vérifie Lighthouse.
Les questions qu’on nous pose
Comment compresser une image sans perte de qualité ?
Redimensionnez à la taille d’affichage, utilisez le PNG ou le WebP sans perte pour les visuels, et le JPG, WebP ou AVIF avec perte à haute qualité pour les photos. Comparez à 100 % de zoom avant de baisser le réglage.
Pourquoi la compression crée-t-elle des bandes dans les dégradés ?
La compression avec perte fusionne les couleurs presque identiques, et un dégradé doux est fait presque entièrement de voisins presque identiques : des séries de couleurs s’effondrent en rayures visibles.
Quel est le meilleur réglage de qualité JPEG ?
Environ 80 à 85 pour les photos et 90 à 95 pour les visuels avec texte ou dégradés. Les valeurs varient selon les outils : vérifiez le résultat à 100 % de zoom.
Ajouter du grain réduit-il vraiment les bandes ?
Oui. Un grain fin casse les paliers entre les couleurs pour que l’œil lise une rampe douce, et donne au compresseur de la texture à préserver au lieu d’aplats à fusionner.
Faut-il compresser les fichiers PNG ?
L’optimisation PNG sans perte est toujours sans risque. Évitez de réduire un PNG en dégradé à une palette de 256 couleurs, ce qui crée des bandes.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil