I have a separate blog where I post photos I take, and I recently noticed a problem with how the actual JPEGs display in Firefox. It was almost like they were showing the image in a lower colour mode. All other browsers displayed the images fine.

Here is an example using a recent photo off the blog. You can see the blurry background is cutoff in firefox.

The difference is that Firefox is one a couple of browsers in the market (Safari and possibly IE10 seem to be supporting it too) that applies embedded ICC colour profiles in images when displaying them.

I was saving my JPEGs with the ICC profile (sRGB) embedded in them and therefore Firefox was adjusting the colours to match the profile, messing things up.

I’m not 100% sure as to what is happening, but I can hazard a guess. The ICC profile is intended to remove the link between a device dependent colour space (e.g. the camera or your screen) and an independent colour space. I think the image is saved with the colours already converted to the target colour space, but with the profile embedded, Firefox applies the transformation again, thereby effectively applying the conversion twice. I couldn’t find much information about this on the web, so this is just a guess.

The information on the web is a bit thin… I did find this page, but it doesn’t seem to explain the issue I’m having.

So, after all that, what is the fix? Just save the image without the profile in it, and everything displays as intended, across all browsers and image viewers that I tested on (you can also remove the profile of an existing image using tools like exiftool).