Why Your Pictures Look Dull in Firefox

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…

1. Click Edit
2. Click Convert to Profile…
3. Under Desitnation Space, change Profile to sRGB IEC61966-2.1
4. 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.

1. 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.
2. In Automator’s “Library” column, click on Finder, which is listed under Applications.
3. Double-click on Ask For Finder Items in the “Action” column.
4. In the workflow to the right, check off “Allow multiple selection”.
5. Back in the “Library” column, click on Preview.
6. Pop back over to the “Action” column and double-click on Apply Color-Sync Profile.
7. 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:

• “Safari ushers in better browser colors“, C|Net News.
• International Color Consortium