comparing various image formats

I was looking into a couple of the current image formats to see which one produced the smallest files, by which I mean I didn't know where AVIF stood and wanted to check if I should switch away from webp to stretch out the 1GB free storage a bit more (and make the site easier to load for people with worse internet connections in the process). This isn't a super rigorous test, just clicking save as on a screenshot of Gran Turismo 7 at 720p coming out of my capture card upscaled to 1080p by OBS, with the compression quality set to 90 percent. The files came in at the following sizes (in descending order):

The images are not shown because I'm only interested in the file size difference and not a comparison of the compression artifacts.

If my screenshot program supported .jxl I'd try that too since I'm pretty sure it would come out smaller than the .webp, but it isn't supported yet for various reasons. For most things at this point, unless you need lossless images for art or low-resolution computer graphics or some other reason, you should probably be using webp. I know webp also has a lossless mode, but I tried encoding one of my drawings with it once and it lost some color accuracy so I'd say don't use that for lossless image encoding, use .png instead.

update: what's it like for pixel art games?

in the process of doing updates for sword of kumdor, I noticed the opposite thing happening, and this is as good an excuse as any to run comparisons for pixel art games. I ran the fifth screenshot from the sword of kumdor page through the same process of just clicking save as in my screenshot capturing program and got the following results (also in descending order):

which is pretty interesting. Now, I know I can optimize png file sizes with a tool like optipng, and after doing that the png came in at 9.4 KiB, but the first pass, brain off results here are interesting, and make me wonder if I should switch to avif for pixel art games.