Color Profiles in Modern Browsers

Tweet

Have you have noticed that after a recent browser upgrade a few of the sites you worked on now display graphics that don't quite match. The reason for this is that most likely you are assigning a specific color profile inside your image editor that until recently most browsers have ignored. I have debated making this a quick tip or a full in depth article on color profiles. There is just too much to cover right now, so I am just going to keep it simple and show you how to fix a simple common problem.

Safari got things kicked off by supporting color profiles, no surprise there. Most people might not realize it but Firefox 3 launched with color profile support but it was disabled by default due to performance issues. Fast forward to FF version 3.5 and you now have default color profiles supported by two great browsers.

So, this is good right? Pretty colors are nice. For photos it's a great thing, but for web design things can get a little more complicated unless you know what to look for.

A Common Problem - Matching Background to Background image.

Gradient backgrounds and large background images are pretty popular in web design right now. Typical usage is adding the background image in the css and then setting the background color to match the color of the image to appear seamless. The problem lies in the difference between the hex color and the image with the embedded color profile. If your background image uses an embedded color profile it may look great in Firefox or Safari, but open up Internet Explorer or any browser that does not support color profiles and you will see a color difference resulting in an ugly edge around your images.

In example above the background was exported with an embedded color profile. The site was then built and tested in FireFox 3.5 and a matching background hex color was chosen. However when the image's color profile is ignored by Internet Explored it no longer matches the rest of the background.

The Fix

If you find a site where your colors once matched and now they don't, or if your colors match in one browser but not another you need re-open your original image and re-save it without the "embed color profile" option checked. or use a background that covers the complete background of the site. The image to the right shows where the color profile option is located inside of Photoshop CS3's save for web dialog box.

I am not saying to never use embedded color profiles, they look great and can be used with success if you know what to look for. I am just trying to provide you with a quick fix if you see mismatched images on your site.

Not sure what settings you used on the images on your sites? Just visit any sites you might have worked on in FF3.5 or Safari and take a look around. You will notice pretty quick if you have color matching issues.

Overview

• New browser such as FireFox 3.5 and Safari 3 will honor color profiles in images.
• Make sure you know if you are embedding the color profile or not.
• html hex colors will not match images with a color profile in a browser that does not support color profiles.
• Generally, depending on your settings images with embedded color profiles will have a deeper richer color.
• Use color profiles smart and get great looking images on your site or blog!