gatsby-plugin-image: blurred placeholders limited to local images only?

Question

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?

Tasadduq Burney · Answer

Short answer
No. gatsby-plugin-image does not officially support blurred or tracedSVG placeholders for remote image URLs. Those placeholders are generated only for local File nodes processed by gatsby-transformer-sharp during the Gatsby build. Passing placeholder="blurred" to a remote image is accepted by TypeScript but produces no blurred placeholder markup; it silently falls back to dominantColor or none.

Confirmed behavior

Blurred and tracedSVG placeholders require a local image file handled by gatsby-transformer-sharp.
Remote URLs bypass the sharp pipeline, so the placeholder option is ignored for those sources.
No documented Gatsby release plan adds build-time remote fetching plus sharp processing for placeholder generation.

Workarounds

Pre-download remote images locally. Fetch CMS or CDN images into your repository before gatsby build, then reference them as local files. This increases repository size and build time.
Supply a manual blur hash. Generate a blur hash externally for each remote image and pass it via blurDataURL with placeholder="blurred". This avoids local downloads but requires external processing and may not match sharp's output quality.
Community plugins. Some community plugins fetch remote images during build. These are not officially maintained by the Gatsby core team and may lag behind Gatsby v5 changes.

Verification
<StaticImage
  src="https://example.com/image.jpg"
  placeholder="blurred"
  alt="Remote image"
/>
Run gatsby build and inspect the production HTML. If no blurred placeholder SVG or inline image data appears, the remote image is bypassing the placeholder pipeline. Then copy the same image into src/assets/, reference it locally, rebuild, and confirm the placeholder markup appears.

Assumptions and uncertainty
This assumes Gatsby v3 through v5 with gatsby-plugin-image and gatsby-transformer-sharp installed. Future releases could add remote-image placeholder support, but nothing in current release notes confirms that. I cannot confirm whether a specific community plugin works with your setup without knowing which plugin you are considering.

If you plan to use a community remote-image plugin, share the plugin name so I can assess whether it is likely compatible with your Gatsby version.

gatsby-plugin-image: blurred placeholders limited to local images only?

Goal

Constraints & Uncertainty

Questions

1 answer

Short answer

Confirmed behavior

Workarounds

Verification

Assumptions and uncertainty

Your perspective belongs here.

0 question comments