[sanity + gatsby] Figuring out jank-free, lqip image loading

images.md

Implementing https://github.com/coreyward/gatsby-plugin-sanity-image

References

• https://hangindev.com/blog/create-a-custom-figure-block-in-sanity-that-supports-lazy-loading-effect
• https://gist.github.com/kmelve/e047d40e24d92f1b4751535a4cee1e59
• https://www.apostrof.co/blog/svelte-sanity-responsive-lazy-loaded-jank-free-images/
• https://www.sanity.io/docs/image-type#custom-asset-sources-495696608224

You can get those thumbnails to scale up and keep your content from jumping around by putting the image in a container sized how you want, then setting the CSS on the image to display: block; width: 100%. Unless you are cropping the image, the LQIP should be the same aspect ratio. If you are cropping the image, you can instead set the absolute dimensions on the img element and use object-fit: cover on it.

Figured it out

<figure
    style={{
        position: 'relative',
        overflow: 'hidden',
        margin: 0,
        width: '50%'
      }}>
      <div
      style={{
        paddingBottom: '56.25%'
      }}></div>
      <SanityImage
        {...props.mainImage}
        sx={{
          '&[data-lqip]': {
            display: 'block',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          }
        }}
        style={{ 
          display: 'block',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%'
        }}
      />
</figure>