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

Discussion in 'Photoshop Tutorials' started by bodhiSoma, Feb 21, 2008.

  1. bodhiSoma

    bodhiSoma Guest

    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
     
    bodhiSoma, Feb 21, 2008
    #1
    1. Advertisements

  2. bodhiSoma

    ronviers Guest

    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
     
    ronviers, Feb 21, 2008
    #2
    1. Advertisements

  3. bodhiSoma

    bodhiSoma Guest

    Thanks Ron! That helped quite a bit.

    Jason
     
    bodhiSoma, Feb 21, 2008
    #3
  4. 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
     
    Andrew Morton, Feb 21, 2008
    #4
  5. bodhiSoma

    ronviers Guest

    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
     
    ronviers, Feb 21, 2008
    #5
  6. bodhiSoma

    ronviers Guest

    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.
     
    ronviers, Feb 21, 2008
    #6
  7. 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
     
    Andrew Morton, Feb 21, 2008
    #7
  8. bodhiSoma

    Mike Russell Guest

    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, Mar 2, 2008
    #8
  9. bodhiSoma

    bodhiSoma Guest

    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
     
    bodhiSoma, Apr 11, 2008
    #9
  10. bodhiSoma

    Mike Russell Guest

    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, Apr 11, 2008
    #10
  11. bodhiSoma

    bodhiSoma Guest

    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
     
    bodhiSoma, Apr 27, 2008
    #11
  12. bodhiSoma

    bodhiSoma Guest

    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
     
    bodhiSoma, Apr 27, 2008
    #12
  13. bodhiSoma

    Pico Guest

    That ain't desaturated. It's glowing with over-saturation.
     
    Pico, Apr 27, 2008
    #13
  14. bodhiSoma

    bodhiSoma Guest

    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
     
    bodhiSoma, Apr 28, 2008
    #14
  15. bodhiSoma

    tacit Guest

    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.
     
    tacit, Apr 28, 2008
    #15
  16. bodhiSoma

    ronviers Guest

    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
     
    ronviers, Apr 28, 2008
    #16
  17. bodhiSoma

    tacit Guest

    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.
     
    tacit, Apr 29, 2008
    #17
  18. bodhiSoma

    ronviers Guest

    Well, I can't find a flaw in your reasoning but I am not happy about
    giving up that control.
    Thanks,
    Ron
     
    ronviers, Apr 30, 2008
    #18
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.