Wednesday, March 14, 2012

Fixing Color Discrepancy when Displaying in HTML Browsers


Here’s something that can drive you nuts, but has a pretty simple fix.

Often when you create an image in Photoshop (or some other photo editor) and then lay it on a background in an HTML page, the color is just slightly off, and you can see the edge of where the picture meets the background.  Why can’t I get my gradient to fade into the background?!  Why do I see the edge of my image in Firefox?

Gradients in browsers are the worst (for so many reasons).  You think you’ve got it just right and your vignette or fade is going to disappear right into the background… and then it doesn’t.

Used to be when your colors didn’t match up in various web browsers, it was because you weren’t using websafe colors, or you were using jpegs instead of gifs (I’m betraying my age, here), but those day are pretty much gone, so that’s almost never it (though it still doesn’t hurt to start from websafe colors if a specific background hue isn’t ultra-critical; I still use websafe colors whenever I can).

Here’s the solution you’re looking for: chances are, you saved your image with a color profile embedded.  Some browsers obey embedded color profiles, so when interpreting the image, the color at the edge of the image is slightly different than the color you’ve used for your background.  Even though the browser should be showing the exact same color assigned by its hexidecimal number, the colors look different because they are being interpreted through the lens of different color profiles.

Go back to your original image, and when saving the image for the web, be sure you are not embedding a color profile.  For instance, in Photoshop, when using “save for web and devices,” make sure you select “Windows (no color management)” or “Mac (no color management).”


No comments: