Working with Photoshop: Uncheck Embed Color Profile Save for Web & Devices

I’ve been working on my design portfolio this week and was, yet again, playing around in Photoshop. When designing a background image that is not plain white or black in Photoshop for your website, you want to make sure that you also set a background-color to take into account different browsers and sizes. If you set a background color, the image and the background color, no matter what the browser size, will seamlessly blend together. Your CSS should look something like this:

body {
    background: rgb(112, 255, 205) url('../Homepage.jpg') no-repeat;
    color: rgb(102,51,0);
}

The url finds the image, and the rgb or hex code is the background color.

As I was designing oogeeyot,(UPDATE 7/31:  I’ve totally redesigned the site, and it is no longer using these images) I noticed that the color in the image and the color in the background, although set to the same rgb value, were looking differently in Safari. The color discrepancy was not apparent in Firefox. Here’s how it looked before:

After doing a quick google search I found this thread to be really helpful. Basically, the key is when saving your PSD as an image file, uncheck the box that says Embed Color Profile. With an embedded color profile, Safari tries to read the colors from the image, rather than taking the picture at face value.

UPDATE:  Based on Ann’s comments below, and talking to other web designers, the best thing to do is Save for Web & Devices, choosing which GIF, PNG, or JPG fil you need for image quality.

Related posts:

1. Akismet WordPress Plugin is Amazing!
2. Understand iTunes XML: Port Your Music Library from Windows to Mac
3. Find Out Why – You Don’t Know C.R.A.P. about UX & UI