How I Optimize PNGs was first published onFarai's Codelab.

Here’s how I optimize images in three steps:

1. Resize the image usingImageMagick to the desired sizes. The size I usually convert to is a 240px width image for small screen devices likefeature 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 useInkscape (specificallyinkscape-cli) since it’s very good at rendering SVGs.
2. UseCompressPNG.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 thenuseZopfliPNG 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 avery 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 alsoconvert 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, considersupporting my work by:

• sharing my work,
• refering me for a job (or hire me for freelance work),
• sponsoring me onPatreon,
• 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),
• orbuy a domain on Namecheap with my affiliate link.