Here’s how I optimize images in three steps:
- 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).
- Use CompressPNG.com to restrict the color palette as much as I can using a slider. This makes a massive difference in file sizes.
- 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 slowimplementation of DEFLATE. It’s a ~7% reduction which is just a handful of kilobytes.
- 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.
- non-photographic image
- not a photo like illustrations, graphics and diagrams.