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.
For an up to date list of possible configuration options, please check out the plugins readme.
The maximum size of your previews really depend on your current html payload size and your personal limits
Generally: Keep it as small as possible and test the impact of your image previews via webpagetest.org on a 3G connection.
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
<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;
}
const Img = require(`gatsby-image`)
<Img
resolutions={{
...image.resolutions,
base64: image.sqip
}}
/>
// or
<Img
sizes={{
...image.sizes,
base64: image.sqip
}}
/>
The used images belong to their photographer, get more details by clicking on them. The background image was taken by Neven Krcmarek.