0

I have a Gatsby portfolio with a ton of largeish jpgs/gifs/mp4s, using react hook masonry. Because it's loading in columns there's an undesirable stuttering loading in effect, where the images sort of bump in and push each other down.

I want the jpgs/gifs/mp4s to fade in as they load rather than jump in and push the content around, but I'm not sure how to do that, think I'd need to program the aspect ratio in somehow. Note that I can't use Gatsby Image to calculate the aspect every time because I'm also using gifs and mp4s which are incompatible with Gatsby Image.

Here's how I'm using graphql to call the images from Gatsby, and I'm using Netlify CMS to host the media. Gatsby Image has an aspect ratio feature for jpgs only, but the documentation is sparse. Another thought I had is maybe I need to make a field in Netlify CMS that takes the aspect ratio, but that seems clunky.

if anyone has any tips I'd really appreciate it, thanks!

StephD
  • 266
  • 3
  • 20

1 Answers1

-1

You should use gatsby-image to optimize your images. It has a lazy-load feature, so the pictures won't start loading just when they appear on the screen etc.

The aspect ratio thing you mentioned is also a feature of the gatsby-image plguin.

But anyway, the pictures push each other because they come in different size. You should use gatsby-image to "crop" the images or resize them.

Or you can put them in a container div which has fixed size in a given aspect ratio. Then you can simply put the images inside with a 100% width and auto height and object-fit property.

buforcz
  • 17
  • 1
  • 5