Webinar

“Digging into Gatsby 5’s Slice API” Register now

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Gatsby SQIP plugin

Generates vectorized primitive version of images to be used as preview thumbnails.

:hand: Usage

GraphQL

image {
  sqip(numberOfPrimitives: 3, blur: 0),
  resolutions {
    ...GatsbyContentfulResolutions_withWebp_noBase64
  }
}

React

Pure HTML

Coming soon. Doing some preparations first.

Gatsby Image

const Img = require(`gatsby-image`)

<Img
  resolutions={{
    ...image.resolutions,
    base64: image.sqip
  }}
/>
© 2022 Gatsby, Inc.