Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub

@gvrs/gatsby-transformer-blurhash

npm (scoped) NPM PRs Welcome

Generate BlurHash placeholders for images.

Configuration

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `@gvrs/gatsby-transformer-blurhash`,
  ],
};

Usage example

Fetching data

imageSharp {
  gatsbyImageData(
    placeholder: NONE
  )
  blurHash(
    componentX: 3,
    componentY: 4,
    width: 32
  ) {
    base64Image
    hash
  }
}

Rendering

import { GatsbyImage } from "gatsby-plugin-image";

const Image = ({ gatsbyImageData, blurHash }) => (
  <GatsbyImage
    image={{
      ...gatsbyImageData,
      placeholder: {
        fallback: blurHash.base64Image,
      },
    }}
  />
);

Parameters

  • width (int, default: 32)
  • componentX (int, between 1 and 9, default: 3)
  • componentY (int, between 1 and 9, default: 4)

Returns

  • hash (string) — base 83 data returned by BlurHash
  • base64Image (string) — base 64 encoded image

Additional documentation

Prior art, inspiration

See also

© 2022 Gatsby, Inc.