L’essentiel en bref
- Le banding est l’apparition de rayures ou de paliers visibles dans ce qui devrait être un fondu de couleur lisse.
- Le banding arrive parce que la plupart des images ne stockent que 256 niveaux par canal de couleur : un fondu subtil sur une grande zone doit donc sauter entre un petit nombre de nuances.
- Le banding est pire dans les dégradés sombres, les dégradés subtils, les grands dégradés et les images ou vidéos fortement compressées.
- Ajouter un grain fin ou un tramage est le remède le plus fiable, car la variation aléatoire masque les bords entre les paliers.
- Exporter en haute qualité, éviter les formats à 256 couleurs comme le GIF et élargir la plage de couleurs du fondu réduisent encore le banding.
Sur cette page
Le banding d’un dégradé, c’est quand un dégradé lisse montre des rayures ou des paliers visibles au lieu d’un fondu continu. Il arrive parce que les images numériques ne peuvent stocker qu’un nombre limité de nuances par couleur, en général 256 par canal, et quand un dégradé change lentement sur une large zone, chaque nuance doit couvrir une bande de pixels. Votre œil est très doué pour repérer les bords : il distingue donc ces bandes. Le remède consiste en général à ajouter un grain fin, exporter avec moins de compression, ou donner au fondu plus de couleur à exploiter.
Ce qui cause le banding d’un dégradé
La plupart des images utilisent 8 bits par canal : 256 valeurs possibles chacune pour le rouge, le vert et le bleu. Cela paraît beaucoup, et pour un dégradé marqué, ça l’est. Les ennuis commencent quand les couleurs aux deux extrémités sont proches.
Prenez un dégradé de gris de #202020 à #303030 sur un écran de 1920 pixels de large. Chaque canal ne passe que de 32 à 48, soit 16 paliers. Le dégradé contient donc 16 nuances distinctes, chacune d’environ 120 pixels de large. Aucun logiciel ne peut le rendre plus lisse, car il n’y a pas de nuances intermédiaires à utiliser.
Où le banding se voit le plus
| Situation | Pourquoi il y a des bandes |
|---|---|
| Dégradés sombres | On voit facilement les petites différences entre tons sombres, et les fondus sombres ne couvrent souvent que quelques valeurs |
| Fondus subtils, peu contrastés | Peu de paliers entre les couleurs d’extrémité : chaque bande est donc large |
| Grandes zones | Le même nombre de paliers répartis sur plus de pixels donne des bandes plus larges |
| JPEG et imports sur les réseaux sociaux | La compression simplifie les zones lisses en aplats |
| Vidéo | Les codecs de streaming et la vidéo 8 bits aplatissent les rampes douces, surtout dans les scènes sombres |
| GIF et PNG-8 | Seulement 256 couleurs dans toute l’image, pour tous les canaux ensemble |
C’est pourquoi les fonds en dégradé sombres et les dégradés aurore demandent le plus de soin. Leur beauté dépend de longues rampes douces à travers des tons sombres, ce qui est exactement la recette du banding.
Comment corriger le banding d’un dégradé
- 1
Ajoutez du grain ou un tramage
Une fine couche de bruit aléatoire disperse les pixels entre nuances voisines : l’œil ne trouve plus les bords. C’est le remède le plus fiable, et il rend aussi la surface plus riche. Voyez les dégradés granuleux.
- 2
Donnez plus de plage au fondu
De plus grands écarts de luminosité ou de teinte entre les couleurs d’extrémité donnent plus de paliers disponibles et des bandes plus étroites. Un dégradé qui change aussi un peu de teinte utilise plus de combinaisons de rouge, de vert et de bleu qu’une rampe de pure luminosité.
- 3
Travaillez en 16 bits quand vous le pouvez
Les éditeurs d’images qui prennent en charge 16 bits par canal gardent bien plus de niveaux pendant que vous travaillez. Ne convertissez en 8 bits qu’à l’export, avec le tramage activé.
- 4
Exportez en haute qualité
Utilisez le PNG pour les visuels à plat, ou le JPEG avec un réglage de haute qualité pour les images photographiques. Évitez le GIF et le PNG-8, qui ne gardent que 256 couleurs au total.
- 5
Exportez à la taille finale
Agrandir une petite image de dégradé étire ses bandes. Rendez ou exportez à la taille exacte, ou plus grande, plutôt que d’agrandir.
Corriger le banding des dégradés CSS
Les navigateurs rendent les dégradés CSS en direct : il n’y a donc aucun réglage d’export à changer. Deux choses aident. D’abord, élargir la rampe ou ajouter un décalage de teinte. Ensuite, poser une couche de bruit subtil sur le dégradé, qui fonctionne exactement comme le grain d’une image. La texture de bruit en CSS montre des façons légères de fabriquer cette couche sans gros fichiers d’image.
Forme des bandes
linear-gradient(#0b0b12, #14141f)sur tout un écran- Une seule teinte de presque noir à un peu moins noir
- Aucune texture sur la surface
Tient bien
linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)avec plus de plage- Une rampe sombre qui dérive aussi du gris vers l’indigo
- Une fine couche de bruit à faible opacité par-dessus
Corriger le banding dans la vidéo et les imports sur les réseaux sociaux
Les plateformes sociales recompressent ce que vous importez, et les codecs vidéo sont conçus pour jeter précisément le genre de détail subtil qui garde les dégradés lisses. Le grain aide ici deux fois : il masque les paliers, et il donne à l’encodeur du vrai détail à conserver. Importez à la taille recommandée par la plateforme pour qu’elle ne soit pas redimensionnée, et exportez la vidéo avec un réglage de qualité généreux. Si vous encodez avec ffmpeg, x264 a un réglage prévu pour préserver le grain.
# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
-c:v libx264 -preset slow -crf 16 -tune grain \
-pix_fmt yuv420p -movflags +faststart \
gradient-loop.mp4-crf plus bas signifie une meilleure qualité. -tune grain dit à l’encodeur de garder le bruit plutôt que de le lisser.Les fonds vidéo en boucle sont particulièrement exposés, car ils sont en général sombres et lents. Les vidéos en boucle parfaite couvrent le reste de l’export.
Prévenir le banding dès le départ
- Choisissez des dégradés avec assez de changement de luminosité ou de teinte pour leur taille
- Prévoyez le grain dès le début plutôt que de l’ajouter en sauvetage
- Gardez les dégradés sombres un peu relevés au lieu de les laisser glisser jusqu’au noir pur
- Vérifiez sur un téléphone après l’import, pas seulement sur votre moniteur de création
Chaque Mark dans Gradiently est rendu en direct à la taille où vous créez, avec son grain dans la recette, et les designs faits avec un Mark réservé s’exportent en PNG ou JPEG jusqu’à trois fois la taille du design : un dégradé n’a donc jamais à être étiré à partir d’une petite image.
Les questions qu’on nous pose
Qu’est-ce que le banding d’un dégradé ?
Le banding est l’apparition de rayures ou de paliers visibles dans un dégradé qui devrait paraître lisse, causée par trop peu de nuances disponibles entre ses couleurs.
Pourquoi les dégradés sombres forment-ils plus de bandes ?
Les fondus sombres ne couvrent souvent que quelques valeurs par canal, et on remarque facilement les petites différences entre tons sombres : chaque palier est donc large et visible.
Ajouter du bruit corrige-t-il le banding ?
En général, oui. Un bruit fin ou un tramage disperse les pixels entre nuances voisines : l’œil ne voit plus les bords entre les paliers.
Quel format de fichier est le meilleur pour les dégradés ?
Le PNG pour les visuels et le JPEG de haute qualité pour les images photographiques. Évitez le GIF et le PNG-8, qui ne gardent que 256 couleurs.
Pourquoi mon dégradé forme-t-il des bandes après l’import sur les réseaux sociaux ?
Les plateformes recompressent les images et les vidéos. Ajoutez du grain, importez à la taille recommandée et exportez en haute qualité pour donner à l’encodeur du détail à conserver.
É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
