If you are a photographer, graphic artist, or just have an eye for color, you have may have noticed that your pictures take on a dull, desaturated look when viewed on the Web with Firefox. In particular, photographers who use their camera’s RAW setting are affected by this dullness. This article will teach you how to correct this problem using three different applications: Photoshop, Automator, and ImageMagick.
The reason your pictures look dull in Firefox is because they contain color profiles that are not understood by the browser. I must say though, it’s not fair to point out Firefox alone. Look at your photos in Photoshop, then switch to Firefox, Internet Explorer, Opera, and Safari. Safari will show you a rich, colorful photo while the other three browsers will show you a muted, desaturated version. The upcoming Firefox 3 is rumored to have limited support for color profiles beyond standard RGB, but frankly, you are better off making sure your pictures use sRGB until all the browsers are able to get it right.
Fig. 1 - Comparing the same photo, viewed in both Safari (left) and Firefox (right). The Firefox version is noticeably less colorful.
How to Fix the Problem with Photoshop
You can ensure your pictures retain their deep, vibrant colors on the web by converting them to the sRGB color profile that Firefox, IE and Opera are expecting. With your image file open in Photoshop…
- Click Edit
- Click Convert to Profile…
- Under Desitnation Space, change Profile to sRGB IEC61966-2.1
- Click OK
How to Fix the Problem with Mac OS X & Automator
Mac OS X has an application called Automator that creates workflows that take the redundancy out of working with large batches of files. You can use Automator to create a workflow that applies the sRGB color profile to a batch of image files.
- Start the Automator application. If it’s not in your Dock, pop into the Finder, go to the Applications folder, and double-click on Automator.
- In Automator’s “Library” column, click on Finder, which is listed under Applications.
- Double-click on Ask For Finder Items in the “Action” column.
- In the workflow to the right, check off “Allow multiple selection”.
- Back in the “Library” column, click on Preview.
- Pop back over to the “Action” column and double-click on Apply Color-Sync Profile.
- In the workflow, change the “Profile” drop-down menu to Display → sRGB IEC61966-2.1.
Save your workflow as “Apply sRGB Color Profile” and run it. Automator will ask you to select the images for conversion, then take care of the rest. Here is a screenshot of my final Automator workflow:
Fig. 2 - An Automator workflow to assign the sRGB color space to image files.
How to Fix the Problem with ImageMagick
For command line ninjas who would prefer to use ImageMagick, there are two options available: -colorspace and -profile.
The Future of Color on the Web
Colors on the web are a hot topic lately, and all the major browser makers are aware of the situation. As I mentioned, the upcoming Firefox 3 is rumored to have limited support for multiple color profiles. Microsoft on the other hand is pushing their own “HD Photo” format. Whatever comes of the situation, it looks like future versions of web browsers will definitely need to be aware of the variety of gamuts available. Here’s hoping they get it right.
Further reading:
8 responses
September 23rd, 2007
Asa Dotzler says:
Firefox will support color profiles in version 3 but there’s still a problem. There are millions (billions?) of pages out there where the page author has matched her image content with her css colors. If Firefox enables color profile support, most, if not all of those sites will have visual problems where the images don’t match up to their background colors. Then there’s the cross-browser problem. If those sites tune their css colors to match their images in Firefox and Safari, then the sites will look wrong in IE. It’s going to be a while before all of this is sorted out.
- A
September 23rd, 2007
Of Zen and Computing says:
Excellent point, Asa. This is one of those problems that may seem simple at first glance, but is quite the tangled web underneath.
September 23rd, 2007
Make your pictures Firefox-ready using Automator at The Joy of Scripting says:
[…] The website Of Zen and Computing just published an interesting article about dull looking pictures in Firefox and how to avoid this phenomenon by adding a specific color profile to your pictures before uploading them to the web. […]
September 23rd, 2007
Neil says:
Good post. This has greatly improved the color for one of my photos in Firefox, however it’s still duller than safari.
While investigating this problem, I found out that in photoshop you can preview how Firefox will render the image by selecting: View > Proof Setup > Monitor RGB
September 23rd, 2007
Megan says:
I followed the directions of this via Photoshop EXACTLY and it did NOT work. It is driving me crazy! My colors look absolutely awful. I don’t know how to fix it!
September 23rd, 2007
Of Zen and Computing says:
What is the source of your pictures? Are they straight from the camera, or have you adjust them? What type of monitor do you have? Is it color calibrated?
Is there any difference at all? This is not going to make them perfect, but it does serve as an improvement. You will still see a small discrepancy between browsers.
September 23rd, 2007
Kevin Canini says:
I’m glad people are writing about this annoying problem. However, the author is completely wrong about why this is happening. It’s not that Firefox doesn’t understand embedded color profiles. It’s that Firefox doesn’t convert images to the display device’s color space before outputting them. That’s why converting to sRGB doesn’t fix the problem, Megan. In fact, nearly all JPG images are already in the sRGB color space, so the author’s recommended fix actually won’t change them.
To get Firefox to display images properly, you have to convert them to the smallest possible color space, i.e., your display device’s color space. For my MacBook Pro, that would be “Color LCD”. Although you will be losing some of the dynamics of the image’s color, it will be displayed as correctly as possible on your monitor.
September 23rd, 2007
Of Zen and Computing says:
Thanks for offering your advice Kevin.
My ultimate point is converting a JPEG to sRGB rather than a color space such as Adobe RGB is going to give you much better results, which really only applies to those who are creating or editing their own images from scratch.
So yes, a JPEG that comes straight out of a point & shoot digital camera will most likely already be in sRGB. In that case the discrepancy you are seeing is much less severe than if you were using an entirely different color space.
Leave a Comment