iWeb Color Profile Help

I had a simple task to accomplish using iWeb 2.0.2. I wanted to make a jpeg image that seamlessly blended into the background color. This should be simple but due to iWeb’s built-in color management, I could only find one workflow that allows colors in jpeg images to match the background color in all of the various web browsers.

Here are the facts that I learned:

  • Only Safari (and iWeb) actually pay attention to color profiles imbedded in Jpeg images. In this case, Safari is “right” but that doesn’t help you for the rest of the world’s browsers.
  • Everyone pretty much uses sRGB-IEC61966-2.1 right now on the web, so if you get your images into that color profile, you have a chance at your visitor seeing something close to what you intended.

Here are the steps I used. These steps were found only through trial and error. I’m happy to be corrected on any of these steps if you know better:

  • First, make sure your image is in sRGB to start with. Edit->Convert to Profile… and set the Destination Space to sRGB IEC61966-2.1 (I’m not sure if this step is required but so far I haven’t tested it without it).
  • In Photoshop make sure to set Edit->Color Settings to “Don’t Color Manage This Document”
  • Save your image with “Save for Web” and make sure the “ICC Profile” box is not checked.

Now you can sample a color out of your image in photoshop and use those RGB values as a background color in iWeb. The image and the background will match in Safari, Firefox and even IE 6.0.

Thanks to Anne-Marie Concepcion for her article that pointed me in a direction on this.