Ways to reduce image file size (while keeping transparency)

A thread with some tips & tricks, tools and suggestions to keep size down on images that demand a transparent background or need to be reduced image file size.

Some great tools

When reducing PNG to 256< colors you keep the alpha channel at reduced colors. Best for flat / line style graphics. Also, ImageAlpha automatically runs ImageOptim. Another neat info… ImageOptim includes SVGO reducing the size of SVGs.

Using a CSS mask

And this nice little trick of using a regular JPEG with a size reduced PNG as mask.
Huge saving at full color depths using old image formats and a bit of CSS.

Suggest your own workflow or tricks below …


I use the same workflow as Max but I think it might be interesting to include other tools that can also work in image weight reduction.

Here are a couple of them mentioned in other posts:

And here is the free web application version of Kraken:

1 Like