A few days ago, a former coworker of mine IM’d me a link to his latest project. When I opened the site something caught my eye. It’s a slight visual bug I see happening quite a bit around the web. I’m referring to the striping effect you sometimes see in gradients. I promised him that I would blog about it to help explain what causes it and how to avoid it.
Depending on your monitor, you may or may not have noticed this too. It’s caused by a limitation of how many different shades of color you can use when blending from one color to another. Because it’s often very slight and sometimes unnoticeable, I’ll proceed with an exaggerated and enlarged example.
A picture is worth a thousand words (hopefully)
When you start out with your gradient in Photoshop, you have a practically unlimited number of colors. Once you save that image for the web, the color palette gets limited due to contraints in the GIF file format. To account for this, you can use diffusion, which blends the pixels together to give the appearance of a larger color palette.
The usual culprit of the striping effect is the use of a 1 pixel background pattern. Without considering the color palette, 1 pixel width patterns seem like a smart choice. It will give you a smaller filesize and remember, every byte counts. However, 1 pixel width means your graphic won’t be able to use diffusion, thus making your limited color palette even more obvious to your users.
Make sure to keep an eye out for this whenever you’re creating those Oh-so-Web-2.0 gradient backgrounds. Always start with high quality, large color palette images and use diffusion intelligently when you have to save in a format with a limited color palette. It’s smart to aim for small filesizes, but it’s best to do it in places that your users won’t notice.