Stop to that “Save For Web” color shift in Photoshop
Published on by Josh Nichols | Posts by This Author
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.
2.) Then, under Working Spaces, change the RGB dropdown to Monitor RGB - Display. This will Turn off color management for RGB images.
Proof setup
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.
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.
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: