Funny you call it magic, what actually does the conversion is Imagick.

In my project I have it integrated in the upload process. You upload a PNG/JPG and it does its thing. Since it’s written in PHP (my project), and PHP has an extension to call Imagick, I didn’t need to write any complicated code.

You can see on this page if your programming language of choice has any integration with Imagick.

But there’s always the command line interface. Depending on your process it may be easier to create a script to “convert all images in a folder”, for example.

but 2KB vs 200KB is paltry on even a terrible connection in the 2000s).

You still need to resize the images and choose the right ones (even if only for the device’s performance).

So we might as well do that small extra step and add conversion to the process.

What I really wish is that we could get more browsers, sites, and apps to universally support more modern formats to replace the overly bloated terribly performing and never correctly pronounced animated formats like GIF with something else like AVIF, webm, webp (this was a roughly ~60MB GIF, and becomes a 1MB WEBP with better performance), or even something like APNG…

Isn’t that the users’ fault? And of the websites for allowing those huge GIFs.

Apparently browsers have supported MP4 for a long time.

https://caniuse.com/mpeg4

Even using the highest compression levels, barely any difference. Not worth it

If I understand correctly gzip, brotli and similar are best used to compress text.

Font files also shouldn’t be compressed. A TTF file compresses a bit, but a WOFF2 file will be even smaller than that (and WOFF2 also doesn’t compress well). So might as well use WOFF/WOFF2

For most of the images that I tried you can only see differences with the images side by side. It’s really subtle.

I do have one example for which my config must be bad, compresses a lot but introduces a lot of noise

In case you still can’t load the image, for the largest width the JPG file has 229.9KB, WEBP has 123.5KB, AVIF has 72KB.

I’m working on a project which generates images in multiples sizes, and also converts to WEBP and AVIF.

The difference in file size is significant. It might not matter to you, but it matters to a lot of people.

Here’s an example (the filename is the width):

Also, using the <picture></picture> element, if the users’ browsers don’t support (or block) AVIF/WEBP, the original format is used. No harm in using them.

(I know this is a meme post, but some people are taking it seriously)