Using AVIF images with Gatsby
In the latest version of Gatsby you can now generate and display AVIF images. This is a next generation image format that can give considerably better compression than JPEG or WebP. It has been driven by Netflix, and is based on the AV1 video codec. It is the first new browser image format since Google released WebP in 2010. As of January 2021 it's only supported by Chrome, but will be in Firefox soon and other browsers to follow. You can safely use it now as long as you provide a fallback for other browsers. Gatsby can handle that all automatically for you, generating all of the different formats and image sizes.
AVIF images are only supported when using the beta Gatsby image plugin. To use this, install the latest versions of gatsby-plugin-image, gatsby-plugin-sharp and gatsby-transformer-sharp. See the docs for gatsby-plugin-image to learn how to set up the plugin and use the components. AVIF images are not generated by default, but you can follow these instructions to enable it.
AVIF compression can achieve considerably better results than both JPG and WebP. You can get better quality images and smaller file sizes at the default settings. The image below allow you to compare output formats generated by gatsby-plugin-sharp, displayed via gatsby-plugin-image.
Usually, gatsby-plugin-image will generate a picture tag that delivers the best format for your browser. In order to demonstrate the different formats here, we have instead forced each of the images below to use just one format. The numbers shown below are for the 1x density images, used on desktop. On smaller or hdpi screens your browser may download a different image, so the filesizes might not match.
This colourful image has good results at default quality (50) in all formats. AVIF is around half the size of JPEG, with WebP in between.
AVIF 37kB (only visible in Chrome)
This is a challenging image, with the large gradient in the sky. You can see that at the default quality (50), there is highly visible banding in the JPEG. There are artifacts in the WebP image, but these are less pronounced than in the JPEG. For acceptable results the quality level would need to be increased for both, though there are diminishing returns with WebP. I achieved reasonable results for JPEG and WebP at 80, at the cost of significantly larger filesize, but removing the artifacts entirely required increasing it to 100, which gave massive filesizes. The AVIF however has a good smooth gradient with barely visible artifacts at quality 50, and is still a significantly smaller file size.
JPG quality 50 - 111kB
JPG quality 80 - 197kB
WebP quality 50 - 87kB
WebP quality 80 - 150kB
AVIF 71kB (only visible in Chrome)
This image has a smaller colour palette, so compresses very well. The default quality is acceptable in all formats. Proportionately the filesize improvements are even greater in the WebP and AVIF images though, even at the same quality.
AVIF 14kB (only visible in Chrome)
Images via Unsplash