There is a polyfill for old browsers but our recommendation would be to use the graceful degradation of the <picture> tag which falls back to <img> if .avif or .webp is not supported.
FLIF seems to compress higher but to my knowledge there is no major browser support. AVIF support is scheduled for Firefox 80 and Chrome 85 by the end of this month (August 25).
Nice to note, though, is that FLIF tech will not just be thrown away. FLIF was superseded by FUIF which was then superseded by JPEG-XL. It's doesn't have as great compression in all cases as FLIF, but I'm very optimistic about JPEG-XL being a highly adopted new image format.
Good catch! We were moving quickly trying to get this blog post out before the standard was implemented. We've updated this and it's now a smaller file size.
The .avif file in the example was accidentally saved as larger than the JPEG file which makes it a poor use case. We compressed the .avif file with the correct compression quantizer with avifenc to higlight the difference.
The JPEG file is 112kb and the .avif file is now 55kb.
We're really excited about this image format -- for the same image quality .AVIF compresses 50% smaller than JPEG, 20% smaller than WebP and is free to use.
We help daring brands optimize their business outcomes through continuous testing & personalization. Every idea, every product, every experience — driven by data. Imagine that. That’s Clearhead.
Headquartered in Austin, TX, Clearhead was founded in 2012 by former ecommerce executives obsessed with the intersection of design, analytics and product innovation. Today, we provide user experience design, product development, analytics and strategic consulting solutions grounded in pioneering testing and personalization expertise. Our diverse roster of clients includes Adidas, CVS, Express, Patagonia, Tesco, Tory Burch, Ulta, Vitamix and Whole Foods.
