How to preload images in Gatsby?

Question

Is there a way to preload every image before showing the page to a user in Gatsby? Let's say that I want to avoid any preload effect that Gatsby is offering.

I am also wondering how I can force images that are not visible to preload. This is a major problem which I am trying to solve. Please take a look: https://festive-bassi-ce307b.netlify.app/.

If you try using the carousel then the next image that shows up will start preloading because it never was shown. This is really silly because at that point the whole page is loaded and the images as well.

I am using the gatsby-plugin-image and it's a staticImage component.

Example:

<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
quality={100}
/>

I also saw that the older gatsby-image plugin had a "loading" property that you could set to eager load. Could that property solve my problem?

Answer 1

Is there a way to preload every image before showing page to user in Gatsby?

This is what eager attribute (from loading property) does according to the docs:

Loading behavior for the image. You should set this to eager for above-the-fold images to ensure they start loading before React hydration.

If you add:

<StaticImage
  className="img1 img"
  src="../images/era_of_manufacturing_ilustrations/work_planning.png"
  alt="work planning image"
  placeholder="blurred"
  layout="constrained"
  loading="eager"
  quality={100}
/>

They will start loading before the rehydration process as if they were above-the-fold.

I don't understand the "preloading process" that you've pointed. Gatsby images are lazy-loaded by default but if you don't want to add a placeholder effect (the blurring), you can omit the placeholder property in the StaticImage.