The short version
- Image compression makes files smaller either losslessly, by storing the same pixels more efficiently, or lossily, by discarding detail.
- Smooth gradients suffer most from lossy compression because neighbouring colours are merged into visible bands and blocks.
- Dark, subtle gradients band first, since an 8 bit image has very few distinct values between two close dark colours.
- A light layer of grain or dithering hides banding better than any quality setting, because it breaks up the steps.
- For graphics with gradients, export PNG or lossless WebP, or use JPG at quality 90 or higher with chroma subsampling turned off.
On this page
Image compression makes a file smaller in one of two ways. Lossless compression stores exactly the same pixels more efficiently, like zipping a document. Lossy compression throws away detail it predicts you will not notice. Photographs hide that loss well because they are full of texture. Smooth gradients hide nothing: compress a soft blend too hard and it breaks into stripes, blotches and blocks. The fix is a mix of the right format, the right quality setting and a little grain.
Why gradients break when you compress them
A standard image stores 256 levels for each of red, green and blue. That sounds like plenty until you look at a subtle dark blend. Going from #14101f to #2a2147 across a 1920 pixel wide hero, the red channel only climbs 22 levels. Each level has to stretch across about 87 pixels, so you are already one step from visible bands before any compression.
linear-gradient(90deg, #14101f 0%, #2a2147 100%)Lossy compression then simplifies the image in small blocks and merges colours that are nearly the same. In a photo, nearby pixels are rarely the same, so little changes. In a gradient, nearly every neighbour is nearly the same, so whole runs of colour collapse into one. That is gradient banding, and dark and pastel blends show it most.
Bands easily
- Dark blends between close colours
- Pale pastels across a large area
- Perfectly clean digital surfaces
- Wide formats such as a 1920×1080 hero
Survives well
- Bright blends with distant colour stops
- Gradients with grain or texture
- Busy photos and illustrations
- Small images with short colour runs
The quality settings that matter
Each format has one main dial and a few hidden ones. These starting points are conservative for graphics with gradients and text; photos can usually go lower. Always judge at 100% zoom on a good screen, never on a thumbnail.
Setting for photos
Notes
Setting for photos
Notes
Setting for photos
Notes
Setting for photos
Notes
Chroma subsampling
Most JPG encoders store colour at half the resolution of brightness, written 4:2:0. Your eye barely notices in photos, but coloured lettering and saturated gradients get soft, smeared edges. Many tools hide it under an advanced option; turning it off (4:4:4) costs a little size and keeps colour edges crisp.
PNG quantisation
PNG optimisers often shrink files by reducing them to a palette of 256 colours or fewer. That is excellent for flat logos and terrible for gradients, which need thousands of shades. If a compressed PNG suddenly bands, quantisation is almost always why.
Grain: the best fix for banding
Adding a fine layer of noise sounds backwards, but it is the most reliable cure. Grain scatters pixels slightly lighter and darker, so the eye blends the steps into a smooth ramp, and the compressor has texture to keep rather than flat runs to merge. It also makes a digital gradient feel like a surface. Grainy gradients shows how much to use.
A clean dark blend at 1920×1080 is the image most likely to band after compression.
With a fine grain in the surface, the same kind of blend survives compression and reads as a material.
On the web you can add grain in CSS or SVG instead of baking it into a large image, which keeps the download tiny. See CSS noise texture. Gradiently's Marks carry grain as part of their material, so a design made with one already has the texture that helps it survive a platform's recompression.
A method for compressing any image
- 1
Resize to the display size
The biggest saving is pixels you never needed. A 1080×1350 Instagram post should be exported at 1080×1350, not 4000 pixels wide.
- 2
Choose the format by content
Text, logos and gradients: PNG or lossless WebP. Photos: JPG, WebP or AVIF. PNG vs JPG and WebP vs PNG and JPG go deeper.
- 3
Set a high quality, then lower it
Start at 90, step down by five and compare at 100%. Stop at the step before you can see a change in the darkest gradient.
- 4
Compress once, from the master
Keep an uncompressed master. Every new export comes from it, never from a previous JPG.
- 5
Check the final file where it lives
Upload a test post or load the page on a phone. Platforms and CDNs may recompress again.
Compression tools you can trust
Google's Squoosh web app lets you compare formats and settings side by side with a slider, which is the quickest way to learn what each dial does. For folders of images, command line encoders do the same job in bulk.
# 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.webpIf your gradient is a website background, the lightest image is no image: a CSS gradient costs no download at all and never bands from compression, though it can still show 8 bit steps on wide dark blends. CSS backgrounds shows how to layer gradients with a tiny grain texture, and optimising images for the web covers what Lighthouse looks for.
Questions people ask
How do I compress images without losing quality?
Resize to the size the image displays at, use lossless PNG or WebP for graphics, and use lossy JPG, WebP or AVIF at a high quality for photos. Compare at 100% zoom before lowering the setting.
Why does compression cause banding in gradients?
Lossy compression merges colours that are nearly identical, and a smooth gradient is made almost entirely of nearly identical neighbours, so runs of colour collapse into visible stripes.
What is the best JPEG quality setting?
Around 80 to 85 for photographs and 90 to 95 for graphics with text or gradients. Quality numbers vary between tools, so check the result at 100% zoom.
Does adding grain really reduce banding?
Yes. Fine grain breaks up the steps between colours so the eye reads a smooth ramp, and it gives the compressor texture to keep instead of flat areas to merge.
Should I compress PNG files?
Lossless PNG optimisation is always safe. Avoid reducing a gradient PNG to a 256 colour palette, which causes banding.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile