Optimizing PNGs for Size and Quality
Images are a crucial part of a website, but are also expensive in terms of bandwidth and loading time. This guide will list down the necessary steps to optimize your images for size and quality.
Note: This guide is for those who have a few images, and a lot of time to optimize them. We are going to use the best tools, and the best settings to get the best results.
Tools
For png images, we are going to use the obscure ECT (Efficient Compression Tool) to get the best compression.
Installation
Since ECT is not available in most package managers, you will have to compile it from source, or download the latest precompiled binaries from GitHub.
Usage
To compress a png image, use the following command:
ect -9 -strip --allfilters /*.png
To break it down:
-9is the highest compression level.-stripremoves all metadata from the image.--allfilterstries all available filters to get the best compression.
If you really want to get the best compression, you can use the --allfilters-b flag, which tries all available filters, including brute force filters.
Even --allfilter can take a long time, so be prepared to wait. On my Mac with an M2 Pro cpu, it can take up to 3 minutes for a single image.
Resources
- Efficient Compression Tool
- Comparison of lossless image compression tools
- Comment on Hacker News about ECT
Future Optimizations
Instead of sticking to a single tool, using a script that tries multiple tools and settings to get the best compression would be a good idea. This would be a good project for a weekend.