Tutorial6 min read·Updated September 5, 2026

Gatsby Image: WebP Without a Heavy GraphQL Pipeline

Gatsby builds are infamous for image processing time. The plugin is doing real work on huge sources. Convert photos to WebP at 1600 px before they enter `src/images` and builds drop minutes, not seconds.

gatsby-plugin-image still reads the file

Sharp generates multiple widths and formats. Starting from a 200 KB WebP instead of a 4 MB JPEG is the same visual result at quality 80 and a much shorter Sharp queue.

Why it matters

CI timeouts on image-heavy blogs are common.
Contentful/Sanity sourced nodes can still be huge remotes.
Local conversion avoids another npm plugin.

How to do it

Convert local image directories.
For CMS, convert before upload (see Contentful/Sanity guides).
Keep gatsby-plugin-image; just feed it saner files.

Settings that work

1600 px / 80%. Match maxWidth in your GraphQL fragments.

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

Yes, via gatsby-plugin-image. Pre-conversion still speeds the build.

Not if you still want srcset. Pre-convert instead of removing the plugin.

Keep reading

Tutorial6 min read

WebP in Next.js

next/image can serve WebP, but huge files in /public still hurt. How to pre-convert static assets and CMS images for Next.js App Router.

Platforms6 min read

WebP for Contentful

Contentful's Images API can format=webp, but huge masters still cost transform time and origin weight. Pre-convert assets to WebP.