Optimizing media for the web: PNG images

PNG images, like other media formats, can be compressed in two different ways: Lossy and Lossless.

Lossy compression

PNG images are compressed using lossless compression (that is, without degrading the quality) with an algorithm called DEFLATE.
However, reducing the number of colors of a PNG image can decrease its size significantly. That way the quality is affected, although this is not always noticeable.

Tinypng.org is a popular site that converts 24/32-bit PNG to 8 bits (that is, with a maximum of 256 different colors). This service uses software such as Pngquant to intelligently choose and remove the least important colors.
Usually image editing software like Photoshop do a very poor job converting 24/32-bit PNG to 8 bits.

For some images, especially if they are non-photographic, the number of colors can be further reduced. For example, Wikipedia's front page uses the following image (97.1 KB)

Using the open-source tool ImageAlpha, I reduced the number of colors to 32.

In this case, the result is about 70% of savings (29.8 KB), and as you can see, the image quality hasn't been much affected.

Lossless compression

Lossless compression is usually less effective, but is usually recommended because the image quality is not degraded during the process.
I further optimized the image above with ImageOptim, saving a few more bytes (8.1%)

Now the image it's only 26.8 KB

For Windows, a good alternative to ImageOptim is FileOptimizer, which also losslessy optimizes other file formats.