The most efficient use of PNG

Original Jeff Atwood

Speaking of the image format used on the Internet, there are usually 3 kinds: JPEG, GIF, and PNG. It is relatively easy to decide which format to use: If you want to keep a photographic picture of continuous tones, select lossy jpeg, or if you want to save a picture with lots of same color blocks (or color blocks of similar colors), choose a lossless GIF or PNG. If you don't know the difference between these two types of image formats, you can flip through my previous blog post. However, the choice between GIF and PNG is not controversial. PNG has made great improvements to GIF, and the more modern version of Gif;gif has been deprecated by PNG. Unless you are in either of these scenarios, you should always choose PNG (not GIF):

1. You want an animation. PNG does not support animations, GIF support.
2. Your image is extremely small, almost hundreds of bytes. In my experience, the GIF file size will be smaller in this case.

In any other case, PNG is a natural alternative to GIF. PNG does not have a copyright issue, it can store all bits deep, supports alpha channels, and can provide more efficient compression. PNG is really great! However, there are a few things you need to know about PNG so that you can use it most effectively.

Let's take a look at a representative image. I did a screenshot of the codinghorror.com site, with a browser, transparency and shadows. ClearType font rendering is on. This diagram is a good mix of text, images, and user interfaces. Using a lossless PNG file format is a good choice, because there are large areas of the same color block, the boundaries between them are distinct. That's what we want!

The actual screen size of the screenshot is 1233 x 946. When I save it as a 24-bit PNG file in Paint Shop Pro, I see the following two file sizes:

• PNG (interleaved format) 288 KB
• PNG (non-interleaved format) 212 KB

So, we have the first lesson: never Save the interleaved PNG file .

• For progressive rendering only, the interleaved PNG will increase by 35%;
• Progressive rendering is confusing: the image starts out blurry and then becomes clearer. Philip Greenspun gave away, "the reader cannot tell when the image is loaded!" ”
• Standard PNG provides a perfect solution for progressive rendering without the need for interleaved formatting. They can be rendered from top to bottom, in a very straightforward way.

Compression to 212 KB is great for a large and detailed image. This is also a strong proof of the high efficiency of PNG image compression! However, we can do better! If we use Kensilverman's PNGOut (: http://advsys.net/ken/utils.htm) to process these two files, we can compress them smaller:

• PNG (interleaved format)KB
• PNG (non-interleaved format) KB

First, notice that PNGOut has abandoned the interleaved format. If your original PNG image is interleaved, you can expect the file size to be greatly reduced. But even if your PNG is not interleaved, pngout can also reduce the file size by up to 10% KB. I know, feel not a lot of slimming, but PNG is lossless compression Ah! JPEG is lossy, so the image quality becomes worse when the file size is reduced. PNG doesn't lose any image details, we just make them smaller. Students, this is free bandwidth Ah! is there anything better than that?

To see the true efficiency of pngout, I ran the tool on a subset of the/images directory. It should be explained that these images have been optimized before; I regularly run optipng on every file in this directory.

	OptiPNG	PNGOut
267 PNG files	4.40 MB	4.04 MB

It took some time to run the tool, but we got an extra 9% reduction in size for the PNG image, which was never done with OptiPNG. How is that possible?

When I first heard Ken Silverman's name, I felt familiar. Ken, the author of PNGOut, was the original creator of the Duke Nukem 3D game rendering engine, when the Prodigy was 18 years old.

Ken is so good that even John carmack--, the author of the two games of the destroyer and the Thunder Hammer, is respected by the programming community as a god-like presence. No wonder he's this little PNG optimizer, able to annihilation. Very optimistic about him!

If you are running a website, regardless of the size of the site, and no matter how many PNG images you use, you should use pngout to reduce their size. PNGOut can also turn existing GIF images into a better PNG format by the way. This tool is also extremely convenient to use! The following Windows command allows you to batch optimize all PNG images in a folder:

For%i in (*.png) do pngout "%i"/y

The optimization process using PNGOut is not particularly fast, but it doesn't matter. One-time optimizations can reduce the bandwidth 10%~30% of the image usage. Why not?

The most efficient use of PNG