ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Frameworks & web · #gatsby
Add gatsby-plugin-image to generate multiple image sizes, modern formats, and lazy‑loading placeholders at build time, improving performance without runtime overhead.
Use Gatsby’s Deferred Static Generation (DSG) to cut build times on large sites. Learn the right pages to defer, how data flows, and operational checks to avoid stale content and latency spikes.
Learn how to add a local image with Gatsby’s StaticImage component so the build creates multiple resolutions, serves WebP/Avif, and shows a blur placeholder.
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.
Gatsby lets you pick SSG, DSG, or SSR per page. Here's a practical framework — with working code — for deciding which rendering mode each route actually needs.
Choose gatsby-plugin-image for automatic responsive images, lazy-loading, and WebP conversion. Avoid mixing with legacy gatsby-image to prevent import errors.
A step‑by‑step diagnostic guide for fixing Gatsby incremental build cache corruption and stale GraphQL data that causes schema mismatches or missing content in CI.
Decide whether to use gatsby-plugin-image or the legacy gatsby-image for image optimization in Gatsby, with a comparison table, implementation steps, and verification methods.
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.
graphql