@gvrs/gatsby-transformer-blurhash

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

• CHANGELOG
• BlurHash

Prior art, inspiration

• @m5r/gatsby-transformer-blurhash
• gatsby-transformer-sqip

See also

• gatsby-transformer-image-mask — remove ragged edges from placeholders