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,436 B

SVG 3,534 B

SVG 3,228 B

SVG 16,869 B

SVG 10,140 B

SVG 1,753 B

Documentation & related links

• See the gatsby-image project README for documentation on using the plugin
• Read the docs:
  Using gatsby-image to prevent image bloat
  Using fragments in gatsby-plugin-sharp
• View the gatsby-transformer-sharp example at image-processing.gatsbyjs.org