gatsby-plugin-image: blurred placeholders limited to local images only?
0 reputation · 29 Feb 2024, 15:39 UTC
Goal
We want GatsbyImage or StaticImage to display a blurred placeholder for images that are fetched from remote URLs (e.g. a CMS or CDN) rather than from the local file system.
Constraints & Uncertainty
The Gatsby documentation (v3‑v5) states that placeholder="blurred" and placeholder="tracedSVG" are only generated for images that pass through gatsby-transformer-sharp, which requires a local File node. Remote images bypass this pipeline, so the placeholder is silently dropped or falls back to dominantColor or none. No release notes indicate a change to this behavior, and the current TypeScript types still accept placeholder="blurred" for remote sources, creating a type‑safety gap.
Questions
- Is there an official or supported method to generate blurred placeholders for remote images without first downloading them locally?
- Will future Gatsby releases (v5+ or beyond) add a build‑time fetch + sharp pipeline to support remote‑image blur hashes?
- What community‑recommended workarounds exist that balance build performance with visual fidelity?