Consistent PNG quality across browsers

how to save a png

Here’s a helpful tip I got from my friend Olivier on how to save out your png’s to guarantee a consistent color/saturation quality across all browsers:

- in Photoshop, turn on proof colors (view -> proof colors)
- make sure your proof setup is set to “monitor rgb” (view -> proof setup -> monitor rgb)
- when you save for web, make sure you do 24 bit png, interlacing OFF, and uncheck convert to srgb

Voila.

16 Comments leave a comment below

  1. Good stuff! Thank you.

  2. I think that it’s worth noting that the “Convert to sRBB” option is in the little arrow dropdown on the right-hand side (above the “Interlaced” checkbox)

  3. The mysteries of cross-browser imagery consistency is now revealed! Thanks for the tip.

  4. danke! gerade für die semi-pros und autodidakten (wie mich) sind solche hinweise sehr hilfreich.

  5. This could be very useful ! Thank you

  6. Along the same lines –

    Setting Up Photoshop For Web, App and iPhone Development

    http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/

  7. Ah, thanks Tina but credit goes to the awesome Kyle, CTO of Cork’d.

  8. Or use Fireworks, which was made for this purpose.

  9. So, is there a way to turn ‘Proof colours’ on by default for every new file?

  10. Very interesting. I noticed this problem quite some time ago, but have being to lazy to dig the problem out.

    In fact at the time I just passed to another compression format.

  11. Good tip, thanks for sharing.

  12. There is another good article about saving for images for web here: http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

  13. not all the browsers support png

  14. As you can see on the links above, it’s not that easy. :) I believe this article is the least accurate tips of them.

  15. I second the Fireworks comment, Photoshop is for photo editing. People have been talking about this PNG color issue lately and I was like, wtf, I never noticed that – because Fireworks doesn’t have this issue with color spaces (call it a missing feature if you want, but it makes things simpler and that’s why Fireworks, not Photoshop, is my preference for web design).

Leave a Comment