photoshop save images cross browser compatible

[ajcool123]

Hi Guys,

I'm trying to figure out how to save my PSD files to a format (jpg, gif, png, whatever) so that they are cross browser compatible.

I've seen this solution...

"As far as whether to include the profile or strip it: that depends on what your goal is. If you want images which look the same on all platforms, and have vibrant colors, you should convert your image to sRGB and include the profile, and then only Mac gecko browsers will suffer."

How is this done is photoshop? Is it a matter of saving image as "save for web" or is there anything else I should be doing?

Thanks!

[toicontien]

Using "Save for Web..." is correct. They are talking about color profiles, I believe? I normally leave the color profile out. That way the RGB values of the graphics stay unchanged when viewed on multiple operating systems, as often times the RGB color values in images match the RGB color values specified in CSS or background colors. Graphics will match site background colors, but they will "look" more vibrant or duller, depending on the machine you view the site in.

By removing the color profile, colors look different from computer to computer, but at least the colors in your graphics will match the background colors on your web site.

PNG images are another area of concern. They include a gamma setting, similar to a color profile. All browsers, except Internet Explorer get this right. If using PNG images, I recommend you download TweakPNG (http://entropymine.com/jason/tweakpng/). This allows you to strip out the gamma setting, which makes your PNG images look correct in all browsers, though you lose the benefits of that gamma setting (benefits similar to including a color profile with a JPEG).

[ajcool123]

Okay great thanks for the reply.

So what about this issue?

http://blogs.smugmug.com/don/2007/02/14/this-is-your-mac-on-drugs/

My site http://toastanddragon.com the main image blurs blends into the CSS color of the site background. The background color looks different in Safari on a Mac.

Will "save for web" prevent against this? When you save the image, how do you "leave the color profile out" as you say?

Thanks!

[toicontien]

You'll see this in the Save for Web window, when saving as a JPEG. Uncheck ICC Profile. It also reduces the file size. GIFs do not suffer from this calamity, but JPGs can if the ICC Profile is included, and so can PNGs if the gamma setting is included (which photoshop includes by default and can be removed with TweakPNG).