Company
Date Published
Author
Salma Alam-Naylor
Word count
2624
Language
English
Hacker News points
None

Summary

AVIF is a new image compression format that offers 30% better compression than current alternatives such as WebP, and is optimized for the web with a low computation footprint and open source status. Image formats play a crucial role in website performance, especially when it comes to loading times and Core Web Vitals scores. The HTML `<picture>` element allows websites to serve different image formats to browsers that support different formats, using the `srcset` attribute to provide multiple media types and the `sizes` attribute to describe the final rendered image width. Lazy loading is also a strategy to load resources such as images only when needed, reducing the amount of data transferred over the network and improving user experience. AVIF offers better compression and smaller resulting file sizes than WebP, but its adoption may be limited by browser support at present. To get started with using AVIF on your website, you can convert existing images to AVIF format using the Contentful Images API or native HTML `<picture>` element.