Automating Image Compression

This post greatly over simplifies how many issues come up optimizing images. Also, the Github workflow doesn't commit the optimized images back to git, so this would have to run before packaging and would have to run on every image, not just new images added.

Ideally, images are compressed _before_ getting committed to git. The other issue is that compression can leave images looking broken. Any compressed image should be verified before deploying. Using lossless encoders is safer. However, even then, many optimizers will strip ICC profile data which will make colors look off or washed out (especially if the source is HDR).

Finally, use webp. It's supported everywhere and doesn't have all the downsides of png and jpg. It's not worth it to deploy these older formats anymore. Jpgxl is ever better, but support will take a while.

Anyway, I made an ImageOptim clone that supports webp encoding a while ago[0]. I usually just chuck any images in there first, then commit them.

[0]: https://github.com/blopker/alic

No trying to diss, but Figma literally has a drop down change the image quality thus the file size for PNG.

https://help.figma.com/hc/en-us/articles/13402894554519-Expo...

TFA for me gives the same link for the "Compressed using pngquant - 59,449 bytes" as the first image: "test1.png" and it's about 191 KiB.

I think it's a copy/paste error for replacing the link with test3.png instead of test1.png gives the correct file.

For the curious ones here are the result of compressing both losslessly with WEBP:

    195558 test1.png
    102750 test1.webp

     59449 test3.png
     38304 test3.webp

P.S: that picture is called a "test card": https://en.wikipedia.org/wiki/Test_card