# Compresser une image sans abîmer ses dégradés [Canonical HTML page](https://gradiently.design/fr/guide/image-compression) Les photos supportent une forte compression. Les dégradés, non. Voici pourquoi un fondu doux se transforme en rayures, et les réglages exacts qui le gardent lisse avec un fichier léger. ## The short version - 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é. 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. Un fondu avec très peu de paliers: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)` Des couleurs sombres proches sur une grande surface : le risque classique de bandes. Sur un bon écran, vous voyez peut-être déjà ici de légers paliers verticaux. 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](https://gradiently.design/fr/guide/gradient-banding), 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. | Format | Réglage pour visuels en dégradé | Réglage pour photos | Remarques | | --- | --- | --- | --- | | PNG | Sans perte, couleurs complètes | Rarement le meilleur choix | Évitez de réduire à 256 couleurs sur un dégradé | | JPG | Qualité 90 à 95, sous-échantillonnage désactivé (4:4:4) | Qualité 80 à 85 | Ne modifiez et réenregistrez jamais un JPG à répétition | | WebP | Sans perte, ou avec perte à 85 à 90 | Avec perte à 75 à 80 | Le meilleur choix par défaut pour votre propre site | | AVIF | Avec perte à haute qualité, à tester avec soin | Qualité moyenne | Fichiers les plus légers, encodage plus lent | Les valeurs de qualité ne sont pas comparables d’un format à l’autre, ni même d’un outil à l’autre : prenez-les comme des points de départ pour vos tests. ### 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](https://gradiently.design/fr/guide/grainy-gradients) montrent quelle dose utiliser. Un hero de site large et sombre avec un dégradé lisse et un titre court, illustrant le risque de bandes Un fondu sombre et lisse en 1920×1080 est l’image la plus susceptible de former des bandes après compression. Un hero de site large avec un dégradé texturé et granuleux derrière le même titre 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](https://gradiently.design/fr/guide/css-noise-texture). 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](https://gradiently.design/fr/guide/png-vs-jpeg) et [WebP face au PNG et au JPG](https://gradiently.design/fr/guide/webp-images) 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. ```bash # 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.webp ``` Lancez ces commandes sur un original non compressé, jamais sur un fichier déjà passé par une compression avec perte. Si 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](https://gradiently.design/fr/guide/css-background-image) montrent comment superposer des dégradés et une minuscule texture de grain, et [optimiser les images pour le web](https://gradiently.design/fr/guide/lighthouse-image-performance) détaille ce que vérifie Lighthouse. ## FAQ ### 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.