Less Janky — How to Stop Banding in Your Images

Banding is one of the universal annoyances that every designer has to deal with.  Although it’s certainly more common among web designers, banding has also given plenty of headaches to print designers and photographers. Banding is a newer problem; unique to the digital realm, as old-school methods of photography and publishing weren’t limited to the digital color space. As the problem and its causes have only been recently defined, many designers may lack the techniques necessary to combat this subtle and tricky problem. If you’re not familiar with the term or are sick of reading this sentence, let’s cut to an image.

Some Banding in Action due to Compression:

This is an overly exaggerated example of banding effects on a photo I took.  In the compressed version on the right, the sky doesn’t contain enough blues to portray a smooth transition. This is because the compressed version is trying to save space by limiting the number of colors used.  This actually works really well in the building section of the photograph because our eyes don’t pick up on subtle brightness changes when looking at busy or high-contrast areas. It’s only when the color jumps from “Slightly Light Blue” to “Slightly Less Light Blue” that we really notice.

It’s as if the compression algorithm thought “Hey man, that looks like solid blue. Six colors ought to cover it–done!” Idiot.

While compression is a common cause of banding, it’s important to remember that all digital images share this property of stepping harshly from one color to the next.  Indeed, each pixel is its own little square, not blending with any pixels around it. Fortunately pixels are much too small for our eyes to detect that stepping.  It’s only when compressors force similar areas of color into much larger groups that we pick up on the changes.

Banding with the Gradient Tool:

The gradient on the left side was created by picking two colors and fading them together with Photoshop’s gradient tool. The gradient on the right side only used one color, and simply faded itself from 100% to 0% opacity.  Obviously they both achieve very similar results, and perhaps that’s why most designers may use the techniques interchangeably. If you look very closely, however, the gradient on the right actually shows some harsh stepping from one shade to the next.

Add some levels adjustments, and you can really see the difference:

The good news is that Photoshop’s gradient tool handles gradients pretty well with multiple colors.  Photoshop does the math and immediately rasterizes the outcome.  Through a combination of dithering and subtle noise the fade is rendered pretty smoothly.  You can even hit the levels or curves adjustments later and it looks decent.  The gradient on the right, however, didn’t have two colors that Photoshop could do the math for, so no dithering or noise could be applied.  Without knowing what color it would be fading to, it simply renders the gradient in bands ranging from 100% opacity to 0% opacity.

Noise is the Solution! Sometimes…

The solution that is often thrown about is “Add a bunch of noise dude!”. While it’s true that adding noise to break up the bands is effective, you have to be careful that you aren’t bringing a bazooka to a knife fight. Adding too much noise unnecessarily will degrade your image and take clarity out of your highlights and shadows.

Fix #1 – Use Two Color Gradients

To prevent banding while using Photoshop’s gradient tool, always use at least two colors. Fading a single color to transparency will not yield pretty results.  If you absolutely must fade a color to transparency, make sure the gradient is small, or that the range of color difference in the gradient is high.  It’s the long and subtle gradients that cause problems.

Fix #2 – Use Noise in One Channel

If you’re experiencing banding when compressing or saving your images, you may want to add noise to prevent noticeable stepping.  If you want to do this without harming ALL of your color data try applying noise to only one channel–ideally, the channel where the most banding is occurring.

1. Select the ‘Channels’ tab next to your layers palette.

2. Click on a color channel.  Perhaps red if you have banding in a sunset photo, or blue if there’s banding in a bright blue sky.  Choose whichever channel works best in your situation.

3. Choose Filter > Noise > Add Noise. Check ‘Gaussian’ as the distribution format. Choose 1-2% as the amount, as you can always add more noise later if necessary.

Save your image out as you did before, and ideally this method should have decreased your level of banding.

Fix #3 – Use Noise in Another Layer

If you absolutely need to maintain a lot of integrity in your photo, but still need to remove banding in some area, try adding the noise to its own layer.

1. Create a new layer and fill it with 50% gray.  That’s about #808080 if you’re working in RGB.

2. Place this layer above the image you’re adding noise to. In the layers palette, choose ‘Overlay’ as the blending mode.

3. Add noise to this gray layer, 2-3% should suffice.

You’ll notice that the noise does not affect any very bright or dark areas of your image.  Because the noise is in ‘Overlay’ mode, you’re free to crank up the noise as high as needed, without destroying the quality of your highlights or shadows.

Another benefit to having the noise in its own layer is that you can use your eraser tool to remove noise from areas where it is not needed.  You could even take one step further, creating a complex mask and applying it to the noise layer, giving you full control over which areas are affected.

No More Banding!

Hopefully some of these ideas got rid of your nasty banding issues.  If you have any other tips or tricks to solve this problem, drop me a line in the comments.

Other Resources to Regarding Banding:

Wikipedia – Posterization

Greyscale Gorilla – How to Remove Banding Artifacts in After Effects