Getting the most out of .PNG

To answer our questions about image types for your web page, Jeff Atwood is there. “When it comes to image formats on the internet, it’s generally a three-way tie between JPEG, GIF, and PNG. Deciding which image format to use is relatively straightforward; you choose lossy JPEG when you’re saving continuous-tone photographic images, and you choose between lossless GIF or lossless PNG when you’re saving images with large blocks of the same or similar colors. See my comparison of GIF/PNG and JPEG if you’re not clear on what the difference is. But the choice between GIF and PNG is no contest. PNG is a more modern and vastly improved version of GIF that (almost) completely obsoletes it. You should always choose PNG over GIF, except in the following two circumstances:

1. You want an animated graphic. PNG doesn’t support animation. GIF does.
2. Your image is extremely small, on the order of a few hundred bytes. In my experience, GIF filesizes are smaller in this scenario.

In every other way, PNG is the natural heir to GIF. It’s copyright-free, it can store all bit depths, it can represent alpha channels, and it offers more efficient compression. But as great as PNG is, there are a few things you should know about PNG to get the most out of it.

Let’s start with a representative image. I took a quick screenshot of this website, along with all the browser chrome, transparency, and shadows. ClearType font rendering is on, and there’s a nice mix of text, graphics, and UI. It’s a perfect candidate for the lossless PNG file format, because there are large areas of the same colors and hard transitions between them. We want nice, crisp transitions between the white and dark areas of the screenshot.”

See the examples and read the full article at Coding Horror. Includes tips on interlacing, and optimization of your PNG.