Using Gatsby Image

Traced SVG Placeholders

Generates a traced SVG of the image and returns the SVG source as an ”optimized URL-encoded” data: URI. This provides an alternative to the default inline base64 placeholder image.

To make use of this technique, you can apply processing to an image with a GraphQL query by applying a traceSVG argument and the appropriate fragment applied.

Unsplash SVG Image Gallery

SVG 9,401 B
SVG 3,571 B
SVG 3,199 B
SVG 17,530 B
SVG 10,138 B
SVG 1,706 B

Documentation & related links

Gatsby