Stop to that “Save For Web” color shift in Photoshop
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.
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
2.) Then, under
Working Spaces, change the RGB dropdown to
Monitor RGB - Display. This will Turn off color management for RGB images.
1.) In Photoshop, with your image open, make sure
View/Proof Setup/Monitor RGB is checked.
2.) Look to see if the proofing environment is active by making sure that
View/Proof Colors is checked.
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.
2.) Click the 2-up tab to see the original and the Web version side-by-side.
Preset, select your file format and quality settings.
Embed Color Profile and
Convert to sRGB. For the Preview option select
5.) When done, click
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: