Return to the weblog archive, return to the home page or learn more about the site

PNG Graphics Tip

Posted Jul 13, 2008 in Web Design

I’m starting to get into using 24-bit PNG files more and more, though I’m reluctant to use large-dimension images in this format as their file sizes tend to balloon. However, it’s hard to resist the charm of a logo that can be seamlessly matted over just about any kind of background.

One trick — which works best with mostly flat-coloured logos — that I’ve discovered is to posterise the logo with Photoshop before rendering out to a transparent PNG. Posterise discards colour information from the file — most people set the intensity level quite high, which results in a visible banding through the image. I’d take that down to about 7-9, which preserves the integrity of the image but makes the colour range more managable. I’ve seen file sizes halve without any serious image degradation.

Here’s a close-up crop of a before-and-after posterise treatment. Can you can spot a substantial difference?

Illustration of the before and after effects of the Posterise command

2 comments so far

Comment by Aleks Bochniak at 20 August, 11:20 am

Good tip Nick. I assume the ‘after’ sample is the one on the bottom, which looks a lot more defined and readable.

Comment by Nick Caldwell at 20 August, 12:31 pm

Yep, the second one is “after”. And you’re right, it does improve the contrast on the text a little.

Commenting is closed for this article.