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


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

  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:

  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).