Gradient banding appears when a gradual color change is represented by visibly separate steps. Reduced precision, lossy encoding, and repeated exports can contribute, so compare the source, local output, and delivered image under controlled viewing conditions.
PNG → JPG
Confirm that the problem is really in the file
Banding is the appearance of distinct stripes or steps in an area that should change gradually, such as a sky, a studio backdrop, a glow, or a deep shadow. It may already exist in the source or appear after resizing, export, or platform recompression. Keep the source, local export, and service-generated derivative separate so you can identify the stage where the change begins.
The same file can look different across viewers because of color management, display calibration, brightness, scaling, and browser rendering. Compare it in more than one color-aware application and on the intended device. Use the same background, zoom, and display size. If only one preview shows bands, investigate that viewing path before repeatedly re-encoding the image and adding unnecessary loss.
A screenshot can document what you saw but is not a substitute for examining the file. Screenshots introduce another color and encoding path. Record the image dimensions, format, bit depth when available, and the exact application used. Stable bands in the same locations across independent viewers are stronger evidence that the raster itself contains visible steps.
- Separate the source, local export, and platform derivative.
- Compare with equal zoom, background, and brightness.
- Use an independent viewer before re-exporting.
Not every stripe seen on screen was created by the converter; control the viewing path first.
Check bit depth and lost tonal precision
PNG can represent several bit depths depending on its color type, but an editor or converter may reduce a higher-precision working image to eight bits per channel for delivery. Fewer available values can make neighboring steps easier to see, especially in dark or low-contrast gradients. Do not infer output depth from the extension alone; inspect the properties of the actual exported file.
Higher precision is most useful while color grading, compositing, or generating the gradient because calculations have more room before the final rounding step. Preserve that working master, then create a separate delivery copy appropriate for the destination. If you overwrite the only high-bit source with a lower-precision export, later adjustments can stretch the remaining values and make the steps even more obvious.
Eight-bit delivery does not automatically produce objectionable banding. Gradient length, color range, existing texture, compression, display behavior, and viewing size all matter. Test the specific design instead of treating a bit-depth label as a pass or fail. A subtle transition covering a large dark area is often a better stress test than a small, bright gradient.
- Inspect the real input and output bit depths.
- Preserve a high-precision editing master.
- Use difficult dark gradients in the test set.
An image extension does not guarantee the precision retained by a particular export path.
Reduce repeated lossy encoding
Lossy JPEG and lossy WebP approximate image data to reduce bytes. At aggressive settings, quantization can simplify gradual tonal changes and reveal bands, sometimes alongside block boundaries or smearing. Repeatedly opening and saving a lossy delivery file can apply those decisions again. Export once from the best available master to the final dimensions and format whenever the workflow allows it.
Quality numbers are not directly comparable across formats or encoders. Make candidates from the same source at several settings and inspect skies, shadows, skin, and synthetic backgrounds. A high setting may preserve the transition but miss the size target; a low one may hide detail or create steps. Choose the lowest setting that passes the real visual requirement rather than a number copied from another project.
If the destination recompresses uploads, include that stage in the test. A perfect local PNG can still become a banded derivative after a platform converts it. Download the served image or inspect the network response, then compare it with the local candidate. When smooth gradients are critical, include lossless PNG or lossless WebP among the options, while still measuring dimensions and transfer size.
- Export from the master instead of resaving a delivery copy.
- Compare multiple settings using the same source.
- Inspect the platform's final derivative.
Each additional lossy save can quantize a transition that was already simplified.
Use dithering as a measured tradeoff
Dithering adds small variations among neighboring pixels so the eye perceives fewer regular boundaries. It does not restore missing tonal precision, but it can make a stepped gradient appear smoother. The tradeoff is visible texture or noise, and that extra variation can reduce lossless compression efficiency. Judge both the gradient and the surrounding product, skin, or typography at the intended size.
Different editors offer different dither patterns and strengths. Apply it while exporting from a clean, high-precision master rather than trying to rescue an already damaged low-quality copy. Strong dithering can replace clean bands with distracting grain, while very weak dithering may disappear after a platform resizes or recompresses the image. Create small controlled variants and include the destination's processing in the comparison.
Natural photographic noise may already break up tonal steps, so adding more is not always useful. Smooth computer-generated backgrounds are more likely to benefit from a subtle treatment. Avoid one global preset for a mixed folder. Record whether dithering was applied and retain a version without it, because a later format or display path may handle the original transition differently.
- Compare dithered and clean exports at actual size.
- Evaluate added texture and file size together.
- Keep the undithered master for future exports.
Dithering can mask steps; it does not recreate the tonal values that were removed.
Validate the entire output path
Build a test set containing bright and dark gradients, low-saturation transitions, skin, and synthetic color ramps. Compare source and candidates in the same viewer while recording pixel dimensions, bit depth, format, quality, and file size. This prevents an unnoticed resize or profile change from being blamed on compression. Look for bands, blocks, color shifts, and objectionable dither texture separately.
Place the candidates in the actual web page, application, presentation, or print workflow. A problem hidden on a small phone may become obvious in a large hero banner. Conversely, a step visible only at extreme zoom may not affect the intended use. For print, review a realistic proof. For responsive layouts, inspect both small and high-density displays rather than approving one desktop preview.
Document the editing color space, source precision, export settings, and final destination for the approved version. Team members should generate new delivery copies from the master, not from a compressed asset downloaded from the site. Completion means the transition looks natural after the entire delivery path, not merely that a preferred format or high quality number was selected.
- Test several gradient types and brightness ranges.
- Record file properties with the visual result.
- Approve at the real destination and display size.
Treat gradient quality as an end-to-end workflow question, not a filename question.
Key takeaways
- Banding becomes visible when a smooth transition is represented by too few distinct steps.
- Reducing bit depth or applying lossy compression can make an existing weakness more noticeable.
- Dithering can disguise regular steps but introduces texture and may affect file size.
- Judge the final delivered file at its real display size and on the intended devices.
Frequently asked questions
What causes gradient banding?
Visible bands can appear when tonal precision is limited or when lossy compression simplifies a gradual transition.
Will saving as PNG always remove banding?
No. PNG preserves the supplied pixels, so bands already present or introduced by a lower-bit export can remain.
Do all eight-bit images show banding?
No. Gradient range, texture, compression, display conditions, and viewing size determine how visible the steps become.
Does dithering restore quality?
It does not restore lost values, but controlled pixel variation can make regular boundaries less noticeable.
What should be the final test?
Inspect the delivered asset at its intended size on the target devices or output medium, not only in the editor.