TIP: My PNG images appear lighter on the web than in Photoshop. Why?
Here is a problem that I have had for some time with Photoshop. When I design something in PS and hit "Save for Web & Devices" to export web safe portable network graphics (PNG) file then it always appears lighter (washed out) on the web than I originally see it in Photoshop. For example, notice the difference when viewing the gradient in PS (left) and on the web browser (right).
It came out that it's a simple color balance issue. When an image is created in RGB, PS embeds a color profile to the document to keep colors correct in color managed applications. But, the Internet isn't color managed so when image is saved for web the color profile is stripped and the colors shift slightly.
All browsers assume an RGB image is sRGB and many formats like GIF and PNG don't support color spaces. This problem only affects those viewing the image on a Mac, not Windows since Windows, and browsers on Windows aren't as picky about color balance (gamma 1.8 vs gamma 2.2), and they are much more forgiving when using sRGB.
Solve it
Knowing that above, I now needed to get my Photoshop showing the same colors as they appear on web browsers on a Mac (PC was okay, they just come a little darker then).
Firstly, to be safe I needed to change PS color settings from Edit > Color Settings and changed my RGB working space to "sRGB IEC61966-2.1".
Secondly, I made sure I was working on Macintosh RGB proof color space by View > Proof Setup > and select Macintosh RGB or Monitor RGB when I work on a Mac. That way I create artwork correctly from the beginning. And that should do the trick!
Good luck!
Tip: You can toggle between Windows and Macintosh proofing views by pressing "Command" + "Y".
Note: If you work on a Mac but have your monitor calibrated to 2.2 Television Gamma, then you probably don't experience that problem.



Comments [0]