"Save For Web" vs. "Save As…" Problem

B
Posted By
bodhiSoma
Feb 21, 2008
Views
1139
Replies
17
Status
Closed
I had saved a logo using "Save For Web & Devices" in PS CS3 (OS X 10.4.10). Wrote a bit of HTML with a background to match the background color of the logo but when I loaded the page, the logo was faded and clearly did not match the color specified in the HTML.

Went back into Photoshop, hit "Save For Web & Devices" again and noticed that the fading was on the preview page too. My settings were JPG @ 100%.

I closed out and used "Save As…", chose JPG as the method and it saved correctly.

What the heck is causing this? I prefer to use the former method since it offers a preview but not if it’s horking up my images!

Thanks much in advance,
Jason

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

R
ronviers
Feb 21, 2008
On Feb 21, 2:42 am, bodhiSoma wrote:

What the heck is causing this? I
Thanks much in advance,
Jason
Hi,
The ‘save for web’ utility adds an sRGB color profile. This may be different than your working space. You can check this by Edit>Color Settings-Working Spaces from the menus.

Ron
B
bodhiSoma
Feb 21, 2008
On Feb 21, 5:38 am, "" wrote:
Hi,
The ‘save for web’ utility adds an sRGB color profile. This may be different than your working space. You can check this by Edit>Color Settings-Working Spaces from the menus.

Ron

Thanks Ron! That helped quite a bit.

Jason
AM
Andrew Morton
Feb 21, 2008
wrote:
The ‘save for web’ utility adds an sRGB color profile.

Ummm…. doesn’t it /remove/ the colour profile (thus reducing the file size by a few KB), as at least most current browsers ignore the colour profile and assume sRGB?

Andrew
R
ronviers
Feb 21, 2008
On Feb 21, 7:11 am, "Andrew Morton"
wrote:
wrote:
The ‘save for web’ utility adds an sRGB color profile.

Ummm…. doesn’t it /remove/ the colour profile (thus reducing the file size by a few KB), as at least most current browsers ignore the colour profile and assume sRGB?

Andrew

Hi Andrew,
I think you’re right. I saved an image with an sRGB profile and the same image with no management and got a difference in size of 3147 bytes. And here all this time I thought I was embedding a profile. Thanks for clearing that up for me.
Ron
R
ronviers
Feb 21, 2008
On Feb 21, 7:11 am, "Andrew Morton"
wrote:
wrote:
The ‘save for web’ utility adds an sRGB color profile.

Ummm…. doesn’t it /remove/ the colour profile (thus reducing the file size by a few KB), as at least most current browsers ignore the colour profile and assume sRGB?

Andrew

Now I’m not so sure again. I notice there is an ICC profile checkbox in the save for web dialog. I always leave that checked so I think I *have* been adding an sRGB profile.
AM
Andrew Morton
Feb 21, 2008
ronviers@ wrote:
On Feb 21, 7:11 am, "Andrew Morton" wrote:
ronvi…@ wrote:
The ‘save for web’ utility adds an sRGB color profile.

Ummm…. doesn’t it /remove/ the colour profile (thus reducing the file size by a few KB), as at least most current browsers ignore the colour profile and assume sRGB?

Andrew

Now I’m not so sure again. I notice there is an ICC profile checkbox in the save for web dialog. I always leave that checked so I think I *have* been adding an sRGB profile.

Well, if the default for a browser is sRGB, then I suppose there wouldn’t be any point actually including it if that’s the chosen colour profile.

Andrew
MR
Mike Russell
Mar 2, 2008
"bodhiSoma" wrote in message
I had saved a logo using "Save For Web & Devices" in PS CS3 (OS X 10.4.10). Wrote a bit of HTML with a background to match the background color of the logo but when I loaded the page, the logo was faded and clearly did not match the color specified in the HTML.
Went back into Photoshop, hit "Save For Web & Devices" again and noticed that the fading was on the preview page too. My settings were JPG @ 100%.

I closed out and used "Save As…", chose JPG as the method and it saved correctly.

What the heck is causing this? I prefer to use the former method since it offers a preview but not if it’s horking up my images!

Hi Jason,

As Ron and others have mentioned, this has to do with the embedded profile. The colors are changing because Photoshop uses this profile to convert your colors for display, and most browsers don’t.

I recommend that you open the Edit>Color Settings dialog and change the working space to sRGB. Also set your "Profile mismatch" options to "Ask when opening" so that you will get a warning in the future if you open any files with no profile, or Adobe RGB files, which is what I suspect the logo is.

That still leaves the problem of how to make your logo and background match. Based on your original post, I take it that the file with the logo is close to the correct color. Open the file, dupe the image, and use "Edit>Convert to Profile" to convert the logo image to the sRGB profile. Then use the Info Palette, or the color picker and eyedropper, to read the hex color of the part of the logo you are matching. That’s the value you want for your html background.

I recommend that you save your logo in png format for the web because this is a lossless format that will give you a better match. There are also other advantages, such as transparency support that you may find helpful later on – for example you may be able to use png’s transparency capability instead of matching the background color. If you decide to stick with jpg, do a visual check afterward, since jpg is lossy, and can change colors significantly.

Mike Russell – www.curvemeister.com
B
bodhiSoma
Apr 10, 2008
Hi Mike,

Sorry for the extremely long lag in reply, the project had to be set aside for a while.

I’ve done what you suggested (changed my working space RGB to sRGB IEC61966-2.1 and checked off "ask when opening") but I’m still experiencing the same problem.

First, I’ve been editing the photo in Lightroom then exporting the images. When I check these pics in Preview, colors look correct.

When I open an image in Photoshop, I now have three options available: (1) Use the embedded profile, (2) Convert document’s colors to the working space and (3) Discard profile. If I choose #1 or #2, the image looks "correct" in Photoshop but in either case, when I use "Save for Web & Devices," I can see in the preview area that the image is back to its pre-Lightroom colors.

I can "fix" this now by simply using "Save As…" instead of "Save for Web & Devices but I’d like to be able to use the latter if possible.

Any thoughts?

Thanks much,
Jason
MR
Mike Russell
Apr 10, 2008
On Thu, 10 Apr 2008 16:22:13 -0700 (PDT), bodhiSoma wrote:

Hi Mike,

Sorry for the extremely long lag in reply, the project had to be set aside for a while.

I’ve done what you suggested (changed my working space RGB to sRGB IEC61966-2.1 and checked off "ask when opening") but I’m still experiencing the same problem.

First, I’ve been editing the photo in Lightroom then exporting the images. When I check these pics in Preview, colors look correct.
When I open an image in Photoshop, I now have three options available: (1) Use the embedded profile, (2) Convert document’s colors to the working space and (3) Discard profile. If I choose #1 or #2, the image looks "correct" in Photoshop but in either case, when I use "Save for Web & Devices," I can see in the preview area that the image is back to its pre-Lightroom colors.

I can "fix" this now by simply using "Save As…" instead of "Save for Web & Devices but I’d like to be able to use the latter if possible.
Any thoughts?

Thanks much,
Jason

Hi Jason,

Always select option 2 – convert to working space. If you select number 1, the image will stay in its original color space (Adobe RGB, as I recall), and it will lose colors when viewed on the web (or in any other non color aware app. I don’t think that’s your problem, though.

As an experiment, try using your monitor profile as the working space, or convert to that profile before saving. If that preserves the colors, then I would suspect that your monitor profile is off. For a CRT, run Adobe Gamma. For an LCD monitor, I would recommend loading a profile from the manufacturer, or using a calibration device, rather than using what you have now.

It’s been a while, so I don’t remember whether you posted any examples. If you haven’t already, upload some images to flickr.com, or a similar site, so we can see what you’re describing.

Mike Russell – http://www.curvemeister.com
B
bodhiSoma
Apr 27, 2008
Hi Mike, thanks for the reply. Now I’m just really confused…

The picture gets imported into Photoshop CS 3 no problem. I can even save the picture and if I view it with Finder (OS X), it looks correct.

But when I view the picture with Firefox, it looks completely desaturated. Here’s an example:

http://pho7o.com/images/DSC_4001.jpg

….and yet if I send this picture to a friend as an attachment and they open it locally, the saturation is correct.

I suppose I could fix some setting in Firefox but that will only help me, not everyone who sees my pics.

Thanks,
Jason
B
bodhiSoma
Apr 27, 2008
Well this is interesting… If I save the file as a png, the saturation looks correct (in Photoshop, Finder AND Firefox).

I can’t think of any reason I’d *have* to use JPG over PNG so I’ll just stick with PNG.

Thanks!,
Jason
P
Pico
Apr 27, 2008
"bodhiSoma" wrote in message
Hi Mike, thanks for the reply. Now I’m just really confused…
The picture gets imported into Photoshop CS 3 no problem. I can even save the picture and if I view it with Finder (OS X), it looks correct.

But when I view the picture with Firefox, it looks completely desaturated. Here’s an example:

http://pho7o.com/images/DSC_4001.jpg

That ain’t desaturated. It’s glowing with over-saturation.
B
bodhiSoma
Apr 28, 2008
On Apr 27, 12:47 pm, "Pico" <pico at idrailogid.ten> wrote:

That ain’t desaturated. It’s glowing with over-saturation.

Perhaps I picked a bad photo as an example. That was shot in a car with very low light so the streetlights cast some really crazy colors. Given it was shot in RAW and that the JPG I linked earlier was losing all its color info, that’s actually the pic right out of the camera (no tone, color, sharpening, nada).

Here’s that same pic but one saved as JPG, one saved as PNG (how I *wanted* it too look):

JPG: http://pho7o.com/images/DSC_4001.jpg
PNG: http://pho7o.com/images/DSC_4001a.png

I’m guessing the problem is with Firefox, from what I’ve heard it doesn’t read color profiles which would explain why it looks fine everywhere but Firefox.

Assuming this is correct — and I’m no expert so it might very well not be — I suppose I could always have Photoshop not use any profile. Unfortunately, that would make my exports from Lightroom useless and that’s where I do 95% of my adjustments.

Thoughts?

TIA,
Jason
T
Tacit
Apr 28, 2008
In article
,
bodhiSoma wrote:

I’m guessing the problem is with Firefox, from what I’ve heard it doesn’t read color profiles which would explain why it looks fine everywhere but Firefox.

Many browsers don’t display color profiles, or don’t display color profiles by default. Don’t embed profiles in images intended for the Web.


Photography, kink, polyamory, shareware, and more: all at http://www.xeromag.com/franklin.html
R
ronviers
Apr 28, 2008
On Apr 27, 10:25 pm, tacit wrote:
Don’t embed profiles in images intended for the Web.

Photography, kink, polyamory, shareware, and more: all athttp://www.xeromag.com/franklin.html

Are you sure? I know that you are an expert but that doesn’t sound right. I have been embedding sRGB profiles with everything I send out on the web and I haven’t noticed a problem. I mostly use Firefox but also post a lot of images to forums.

Thanks,
Ron
T
Tacit
Apr 29, 2008
In article
,
"" wrote:

Are you sure? I know that you are an expert but that doesn’t sound right. I have been embedding sRGB profiles with everything I send out on the web and I haven’t noticed a problem. I mostly use Firefox but also post a lot of images to forums.

The profile makes your file size bigger, but does not improve the quality of the image–many browsers do not do color management, and those that do assume sRGB anyway if there’s no profile.


Photography, kink, polyamory, shareware, and more: all at http://www.xeromag.com/franklin.html
R
ronviers
Apr 29, 2008
On Apr 29, 5:49 pm, tacit wrote:
In article
,

"" wrote:
Are you sure? I know that you are an expert but that doesn’t sound right. I have been embedding sRGB profiles with everything I send out on the web and I haven’t noticed a problem. I mostly use Firefox but also post a lot of images to forums.

The profile makes your file size bigger, but does not improve the quality of the image–many browsers do not do color management, and those that do assume sRGB anyway if there’s no profile.


Photography, kink, polyamory, shareware, and more: all athttp://www.xeromag.com/franklin.html

Well, I can’t find a flaw in your reasoning but I am not happy about giving up that control.
Thanks,
Ron

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections