ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how Gatsby's build-time image pipeline works, how to configure gatsby-plugin-image with StaticImage and GraphQL, and which mistakes break builds.
Gatsby images can push content around and delay paint. Learn how gatsby-plugin-image reserves space, generates responsive srcsets, and lazy-loads assets at build time.
Large images slow Gatsby sites. Use gatsby-plugin-image to lazy‑load, generate WebP/AVIF, and serve responsive images. This guide covers GraphQL integration, a worked example, trade‑offs, and a quick deployment checklist.
Replace manual srcset construction in Gatsby with the gatsbyImageData resolver, which generates WebP, AVIF, and resized variants during gatsby build.
Static Gatsby sites often ship bulky images that hurt performance. This post shows how gatsby‑plugin‑image solves that, with a hands‑on example, trade‑offs, and a quick start.
Gatsby's image pipeline can generate responsive WebP/AVIF variants and blur-up placeholders automatically, but uncontrolled processing causes layout shift and slow builds. Scope sources, set explicit sizes, and verify srcset output.
Choose gatsby-plugin-image for automatic responsive images, lazy-loading, and WebP conversion. Avoid mixing with legacy gatsby-image to prevent import errors.
gatsby-plugin-image moves image optimization to build time: resized WebP/AVIF variants, lazy loading, and placeholders. Here's a working blog setup, the build-time and Sharp trade-offs, and how to verify the LCP win.
gatsby
graphql