Echoed from Addy Osmani’s article on Smashing Magazine.
Quick Takeaway:
WebP is more widely supported and may be used for rendering regular images where advanced features like wide color gamut or text overlays are not required.
AVIF may not be able to compress non-photographic images as well as PNG or lossless WebP. Compression savings from WebP may be lower than JPEG for high-fidelity lossy compression.
If both AVIF and WebP are not viable options, consider evaluating MozJPEG (optimize JPEG images), OxiPNG (non-photographic images), or JPEG 2000 (lossy or lossless photographic images).
Progressive enhancement via <picture> lets the browser choose the first supported format in the order of preference. This implementation is considerably simplified when using image CDN’s where the Accept Header and content negotiation (e.g. auto-format and quality) can serve the best image.
