“Good developers know how things work. Great developers know why things work.” - Quoting the forward page of High-Performance Browser Networking by Ilya Grigorik.
Web Performance Optimization has witnessed fast growth and rapid emergence in the past few years. Speed is no more a feature. It is an essential requirement driven by experimental results on user experience, user retention, and conversions. I often believed that performance is mainly a back-end issue until I realized that front-end issues account for 80% of total time - The Performance Golden Rule as described by Steve Sauders in High-Performance Web Sites.
Meet AVIF (AV1 Image File Format), the new light-weight format that compresses to a smaller size than JPEG or WebP. Currently, support is limited, but it is supposed to land on Chrome 85 and Firefox 80. While it slowly makes its way into modern browsers, AVIF is most likely to receive a significant boost in the upcoming months.
Chrome 85 will release the new image format with three primary motivations:
- Reduce bandwidth consumption to load pages faster and reduce overall data consumption as AVIF offers significant file size reduction for images compared with JPEG or WebP.
- HDR color support
- Ecosystem Interest: Facebook, Netflix, YouTube, and others have expressed an interest in shipping AVIF images on the web.
The good news behind the fact that AVIF was added to the chromium-browser engine is that other browsers like Edge are more likely to support it at a later stage.
AVIF delivers a significant file reduction in compared to WebP, JPEG, J2K, JXR, and just merely everything else on the Web. More likely, users are about to experience 50% smaller file sizes than JPEG and 20% smaller file sizes than WebP.
By using the <picture> element in native HTML, the browser will load the first <source> it supports. If it fails to load the <source>, the browser will use the default <img> instead.
Chief Operating Officer, LeLaboDigital