Gatsby SQIP Example

SQIP - pronounced \skwɪb\ like the non-magical folk of magical descent

It is a svg based implementation of low quality image previews (LQIP)

More precisely:
An algorithm calculates a primitive representation of your images based on simple shapes like circles, ellipses, triangles and more. These will be embedded in your initial HTML payload. This will help your users to get a feeling of how the pictures will look like, even before they got loaded by their (probably) slow connection.

Configuration

For an up to date list of possible configuration options, please check out the plugins readme.

Configuration and file size recommendations:

The maximum size of your previews really depend on your current html payload size and your personal limits

• Smaller thumbnails should range between 500-1000byte
• A single header image or a full sized hero might take 1-10kb
• For frequent previews like article teasers or image gallery thumbnails I’d recommend 15-25 shapes
• For header and hero images you may go up to 50-200 shapes

Generally: Keep it as small as possible and test the impact of your image previews via webpagetest.org on a 3G connection.

Usage

Getting the data via GraphQL:

image {
    sqip(numberOfPrimitives: 12, blur: 12, width: 256, height: 256),
    sizes(maxWidth: 400, maxHeight: 400) {
    ...GatsbyImageSharpSizes_noBase64
    }
  }

Hint: Make sure to set the same aspect ratio for sqip and sizes/resolutions. For performance and quality, 256px width is a good base value for SQIP

Pure JSX/HTML

<div className="image-wrapper">
  <img src={image.dataURI} alt="" role="presentation" />
  <img src={image.src} alt="Useful description" className="image" />
</div>

.image-wrapper {
  position: relative;
  overflow: hidden;
}
.image-wrapper img {
  display: block;
}

.image-wrapper img.image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

Pros:

• No client-side JavaScript required
• Browser cache ensures previews are not shown when a user visits the page a second time

Cons:

• All images are loaded, no matter if they are in the viewport or not

Gatsby Image

const Img = require(`gatsby-image`)

<Img
  resolutions={{
    ...image.resolutions,
    base64: image.sqip
  }}
/>

// or

<Img
  sizes={{
    ...image.sizes,
    base64: image.sqip
  }}
/>

Pros:

• Nice fade-in effect
• Only images within the viewport are loaded

Cons:

• Requires client-side JavaScript
• Images fade in all the time, even when the image is already in the browser cache

Copyright notice

The used images belong to their photographer, get more details by clicking on them. The background image was taken by Neven Krcmarek.