Using Gatsby Image

Blur Up

The default Blur Up technique uses progressive loading to make a fast, visually pleasing experience without waiting for a full-resolution image with a blank screen.

Progressive Loading with Minimal Effort

The magic of Gatsby Image's Blur Up technique means that you can load an image at moderate resolution and not have to bother with creating a small thumbnail yourself. Gatsby Image will automatically create a tiny image from your source image and load it first for quick display while the larger image file is downloaded and displayed. Users first see a blurry lower-resolution image to help with perceived performance, while the larger image downloads and everything works automatically.

This technique is the default behavior when querying for an image with QraphQL and providing a fragment like GatsbyImageSharpFixed. If you don’t want to use the blur-up effect, choose a fragment with noBase64 at the end.

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