Color Profiles in Modern Browsers

Color Profiles in Modern Browsers

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.

Browser Profiles

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. Browser Profiles 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!

Recent Posts

Magazines and much much more

Mar 09, 2011

So it's been a while since I had wrote a blog post so I thought I would finally take some time and let you know what I have been up to lately. I have been crazy busy to say the least and a lot of exciting projects...read more

Fix The Full Width Box-Shadow Bug

Oct 04, 2010

I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background...read more

Steve Mullen Interview

Apr 22, 2010

I was recently contacted by a college student and asked to answer a few questions for a class project. I figured since I already had it typed up I would share it on my site....read more

Destin Car Wrap Complete!

Mar 16, 2010

I recently designed my first car wrap for a client. It was a fun project and I was anxious to see the final result. I was a little nervous since I had never designed on before and the design was fairly complex....read more

More Posts

New Free Desktop Wallpaper

ITR Photo-shoot

New Addition!

Stop Designing in Photoshop. No thanks!

Behold Apple's iPad

Let it Snow Wallpaper: Download

Text layout in Photoshop using shape layers.

Powered by modx

Web Development: How I get it done

New Desktop Wallpaper

15 Inspirational Home offices

Color Profiles in Modern Browsers

Big Update!

Free Texture Pack #1

Run Your Old Add-Ons in FireFox 3.5

Downtown Tulsa - A Photographic Tour

Souled Out Website Launches!

Get rid of those ugly link outlines.

New Website Launched!



Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.

Twitter Feed