Here we have more lossy tests of AVIF and WebP comparing to JPEG or PNG, but with the much smaller resolution and very close file size for testing the real-life usages. By using the <picture> tag, the priority is AVIF, WebP, and JPEG/PNG so all browsers can display.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="">
</picture>Tools
- avifenc for encoding AVIF
- cwebp for encoding WebP
- ImageOptim for optimising JPEG and PNG
These tools make sure that the results would be fair and reliable.
Quality
- AVIF: Default (–min Q 1, –maxQ 10; added –minalpha Q 1, –maxalpha Q 10 for images without backgrounds)
- WebP: 92
- JPEG: 55
- PNG: 40
AVIF is the base for the file size because of its superiority. PNG is not lossy, but dithering should be more defined when the colours are further reduced below 256 for the much smaller file size.
Results
All images are safe for work. Files of Bustycat are shrunk to 1600 × 1200 pixels (0.11), while files of 🔞Reconquest and 🔞Reconquest at Night are shrunk to 1400 × 1400 pixels (0.16).
Normal images
Images with the alpha channel
Conclusion
AVIF images with even the default quality still look decent, but the file size is not large comparing to other image formats. WebP, however, is not very superior to MozJPEG because the results are significantly closer. For lossy images with the alpha channel, both of AVIF and WebP are better regarding to the quality and file size, as PNG is always lossless and JPEG does not support the alpha channel.
Some people said the quality of most of images on the internet are higher than what people need, but the reality is they look bad instead. The main reason is the outdated JPEG format, but lacking optimisation like MozJPEG (ImageOptim uses) results in larger files too. Before AVIF and WebP become more widespread, optimisation for JPEG and PNG remains very important for saving data traffic.