Wednesday, January 26, 2011

Jpg Color Shift in Firefox

I'm working on the css of a website I'm currently building, and ran in to an interesting conundrum. The jpg image color didn't match up with my gif image. However, the problem wasn't duplicating in other browsers.


Jpg's and Gif images store color information differently, as a result I rarely have jpg images, butting up against gifs that need to match. But in this case converting the swirls to a .gif would triple the file size, and the other image needed transparency, so it had to be a .gif.


Many of you tech savvy folks will tell me... match it up as a png. That option would likely work better. In this case it seems the issue applies to both png's and jpg's. (read more details about the issue here: http://hacks.mozilla.org/2009/06/color-correction/)

I also am not willing to use png's just yet as a more than 5% is still in IE 6, and having the page not render properly for 1 in 20 potential customers is not an option. (Turnkey has an interesting article about this: http://www.turnkeylinux.org/blog/png-vs-jpg)

What to do?
Apparently the new version of Firefox is trying to be kind, and manage color correction information for photographers. This information can be contained in the jpg file. Yeah... that's a kind thing to do, but it's messing me up in this case. The article above outlines what you can do for png images. Here's what you do for jpg's:


When saving your jpg files, in Photoshop, be sure to uncheck "Embed Color Profile".

The result:

No comments: