Interface

Blog of Web Communications at the University of Missouri

Skip to search and archives

Photoshop's Save for Web window

Stop to that “Save For Web” color shift in Photoshop

Published on by | Posts by This Author

UPDATE: It seems that Adobe has addressed this issue in Photoshop CS5 and above, so this is no longer a problem. I’ll leave this post up for people still struggling with with color shifts in older versions.

Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?

The problem is with color profiles and here’s how to manage them.

Color profiles

Most Web browsers do not use color profiles (the exception is Webkit and Firefox), so you have to tone without them or you’ll get a color shift when you go from Photoshop to a Web browser making all your hard work toning moot.

1.) In Photoshop CS5+ with no documents open, go to Edit/Color Settings.

Photoshop menu

2.) Then, under Working Spaces, change the RGB dropdown to Monitor RGB - Display. This will Turn off color management for RGB images.

Photoshop menu

Proof setup

1.) In Photoshop, with your image open, make sure View/Proof Setup/Monitor RGB is checked.

Photoshop's menu

2.) Look to see if the proofing environment is active by making sure that View/Proof Colors is checked.

Photoshop's menu

Now you are working with an image as it will look in a browser.

Save for Web

1.) To save the images for Web, go to File/Save for Web & Devices and a new window will pop up.

Photoshop's Save for Web

2.) Click the 2-up tab to see the original and the Web version side-by-side.

Photoshop's Save for Web window

3.) Under Preset, select your file format and quality settings.

4.) Uncheck Embed Color Profile and Convert to sRGB. For the Preview option select Monitor Color.

Photoshop's Save for Web window

5.) When done, click Save.

The resulting image will look the same in a Web browser as it did in Photoshop.

More technical info

If you still want to figure out how to use color profiles in your photos on the Web, check out the article Save For Web, Simply. It does a good job in explaining what Photoshop is doing and how it applies to Web images.

If you’re as weird as me and find this stuff fascinating, you can learn even more with these articles:

20 Comments

  • Jon Bolden

    Thank you! This was really helpful. I’m a web designer but I’m not a monitor expert, so it was driving me nuts!

    • Raoul

      Thanks indeed :-)
      Very helpful, it solved my problem!

  • Lindsay

    Thank you very much. This was very helpful. :) Solved my problems as well.

  • Leon

    Josh, thanks! It was my headache for the last hour and your post was a cure :-)

  • Lauren

    Wow. There are many websites with articles on how to use color profiles for web design without any color shift, and this is the first and only one that has actually worked. If only I had read this much earlier! Thanks so much for this!

  • Jonathan Beech

    Fabulous just what I was looking for!

  • Robert

    Unfortunately this didn’t work for me, along with other solutions I have tried.

    My final picture after I’ve saved to web looks desaturated. I wonder if it is because I have a high gamut monitor (the dell u2410).

    If I view my images on my computer they look so faded, but a client posted them on facebook and they look fine.

    What am I missing?

  • Cami

    Awesome! This was so helpful. Thank you! Do you know how to do this in Lightroom? I’m trying to get them to match. Thanks again!!

  • Daniel

    *WRONG* *WRONG* *WRONG* *WRONG* *WRONG* *WRONG* *WRONG* *WRONG*

    Folks, this advice by the author is absolutely wrong and misleading. Please search out tutorials on the web on the subject of Photoshop color management from reputable experts/authors. Color Management is a rather complex and sometimes confusing subject but if you are serious about graphic design or digital photography, it is probably worth your time to study the subject.

    NEVER set your Photoshop working space to your monitor profile. Never. That will set your image up to use your (UNIQUE) monitor as the standard for the image. Your resulting image will look correct on YOUR monitor (and with no color shifts!) but ONLY ON YOUR MONITOR.

    Use an industry-standard colorspace like sRGB, AdobeRGB or ProPhoto. For output to the web, the common standard is sRGB. There may indeed be shifts in saturation, particularly if you are using a wide-gamut monitor and/or your source file is in a wide-gamut standard colorspace like AdobeRGB or ProPhotoRGB but:
    – the shifts will likely be minor unless there are highly-saturated colors in the image.
    – this is just how things work if you have a wide-gamut image and need to output it to sRGB for web-viewing.

    • Josh Nichols

      This post is not wrong and applies to specifically Web development.

      Any way you save your image, you will have no control over how it looks on other monitors, so frankly, color profiles mean nothing on the Web. At the very least, I don’t want my image shifting on my own computer.

      If you use a specific HEX color in your image to match a web design with colors set with CSS, a color shift during “Save For Web” is unacceptable. You would never be able to match your layout colors.

      When I wrote this post, this was a big problem for me and this method has worked for years. I test my sites on many different computers and have had no problems with color.

      While you are probably technically correct about color profiles, I think it only applies when sending the image to another person who can use color profiles or you are printing the image.

      In any case, Photoshop CS5 and newer has fixed this problem with “Save For Web” and you can use color profiles again.

      • Antonio

        While I agree with Daniel about color management in general, I still need to have consistent colors between Photoshop and the web, so I tried to reverse your approach.
        Leaving color management as needed for prepress purposes, I suppose all I have to do before saving a picture for the web is converting it to my monitor profile. Then, when I save a jpg of the image without embedding the color profile, I should have the same results described in your tutorial without loosing the possibility to print the original image taking care of color profiles.

        I’ve also tested my idea setting html colors via CSS to match the values obtained by the eyedropper in PS for some test pictures, and they match. They don’t, of course, before conversion to monitor profile.

        Anyway I’m still unsure about how to solve the problem for browsers assuming sRGB as the profile for untagged pictures.

    • Christine

      Daniel,
      Thank you for your explanation. That was extremely useful. It made me understand why I had the problem (wide-gamut image) and avoid thinking that I solved the problem when I rather created a problem by having colors look different, just on my own monitor. Color management is indeed a complex problem.

    • Antonio

      I’ve been thinking a bit about the reason why the suggestions given in this article are not so wrong (for web graphics design) as you can imagine.
      I would like to discuss my thought with you, with Josh and with every people interested, to investigate whether or not I’m approaching the problem in a correct way.

      Actually Photoshop never stops color managing a picture, even if no profile is assigned to it. What it does when a profile is not present is to assume working color space as the profile for the image.
      So what happens when the monitor profile is used?
      The algorithm applied by PS to compensate for the differences between image profile and monitor profile does simply nothing, because the two profiles are identical.
      That’s why any UNIQUE monitor profile makes an UNIVERSAL job.

      Since the colors of web graphics are not color managed by any browser, they will match with those of an image saved following Josh tips on every monitor, whatever browser is used.

      On the other hand, if you are a Photographer (like me), and you want to preserve the fine color balance of your images, at least for users whit color managed systems, you still need to embed ICC profiles in your pictures, and preferably convert them to sRGB.

      I suppose there is not a perfect way to have both purposes achieved (preserve color match with html graphics and preserve color balance). Anyway I would like to investigate further on this point.

  • JohnnyMao

    “Most Web browsers do not use color profiles (the exception is Webkit and Firefox)”. As of last month Chrome (WebKit) had 40% of the browser market and Firefox had 25%. So most web browsers do use color profiles.

  • Sandy

    Thank you for this! Every photo I was importing had a red hue, and these steps saved me!

  • Niladri

    Every image I was exporting had a red hue and was becoming flat, this really helped me a tonne. Thanks buddy.

  • Ken Wiatrak

    Josh,
    I tried your method with CS3. I checked, selected everything per your instructions. Unfortunately at the end of the process there is no option in CS3 (that I could find) in the “Save to Devices and Web” to uncheck “Convert to sRGB” no drop down (as in your screenshot) where I can select Preview: Monitor Color.

    As a result the original and preview display exactly the same shift (in saturation and a color shift from yellow to magenta) that I had been experiences and was the reason I had been searching the web for solutions. Any advice given I only have CS3?

    Regards,
    Ken Wiatrak

  • Markos Evans

    Thanks Josh

    Your a life saver! :) Cheers

Comments are closed.