Managing website banding on retina 4k screens

Recently I bought an iMac 4k [purchase made in the US] and overtime I go on a website or create a website in Webflow and instead of getting a clean gradience I see lines on my monitor of the pixels of the gradience. Such an example includes when you take an image in Photoshop and you make the quality of the image so low that you don’t see a clear blue but rather blue and purple pixels. Such is happening on my computer screen. When I tried sending a Screen Shot of the website in Webflow they [my friends] did not see any lines but a clean gradience [they have only a Retina Display]. To prove this was not the overall monitor of the computer I tried a gradience done in Photoshop and it turned out nice and clean. Are there any solutions to the problem? Once again it is the new iMac 4k monitor that is doing this…I sent an image of the computer screen taken by a camera, do you see the lines in the background gradience? This isn’t the best image but its what I was able to take without the reflection interfering too much. Press the image to see it at its best quality.

Hi Vladimir. The phenomenon you’re showing is called BANDING and there’s nothing you can do to render a gradient without it if you stick to render… a gradient. And the result depends on the browser and your screen, too. Let me elaborate:

What you show here is what HTML, CSS and the browser do: declaring and displaying a gradient, from one color to another. As the color model of your screen is 8 bits, when you have a monochromatic (or almost) gradient, there’s only 256 shades that can be used to compose the gradient. So if your gradient extends on more than 256 pixels, you’ll start to see bands of shades.

Photoshop does it too:

http://vincent.polenordstudio.fr/snap/e91bg.jpg

In Photoshop though, you can add dithering to minor the effects, but it’s still there:

http://vincent.polenordstudio.fr/snap/994gk.jpg

Manually, you need to add noise or other alteration, to get rid of the banding effect:

http://vincent.polenordstudio.fr/snap/abagz.jpg

In short: good gradients on the web aren’t a given. Very good gradients are a good designers’ touch :wink:

You can read the “Dithering is everything” section of a great post by Marc Edwards on Bjango: Gradients

So, in the end, you may have to resort to images for a very good difficult gradient, and not let the browser draw it for you. It is known that there is no magic solution, you have to use repeating images. In your case, gradient being diagonal isn’t the best case to use repeating images.

Some will say it’s better to do a black to transprent black gradient over a white background, but I tried it in Webflow and the result is the same.

I’m often using noise textures (http://www.transparenttextures.com/) over gradients, to add a bit of chaos to it.

http://vincent.polenordstudio.fr/snap/c5n19.jpg

http://vincent.polenordstudio.fr/snap/70wow.jpg

Sometimes wheh I struggle with a gradient, I go to my flickr account (where I know the pictures aren’t visibly compressed), I look for shades of blue in the sky, crop a section and work from there. The pictures are naturally dithered, there’s never a banding effect, it’s a time saver.

http://vincent.polenordstudio.fr/snap/p1ha7.jpg

Hope this help, sorry there’s no CSS solution for that. Check your art on various monitors and devices to spot the differences in banding.

PS: on this post, the banding is not obvious on some images, but it’s because the jpegs have been compressed… It’s really obvious when you have bigger images or less compressed images. Somehow, jpeg compression artifact tend to make banding less evident.

6 Likes

2 Likes

Okay, thank you very much!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.