≡ Menu

Gradient background banding – JPEG vs PNG


Recently I took some product photos for a Swedish online book store called Adlibris, they have an e-book reader with their brand on and it is now connected directly to the store, a bit like Kindle.

When I was testing different lighting setups for this job, I used this one with a blue gradient background together with one totally white. The problem with the gradient is that it looks really good in the camera, but needs more work to look good in a web browser. Not even JPEG with 100% quality could avoid banding.


Original image, almost straight from the camera

This is how it looked, but better, in the camera’s display. I liked the intensity of the gradient going from almost white behind the product to black in the corners.


But the transition from one blue tone to another didn’t really work once I had started working on the photo in Lightroom. The banding couldn’t be removed with some small addition of blur or noise/grain in the problem area.

Banding in High Quality JPEG as well


So I made a mask for the background and added a gradient in Photoshop, going for a little less contrast to avoid the most obvious gradient problem. And later saved for web in Photoshop with better result. But not really good.


This is a detail from the photo saved for web in Photoshop with 100% quality. It should look good, but there are still banding issues.

The solution


This is the same image as the first one in this blog post, with a gradient created in Photoshop and then saved for web as a 24-bit PNG format. I very seldom use PNG, but this time with such simple shapes and gradients in the photo, it produced a file small enough and handled the gradient very good.

This portrait with flagged lighting had the same problems in the grey gradient, but instead of using PNG, I added a layer of noise to hide it. Works good too, even if the file size grows a bit with the added details.

{ 0 comments… add one }

Leave a Comment

%d bloggers like this: