Image Optimization (PNG)

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:

  • -9 is the highest compression level.
  • -strip removes all metadata from the image.
  • --allfilters tries 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

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.