How I Optimize PNGs

How I Optimize PNGs was first published on Farai's Codelab.

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 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.

Thanks for reading! If you liked this post, consider supporting my work by:

• sharing my work,
• refering me for a job (or hire me for freelance work),
• sponsoring me on Patreon,
• buying Me A Coffee,
• buying Me A Ko-Fi,
• sending me a tip on Paypal,
• buy something on Amazon with my affiliate link (I’ll earn a commision on this as an amazon affiliate),
• or buy a domain on Namecheap with my affiliate link.