AVIF crushes WEBP, PNG and JPEG image compression | AVIF 30kb vs. PNG 528 KB!?!
The above PNG export from Figma was 651 KB (3062 × 1558). Using ImageOptim (on the desktop) took ~20s to losslessly optimise it down to 528 KB.
This AVIF image file is 30kb!
Can I use AVIF? | 93.74% of users covered | https://caniuse.com/?search=AVIF
Of course SVG could be an option too – although not usually used in this way. But in this case, the Figma SVG export came out at 414 KB (there is a rasterised emoji in there, so it's not all vectors).
When I used ImageOptim to optimise it, I got it down to 291 KB (but it introduced some unwanted side effects – rare in my experience – which made it unsuitable for me anyway).
AVIF savings analysis when used across this blog
All original images used on this blog come in at 997.77 MB vs. 307.43 MB when converted to AVIF (67.7% reduction).Original → 44.5% reduction for optimised versions in their same formats (PNG, WEBP, JPG) → 43.6% additional reduction in AVIF format!?!
For this blog I've implemented a graceful fallback for the very few users who can't display AVIF files, where they fallback to the original unoptimised files.