How I Optimize PNGs

Update 13 March 2024: I just use OxiPNG Squoosh now. It’s so much easier.

Here’s how I optimize images in three steps:

1. Resize the image using ImageMagick to the desired sizes. The size I usually convert to is a 240px width image for small screen devices like feature phones that fit the media query of (max-width: 400px) and (-webkit-device-pixel-ratio: 1).
   • If it’s a non-photogenic image inside a JPEG, I convert the image sizes to PNG using it.
   • If I’m converting an SVG, I use Inkscape (specifically inkscape-cli) since it’s very good at rendering SVGs.
2. Use CompressPNG.com to restrict the color palette as much as I can using a slider. This makes a massive difference in file sizes.
3. Finally, I then use ZopfliPNG to recompress the PNG for a slight size reduction. PNGs use some sort of DEFLATE compression algorithm to compress all the image data—Zopfli is a very good, but slow implementation of DEFLATE. It’s a ~7% reduction which is just a handful of kilobytes.
4. Depending on the file size reduction and quality, I might also convert it to Lossless WebP or AVIF. This isn’t as common since PNGs ae really good at non photographic images.

This process is based on my naive understanding of how PNGs work. I want to make a comprehensive post on how PNGs work and on how to use that understanding to better compress PNGs. There’s a lot about the compression techniques, color indexing, sampling and the like.

Glossary

non-photographic image

not a photo like illustrations, graphics and diagrams.