View Full Version : Color Management for Web Upload


Francis Perez
07-05-2006, 04:48 PM
Sorry for a really newbi question but here goes...

When i edit photos, i usually convert RAW using bridge camera raw then convert to PSD.

after doing all the manipulations and editing.. i usually use SAVE FOR WEB of CS2 for upload to flickr...

thing is, the photos loose the saturation and pizaz of the original image specially after upload to flickr....

is there a way to proof the photos while editing ... using PROOF COLOR option in CS2?

any ideas guys?

thanks so much.

Louie Aguinaldo
07-05-2006, 05:54 PM
Your images are probably using the Adobe RGB Profile. The web cannot read Adobe RGB Profiles and will interpret the image in sRGB mode, that's why the colors and tones of the images look off. Simple solution is to Convert Profile your image to sRGB prior to saving for web.

Francis Perez
07-05-2006, 07:13 PM
ok will check that sir.. most probably nga.. when you shoot raw you use ADobe RBG as your colour space sir?

do i convert during raw conversion? or as last step before saving to web?

is it good to use the SAVE FOR WEB option of photoshop cs2 or better to just use the plain SAVE AS JPG?

Louie Aguinaldo
07-05-2006, 07:36 PM
Adobe RGB is the better color space to use.
But if you will just be posting on the web, or just be viewing on your computer, use sRGB.
If you will be printing in mini-labs, use sRGB as they can't handle Adobe RGB.
If you will be sending your images to a press, like for a magazine, etc... then use Adobe RGB.

For your second question, the advantage of using Save for Web is that you come out with a smaller file size. Try it out. Test a single file. Save one using Save as JPEG and one Save for Web, use the same compression. You will notice the save for web is significantly smaller in file size.

ed_canuto
07-06-2006, 09:41 AM
This is the same problem that is bothering me also. I edit in the sRGB working space, when I save(save for Web) the photo for web upload, I see a red cast and a little difference in the colors as compared to the colors I intend to save. Why is this happening? Did I miss a step/process for me to achieve the colors I want for Web display?

As a way of Soft proofing my pics for web output I choose this option in PS: View-->Proof Setup-->Monitor RGB. Is this a corect way of soft proofing my pics since I will use it for Web output display only? Or should I stick to the default Proof setup of View-->Proof Setup-->Working CMYK? Or there is a better way of doing this?

Please help because I can't get consistent colors for my pics.

Louie Aguinaldo
07-06-2006, 09:53 AM
No, never softproof using the Monitor RGB. The monitor RGB is only used by Photoshop to understand how your monitor renders colors. That is if your monitor has been calibrated. which means, we never have to select the monitor rgb for anything, it is used automatically by photoshop.

If your color space is sRGB, you don't need to softproof. What you see is it.
Otherwise, if you will softproof for the web use sRGB not CMYK or anything else.
sRGB is the color space for the web.

ed_canuto
07-06-2006, 10:03 AM
Hi Louie

Now that clears it all up. Thanks for the tip, I was doing it wrong all along. :(

Cesar Parroco
07-06-2006, 04:50 PM
I almost have the same problem.

I shoot with AdobeRGB, convert my NEF to Adobe RGB, open in Photoshop in Adobe RGB since they said it has a wider colour gamut than sRGB.

However, when I sent it to the shop for printing I have to change everything to sRGB and then I loose all my creative intentions on rendering my color photographs since it was on a different color mode.

What can you suggest be the proper workflow for this?

Francis Perez
07-06-2006, 04:51 PM
i just checked the file i uploaded.. it was not in ARGB its SRGB..

or is common that when you upload the pics some loss in saturation or brilliance will be evident

patmartires
07-06-2006, 06:12 PM
Francis if you are going to batch process a lot of raw images you can run the image processor script in cs2 and there's an option to convert it all to sRGB and resize to fit dimensions for web :) so if you have a hundred raw files and you want to quickly make jpeg outputs for web thats wat i do :)

Louie Aguinaldo
07-06-2006, 06:20 PM
I almost have the same problem.

I shoot with AdobeRGB, convert my NEF to Adobe RGB, open in Photoshop in Adobe RGB since they said it has a wider colour gamut than sRGB.

However, when I sent it to the shop for printing I have to change everything to sRGB and then I loose all my creative intentions on rendering my color photographs since it was on a different color mode.

What can you suggest be the proper workflow for this?

Though some people may disagree with this, for practiality, if all your images are going to be either shown on the web and be printed in mini photolabs don't use Adobe RGB as your color space. True it has a much wider gamut than sRGB. But neither the web or minilabs can make use of Adobe RGB anyway. Thus you are editing colors on images which may not be rendered in the output anyway.

If you do stick to Adobe RGB, then make a set of those images that you plan to print but prior to saving convert profile to sRGB. You can make a photoshop action for that conversion so that you can easily do the same procedure each time.

Louie Aguinaldo
07-06-2006, 06:51 PM
i just checked the file i uploaded.. it was not in ARGB its SRGB..

or is common that when you upload the pics some loss in saturation or brilliance will be evident

Hmmmm... no there should be no loss in saturation or brilliance when uploading. What exact procedure did you do to check if the files were sRGB? Was it when you opened in photoshop?

What is your default color space in photoshop?

Would you remember if ICC Profile was checked when you did save for web?

mykl mabalay
07-07-2006, 02:48 PM
Save one using Save as JPEG and one Save for Web, use the same compression. You will notice the save for web is significantly smaller in file size.

sir, will the image quality remain the same for both options?

Louie Aguinaldo
07-07-2006, 11:19 PM
sir, will the image quality remain the same for both options?


As far as I know, the quality will be the same. One thing I notice is that when one uses save for web, all exif data is erased. This might be one of the reasons why the resulting file sizes are smaller.

leni llapitan
07-09-2006, 11:04 AM
please pardon this amateurish question....is the option to save for web in sRGB only available in cs2? i tried looking for the option to convert from adobe RGB to sRGB and i cant seem to find it on photoshop 7....please help...thanks

Louie Aguinaldo
07-09-2006, 03:59 PM
please pardon this amateurish question....is the option to save for web in sRGB only available in cs2? i tried looking for the option to convert from adobe RGB to sRGB and i cant seem to find it on photoshop 7....please help...thanks

If I remember right it is under the "image" heading.... look for "convert to profile", I believe it was under some subcategory. In CS2 it was moved to under the "edit" heading.

Francis Perez
07-09-2006, 09:51 PM
as usual sir louie is right.. the photos was converted from NEF to PSD and it was indeed in ADOBE RGB.... convert to sRGB then no problem with web uploads..

thanks so much sir...

in camera.. when i shoot adobe rgb.. it seems less saturated than srgb.. is this how it should be? was thinking its like that because it lends to more SATURATION control in photoshop.

Louie Aguinaldo
07-09-2006, 10:22 PM
as usual sir louie is right.. the photos was converted from NEF to PSD and it was indeed in ADOBE RGB.... convert to sRGB then no problem with web uploads..

thanks so much sir...

in camera.. when i shoot adobe rgb.. it seems less saturated than srgb.. is this how it should be? was thinking its like that because it lends to more SATURATION control in photoshop.

In Windows, everything is default sRGB. It cannot read any other profile, so if you try to display an Adobe RGB file it will be interpreted as an sRGB file - that's why the saturation changes, etc.

An Adobe RGB file will only appear accurately in what are called ICC Aware programs such as Adobe Photoshop. More and more graphic programs and image viewers are ICC aware.

leni llapitan
07-09-2006, 10:38 PM
If I remember right it is under the "image" heading.... look for "convert to profile", I believe it was under some subcategory. In CS2 it was moved to under the "edit" heading.

thank you sir! i will try it!

Francis Perez
07-09-2006, 11:34 PM
sir lou, what i was saying that IN CAMERA (via lcd) when i shoot a scene with SRGB and Adobe RGB, the Adobe rgb looks paler, less saturated as compared to the srgb in camera which appears more vivid (all other settings being equal like tone, hue etc...)..

why is that?

Louie Aguinaldo
07-10-2006, 01:24 PM
sir lou, what i was saying that IN CAMERA (via lcd) when i shoot a scene with SRGB and Adobe RGB, the Adobe rgb looks paler, less saturated as compared to the srgb in camera which appears more vivid (all other settings being equal like tone, hue etc...)..

why is that?

What camera are you using?
I am afraid I haven't experienced shooting while set to Adobe RGB. I shoot in RAW which allows me to do all the settings during post processing.

I have two suspicions.
1. Check the parameters you are using. It could be that the accompanying parameters set with your sRGB and Adobe RGB settings might be different. One might have high contrast and saturation, while the other one low.
2. It could also be that the LCD is set only for sRGB viewing. Maybe the LCD can't read the Adobe RGB properly. Almost all digital devices are default sRGB. Although I would think that the camera's built in software should be able to render Adobe RGB captures acurately with the LCD. I have to do some testing to check it out.

Nono Felipe
09-05-2006, 02:50 PM
Francis, hope you don't mind that I piggy-back on this thread.

I'd like to seek the help of our Color Management gurus in understanding this whole concept.

Here are my premises:

- I am using a PB 12" G4 and my wife's 12" iBook.
- I have created a monitor profile for both machines respectively using a Gretag Macbeth Eye-One display
- Since my monitor (PB's LCD panel) sucks (can only get a luminance reading of about 60), I have no choice but to use the "easy" mode in Gretag's calibration software. If I choose "advanced," I will never be able to get a decent profile because I cannot reach the suggested luminance setting even with the brightness of this monitor at maximum. The same for my wife's iBook.
- I do this "calibration" about once every two weeks.
- I shoot using sRGB since my output goes to either of two things: web or developing lab (DPI or Fuji)
- I use Whibal cards to determine proper white balance in-camera

Here are the things I don't understand:

Case 1) I have finished processing an image. It is still in the sRGB color space. I hit "Save for web" and what I see in that dialog box are desaturated colors. I proceed with saving it. I open the image in firefox and see exactly what I saw in the "Save for web" dialog box. I open the image in Safari and see much better colors.

Case 2) Prior to saving for the web, I convert the image to my current monitor profile. When I hit "Save for web" there are no changes at all. Colors are the same as my original image. I proceed with saving the image. I open the image in Firefox and see no change in colors from the original image (unlike in Case 1). I open the image in Safari, I get the same results as Firefox.

Case 3) I will not use "Save for web." Instead, I will use "Save as." The image remains in the sRGB color space; I do not convert to my monitor's profile. I open the file in Firefox and see less saturated colors. I open the file in Safari and see much better colors - exactly like the original.

My test is found here (http://www.nonofelipe.com/temp/test.html). Please view using both Safari and Firefox. In my PB and using my wife's iBook, I see identical images (all three the same) using Safari. When using Firefox, the middle image has more saturation and is closer to the image I'm working with using Photoshop.

What makes things worse is that I have asked some people to view the same test on their machines using both Firefox and Safari. Results are varied. A few said that all three images are identical in Safari. Some say there are differences in Safari. All have agreed that Firefox does not produce identical images. Some of these people have calibrated their displays, and some have not.

My question now is, what is the best way to publish images online retaining the closest colors to the original as possible given the fact that browsers interpret profiles differently. Should I convert my images to my current monitor profile each time I publish them online or am I better of not doing so?

Also, why does Photoshop desaturate the images using Save For Web when the assumption is that the browser can handle sRGB? Why does photoshop not desaturate for Save For Web when the image is converted to my current monitor profile?

Thank you very much in advance.

Louie Aguinaldo
09-05-2006, 06:38 PM
Hi Nono,
1st. I suspect that your color settings in adobe photoshop are set to adobe rgb color space, that's why when you try save for web it looks desaturated - because you are saving for the web a file that is still in Adobe RGB.
Check your settings.

2nd never ever convert to monitor profile. There is absolutely nothing you should do with your monitor profile other than create it. To convert to monitor profile is a sure fire recipe of coming out with off colors. Your monitor profile is created for your system, and your system alone so that programs that have color management incorporated could display colors in the way they were meant to be seen.

3rd. I checked your images and I see no difference between viewing them on Microsoft Internet Explorer and Firefox. To solve your problem check your color settings. If your RGB color space is Adobe RGB, then make sure to convert to sRGB before saving for web.

Nono Felipe
09-05-2006, 06:46 PM
Hi Nono,
1st. I suspect that your color settings in adobe photoshop are set to adobe rgb color space, that's why when you try save for web it looks desaturated - because you are saving for the web a file that is still in Adobe RGB.
Check your settings.


Hi Louie, thanks for the reply. My color settings in Photoshops are set to sRBG. That is my working RGB color space.


2nd never ever convert to monitor profile. There is absolutely nothing you should do with your monitor profile other than create it. To convert to monitor profile is a sure fire recipe of coming out with off colors. Your monitor profile is created for your system, and your system alone so that programs that have color management incorporated could display colors in the way they were meant to be seen.

Thanks for the tip. I figured that was the wrong piece to the puzzle. Thanks for confirming it.


3rd. I checked your images and I see no difference between viewing them on Microsoft Internet Explorer and Firefox. To solve your problem check your color settings. If your RGB color space is Adobe RGB, then make sure to convert to sRGB before saving for web.

It's Safari and Firefox that has a difference. Internet Explorer and Firefox show the same images.


Thanks very much.

Louie Aguinaldo
09-06-2006, 09:07 AM
Hi Louie, thanks for the reply. My color settings in Photoshops are set to sRBG. That is my working RGB color space.




Hmmm... that's strange.
Does it happen with all images or a particular set?
What are the color management policies set in your photoshop? RGB : Preserve embedded profiles? Convert to working RGB? Off?
And what are you set for profile mismatches and missing profiles?

With regards to the difference between Safari and Firefox, my suspicion is Safari might be ICC aware since it is a mac program.. firefox isn't. So maybe the image is carrying a different color profile and you aren't aware of it.... that's why maybe safari and firefox see it differently. Do you still have the original file of the image you posted?

Nono Felipe
09-06-2006, 10:10 AM
My Photoshop settings are as follows:

Working space: sRGB
ColorManagement Policies: preserve embedded profiles
For profile mismatches: Ask when opening

image shot in sRGB. I brought my powerbook to the service center, forgot to backup that particular shoot before doing so. The original image is in the PB. Sayang.

Earl Gonzalez
09-06-2006, 03:10 PM
My question now is, what is the best way to publish images online retaining the closest colors to the original as possible given the fact that browsers interpret profiles differently. Should I convert my images to my current monitor profile each time I publish them online or am I better of not doing so?

Also, why does Photoshop desaturate the images using Save For Web when the assumption is that the browser can handle sRGB? Why does photoshop not desaturate for Save For Web when the image is converted to my current monitor profile?



:Grin: sRGB is arguably the current target RGB ColorSpace for internet publishing because the world wide web is not color managed. sRGB is a generic monitor-type profile that tells "average" 2.2 gamma monitors how to display color.

The internet and sRGB are based on "Window's" 2.2 monitor gamma; the monitor brightness gamma shifts when we "Save for the Web" or when viewed on the internet, browsers. The reason being, 2.2 gamma files (colorspaces like sRGB or AdobeRGB) display lighter on noncolor-managed 1.8 gamma "Mac" monitors. Likewise, 1.8 Mac gamma files (colorspaces like AppleRGB or ColorMatchRGB) display darker on noncolor-managed 2.2 gamma monitors. To fix this you need to "calibrate" the Mac to 2.2 monitor gamma. However, take note that 1.8 "Mac" gamma is a shifty proposition in a 2.2 gamma Microsoft Windows PC.:)


As for Photoshop... Browsers, will display the file on 2.2 gamma monitors, based on the sRGB profile. If the file is based on sRGB and our monitor gamma is 2.2, you should see very little colour shift. However, in the case of AdobeRGB; Outside of color-managed applications like Photoshop, this colour space is no longer being Converted into MonitorRGB... You need to convert first to sRGB before saving for the web. :)

Hope this helps Nono. :Grin:

Nono Felipe
09-06-2006, 04:20 PM
sRGB is arguably the current target RGB ColorSpace for internet publishing because the world wide web is not color managed. sRGB is a generic monitor-type profile that tells "average" 2.2 gamma monitors how to display color.

The internet and sRGB are based on "Window's" 2.2 monitor gamma; the monitor brightness gamma shifts when we "<snipped>

I was actually reading those same articles Earl. sRGB is the preference for internet publishing, which is why I shifted from shooting in Adobe RGB to sRGB this year. Last year I shot purely in Adobe RGB but knowing little about color management, I did not notice its benefits. Early this year I realized that since my output is only web and/or developing lab, I'm better off using sRGB.

But my question is still unanswered, why is there a discrepancy between "Save As" and "Save for web?" In my case, the image is already in sRGB prior to saving for the web.

Earl Gonzalez
09-06-2006, 06:30 PM
But my question is still unanswered, why is there a discrepancy between "Save As" and "Save for web?" In my case, the image is already in sRGB prior to saving for the web.

mmmmmmm... Perhaps, it might be your optimization settings... or since you're running a calibrated system, info tags on your image files that are needed to render accurate colour detail may be lost while saving for web since, this option compresses the image and removes metafiles...:Thinking: But that's really strange since you said that you're attaching ICC profiles right? Are you saving the files in progressive format?

Nono Felipe
09-07-2006, 07:45 AM
I think I've figured it out. I tried it across a number of Mac systems and they all give me the same inferred conclusion: Saving for the web produces desaturated images IN THE SAVE FOR WEB DIALOG BOX ONLY. Once the saved for web image is opened back in Photoshop, everything is okay. Opening the same image in an ICC-enabled web browser (ex. Safari) will produce the original colors as well.

I will be trying this on a PC maybe today. At least for the Mac platform, my conclusion above seems to be correct.

Amiel_Mercado
09-07-2006, 08:05 AM
I almost have the same problem.

I shoot with AdobeRGB, convert my NEF to Adobe RGB, open in Photoshop in Adobe RGB since they said it has a wider colour gamut than sRGB.

However, when I sent it to the shop for printing I have to change everything to sRGB and then I loose all my creative intentions on rendering my color photographs since it was on a different color mode.

What can you suggest be the proper workflow for this?

Oh no, now I know why the print shop is calling me.

Louie Aguinaldo
09-07-2006, 08:34 AM
I almost have the same problem.

I shoot with AdobeRGB, convert my NEF to Adobe RGB, open in Photoshop in Adobe RGB since they said it has a wider colour gamut than sRGB.

However, when I sent it to the shop for printing I have to change everything to sRGB and then I loose all my creative intentions on rendering my color photographs since it was on a different color mode.

What can you suggest be the proper workflow for this?

Check out this thread http://www.digitalphotographer.com.ph/forum/showthread.php?t=520

Louie Aguinaldo
09-07-2006, 08:47 AM
I think I've figured it out. I tried it across a number of Mac systems and they all give me the same inferred conclusion: Saving for the web produces desaturated images IN THE SAVE FOR WEB DIALOG BOX ONLY. Once the saved for web image is opened back in Photoshop, everything is okay. Opening the same image in an ICC-enabled web browser (ex. Safari) will produce the original colors as well.

I will be trying this on a PC maybe today. At least for the Mac platform, my conclusion above seems to be correct.

Yes, please let us know what you find out in the PC.
It is strange because your observation that you see somewhat desaturated colors in the save for web dialog box is normal if you were working with Adobe RGB. If your image is sRGB, you should be seeing the same colors when you select save for web.

Did you shoot the images in RAW or JPEG?
If you shot in RAW, what software did you use to convert to JPEG or TIFF?
Is this phenomenon new, or has this been happening for sometime now?
You mentioned that you tried it across a number of mac systems, do you have that exact file so we can check it out?

Nono Felipe
09-07-2006, 10:20 AM
Did you shoot the images in RAW or JPEG?
If you shot in RAW, what software did you use to convert to JPEG or TIFF?
Is this phenomenon new, or has this been happening for sometime now?
You mentioned that you tried it across a number of mac systems, do you have that exact file so we can check it out?

Hey Louie, I shot the image in JPEG using the sRGB color space in the camera. I don't have the original file because it's in my laptop which is in the service center. As soon as I get it back I'll furnish you a copy of the image for reference purposes.

Salamat!

Earl Gonzalez
09-07-2006, 10:54 AM
I think I've figured it out. I tried it across a number of Mac systems and they all give me the same inferred conclusion: Saving for the web produces desaturated images IN THE SAVE FOR WEB DIALOG BOX ONLY. Once the saved for web image is opened back in Photoshop, everything is okay. Opening the same image in an ICC-enabled web browser (ex. Safari) will produce the original colors as well.

I will be trying this on a PC maybe today. At least for the Mac platform, my conclusion above seems to be correct.

Glad, you solved the puzzle... Please fill us in on the PC side of things...

All the Best. :Grin:

Nono Felipe
09-07-2006, 11:15 AM
Here is a screenshot of the discrepancy. Left image is the one open in Photoshop. Right image is the one in the "Save for web" dialog box. Notice the desaturation on the right image. Image is in sRGB.

http://static.flickr.com/90/236512765_8e29f2d59f.jpg (http://www.flickr.com/photos/nonofelipe/236512765/)
Photo of flowers (c) Philip Sison - shot during my wedding

Earl Gonzalez
09-07-2006, 12:30 PM
Here is a screenshot of the discrepancy. Left image is the one open in Photoshop. Right image is the one in the "Save for web" dialog box. Notice the desaturation on the right image. Image is in sRGB.

http://static.flickr.com/90/236512765_8e29f2d59f.jpg (http://www.flickr.com/photos/nonofelipe/236512765/)
Photo of flowers (c) Philip Sison - shot during my wedding

While viewing this in the "Save for web" window... Are you viewing this using: Uncompensated color, Standard Windows or Macintosh color or Using the document colour profile? :)

Nono Felipe
09-07-2006, 11:17 PM
While viewing this in the "Save for web" window... Are you viewing this using: Uncompensated color, Standard Windows or Macintosh color or Using the document colour profile? :)

Earl, where are those settings? Are they within the Save for web dialog box? Can't see them.

Earl Gonzalez
09-08-2006, 01:49 PM
Earl, where are those settings? Are they within the Save for web dialog box? Can't see them.

:) Click the small right facing triangle under the words: "Powered by Image Ready" in the Save for web dialog... You won't miss it.

Nono Felipe
09-08-2006, 04:59 PM
Hey Earl, that did it. THANKS VERY MUCH. :)

You the man! My problems are solved. :)

Earl Gonzalez
09-08-2006, 07:53 PM
Hey Earl, that did it. THANKS VERY MUCH. :)

You the man! My problems are solved. :)

Cheers Nono! :D

Glad I could help Bro.! :Grin: