AVIF Arrives, Sanity’s Promise Fulfilled (ssr)

Written by Espen Hovlandsdal, Knut Melvær

Missing Image!

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.

Sometimes it takes us time, but we’ll get there

We know that delivering on our promises is important. Even if it sometimes takes longer than we'd like, we remain committed to bringing the features that matter most to our users. With AVIF support for image transformations, we're excited to provide an even better experience for delivering performant images.

So let us cheer, developers all around,
For Sanity's pledge was true, and now is found.
The future bright, with images so clear,
AVIF and Sanity, a perfect pair.