When you capture a screenshot on your Mac, it will be saved in the PNG-32 format, with support for 16 million distinct colors and transparency. This means that the screenshot will perfectly capture every pixel on your screen, but having four 8-bit channels for red, green, blue and alpha (transparency) for every pixel makes the file very large. If you're interested, you can verify this yourself using pngcheck.

The first step is to reduce the color palette of the screenshot. This is a type of lossy compression called color quantization, which will reduce the number of distinct colors in the image. The pngquant command line utility is the perfect tool for this job

In 2013, Google released zopfli, which claimed to improve compression by 3-8% compared to zlib. The trade off for this improvement: waiting an extra 1-2 seconds. (There is no decompression penalty when viewing the compressed image).

pngquant 64 --skip-if-larger --strip --ext=.png --force "$1" zopflipng -y "$1" "$1"

What I love about Draw.io is its ability to use editable PNGs — an image containing the raw diagram data.

This allows you to publish a self-contained image file. And as the diagram is contained within the image, anybody with Draw.io can update it.

The PNG image file format supports embedded metadata in a number of ways. diagrams.net can export a PNG image of your diagram and include the diagram itself in the image, by including the XML code in the zTxt section of the image file.

Embedding the diagram as metadata in an image lets you more easily transfer the file between products, vendors, and platforms without data loss. By including the diagram, the image retains all of the data necessary to continue working on it in diagrams.net editor.

By default, lots of image editing tools save PNGs with 2^24 color depth, just in case.

So in Acorn, my image editor of choice, I’ve been taking special care to crank down the bit depth on PNGs in the export dialog. In many cases, I’ve cut image weight 80% or more by indexing colors to a palette of 256 or fewer values, with no loss of visual fidelity.

That PNG at full-color depth is about 379KB. Restricted to a palette of 32 colors, it’s 61KB. And that’s just at the export time: once I run them through ImageOptim, the optimized sizes are 359KB and 48KB.