[MagSafe]

Hi there,

Looking for some much needed advice on saving images for the web in Adobe Photoshop.

I've been trying to preserve the colours when saving for the web for ages now, but I just can't seem to get it right. I know that Windows will always show the colours darker than on mac's, but thats not what i'm interested in.

When I save for the web at the moment i'm using the 'Color LCD' colour profile and then selecting 'Uncompensated Color', this seems to be the only way to not get faded-out colour in browsers. If I save in any other setting, Firefox displays the colours as faded-out, almost half gray in tone and it just looks awful. Using Convert to Profile > 'Color LCD' and then choosing 'Uncompensated Color' seems to be the only way I can get the original colour in Safari, and it still looking half-decent in Firefox & on Windows ... but it still isn't the same shades of colour in Firefox & Safari on my mac for some reason.

What i'm hoping someone can tell me is what the sure fire way of saving images for the web that will preserve colours across all browsers.

Thanks,

Steve

P.S Apologies if this is in the wrong forum, wasn't sure what the best one was for this subject.

[Brad]

Safari is the only mainstream browser with proper support for embedded color profiles in images. Therefore, Firefox and Internet Explorer will undoubtedly display the images badly.

Disabling color profile management is the only way to make them look consistent.

If you use the "Save for Web" menu item in Photoshop, uncheck the option for "ICC Profile" in the sidebar.

If you're simply using "Save As", you should first choose Edit -> Color Settings and then set it to the "Color Management Off" setting.

[Ebby]

If "Color LCD" is your monitor profile, than the color is right for only your monitor. Embedding your color profile severely limits the colors of your image and is of no use to me or my screen. Same way I could give you my calibrated monitor profile and it could look terrible on your screen. Your profile is unique to only your machine.

sRGB is the most common on the web and most accepted. Although I have been seeing AdobeRGB creeping into web graphics. It also has the fewest colors, but for web applications that is acceptable.

My guess is your color conversion settings are wrong or using the wrong profiles. I would double check those and please, for the love of Jeebus, do not use your monitor profile as your colorspace. I'm not pointing fingers, I've just seen that countless times and I needed to rant a bit.

As for Safari color management, I've seen some strange things happen there too, but I don't remember if it was only .PNG images.

[MagSafe]

Originally Posted by Brad Safari is the only mainstream browser with proper support for embedded color profiles in images. Therefore, Firefox and Internet Explorer will undoubtedly display the images badly. Disabling color profile management is the only way to make them look consistent. If you use the "Save for Web" menu item in Photoshop, uncheck the option for "ICC Profile" in the sidebar. If you're simply using "Save As", you should first choose Edit -> Color Settings and then set it to the "Color Management Off" setting.

Hi Brad, thanks for replying.

If i'm saving an image as a PNG within "Save for Web" it doesn't show the "ICC Profile" option. I've selected "Color Management Off" but what option should I choose from within "Convert to Profile..." in order for it to remove any colour palette assigned and keep the original colours.

Thanks,

Steve.

[MagSafe]

Hi again,

I've tried playing around with this again tonight and just can't get Safari & Firefox to play nice.

When I strip out the colour management altogether by selecting 'Uncompensated Color' within Save for Web, so the document doesn't have any colour profile, Firefox will still display the image differently than Safari

I heard that if there isn't a document profile set to a image, Safari will default the image to your color profile, but Firefox won't do this and use what it thinks is best ... resulting in the browsers displaying the colours differently

Help me, please!

Disabling the colour profile altogether doesn't work, and neither does saving it as 'sRGB'

[Ebby]

Can you post these images so we can have a look-see?

[Bryson]

I'm stupid and posted in the wrong thread

[MagSafe]

No need, I fixed it

After reading a ton of articles, I found this piece of software:

http://www.shealanforshaw.com/introd...ma-10-for-osx/

It removes the gamma information from PNG's so they appear the same in all browsers

[MagSafe]

Originally Posted by Ebby If "Color LCD" is your monitor profile, than the color is right for only your monitor. Embedding your color profile severely limits the colors of your image and is of no use to me or my screen. Same way I could give you my calibrated monitor profile and it could look terrible on your screen. Your profile is unique to only your machine. sRGB is the most common on the web and most accepted. Although I have been seeing AdobeRGB creeping into web graphics. It also has the fewest colors, but for web applications that is acceptable. My guess is your color conversion settings are wrong or using the wrong profiles. I would double check those and please, for the love of Jeebus, do not use your monitor profile as your colorspace. I'm not pointing fingers, I've just seen that countless times and I needed to rant a bit. As for Safari color management, I've seen some strange things happen there too, but I don't remember if it was only .PNG images.

Hi Ebby,

I've got my images working on both Firefox & Safari now, but in 'Color LCD'. If I try converting them to sRGB the colours will fade out when I look at them in my browser, is there a way of getting them to look the same as they do in Color LCD, without recalibrating my monitor?

Thanks

[Moogs]

There are a lot of misconceptions about color profiles in general and web images. It will *really* help you to understand things if you get a book like Real World Color Management from the great Bruce Fraser (God rest...). That's point number one: there's no substitute for doing your homework when it comes to the lunacy of color management systems.

Two, try to remember the following guidelines:

1) If you're serious about your pictures, you should calibrate your monitor using a 2.2 gamma, set up by a hardware calibration device like those from X-Rite or Gretag (the "eyeball" calibration software that comes with ColorSync is 100% worthless for image editing purposes). Macs and PCs, when calibrated properly, do NOT display images any lighter or darker than the other. They may out of the box in some cases, but that's because they're never properly calibrated out of the box.

2) NEVER tag or convert your images to a monitor profile. This is not the purpose of monitor profile, and will actually cause you more headaches as you send the images around.

3) sRGB is, for all intents and purposes, the "standard" color space for jpeg/web images. If you have a PSD or TIF or RAW file that is not tagged with sRGB, and you need to put a version online, do the following:

a) make all your edits to the image, save.

b) create a duplicate, resize as needed (usually down-sampling using bicubic sharper), flatten and choose Edit > Convert to Profile > sRGB.

c) Save for Web at 50-80 quality, depending on the purpose and size of the image, and your bandwidth targets. Some people don't include the profile, I do. Most browsers will simply ignore it AFAICT and so no harm is done in that case. But for browsers that do handle it, it may make things display a little nicer. Truthfully I think the ICC profile is a moot point for the web, even though it's critically important for print and local viewing.

I have done many image galleries for professional purposes and always get good results when I target the images to sRGB. This includes tests done on Safari, Firefox on both platforms, and IE 6 on Windows. Both with calibrated and uncalibrated monitors. Note that if someone who doesn't know what they are doing has assigned the wrong profile to their monitor, you're screwed. Always make your images for the crowd that does know what they're doing, not the other way around, which is the usual practice for web design (i.e. design for 800x600 even though the large majority of those people don't know what resolution is). Luckily over 75% all all web users now browse at 1024x768 or higher, so it's easier to justify designs that don't cater to the ridiculous 800x600 camp nowadays.

Note: these web profiling tips will NOT work if you target other popular, larger color spaces like Adobe RGB. Think of sRGB as the "lowest common denominator" in "viewport" color spaces. It was designed with the web / general monitors in mind essentially, whereas other spaces like Adobe RGB and Pro Photo were designed for large gamut inkjet printers and high end monitors.