AVIF Arrives, Sanity’s Promise Fulfilled
We now support AVIF for superior compression without compromising visual quality, resulting in smaller file sizes and better performance.
Espen Hovlandsdal
Principal Software Engineer at Sanity
Knut Melvær
Head of Developer Community and Education
Published
This poetic plea posted on GitHub was the final push we needed to prioritize and deliver AVIF support for image transforms:
Four years and more, a promise once was made,
To bring forth AVIF in all its grace,
Yet still we wait, in hope’s long shadow laid,
With eager hearts and tear-streaked, weary face.
So it’s with elation and great joy we can declare the following verse from the rooftop of the Sanity head quarter:
Oh joyous day, the wait is finally done,
AVIF arrives, a new age has begun.
No more the tears, the longing or the pain,
As Sanity's embrace doth AVIF gain.
Taking off the AI-powered tudorian bonnet to get down to the facts.
AVIF offers superior compression compared to formats like JPEG and WebP, resulting in smaller file sizes without compromising visual quality. This translates to faster load times and improved performance, especially on mobile devices and slower networks.
Sanity projects that use ?auto=format or .auto('format') will now deliver AVIF for supported browsers. You learn more in the documentation, and we recommend looking into the image URL helper library when you integrate images from Sanity in your applications.
How the AVIF pipeline works
Generating AVIF images, especially with many variations and transformations, can be computationally intensive if done on-demand. To ensure a speedy experience, we've implemented an optimized system.
When an image is requested with the auto=format parameter, Sanity checks if the browser supports AVIF. If so, we aim to return an AVIF image. However, to avoid blocking the initial request, we will quickly deliver the next best format like WebP or JPEG if an AVIF version is not yet available.
In the background, we queue the image for AVIF conversion. This happens asynchronously, so subsequent requests can be served the optimized AVIF version straight from cache. The result is fast initial load times plus the benefits of AVIF for future visitors.