≡ Menu

Gradient background banding – JPEG vs PNG

product-photography-e-book-reader

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.

product-photo-banding-original-image

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.

detail-original-image-banding

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

product-photo-gradient-background-banding-save-for-web-jpeg

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.

detail-background-banding-save-for-web-jpeg

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

product-photography-e-book-reader

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: