WebP and AVIF images with Gatsby

Last updated on March 3, 2021

One of my favourite features of Gatsby is that it can process your images. This goes from simple size optimisations to compression. Gatsby even allows you to use the brand-new AVIF image format and the not-so-new WebP format.

With gatsby-plugin-image

Using the plugin, you can access the WebP and AVIF versions of the image that you want by adding them to the formats array.

{
  childImageSharp {
    # Other options include width/height (set both width and height to crop),
    # grayscale, duotone, rotate, etc.
    gatsbyImageData(formats: [AUTO, WEBP, AVIF])
  }
}

No plugin

If you’re not using gatsby-plugin-image, which is my case, you can still take advantage of the WebP conversion by grabbing the WebP source directly.

{
  image {
    id
    childImageSharp {
      # width, height and quality are optional
      fixed(width: 300, quality: 70) {
        srcWebp
        src
      }
    }
  }
}

Then use the <picture> element to serve WebP images to browsers that support it.

<picture>
  <source srcSet={image.srcWebp} type="image/webp" />
  <img src={image.src} alt="Book cover" loading="lazy" />
</picture>

That’s it, enjoy WebP images