NextJS <Image> component: Preload images before rendering them

Question

I want to preload images before programmatically rendering them. Example:

      <Image
        src={
          color === "yellow"
            ? Yellow
            : color === "blue"
            ? Blue
            : Red
        }
        alt="color image"
        priority
        fill
        sizes="250px"
      /> 

If the default value for color is "yellow" the optimized Yellow image is being rendered on page load.

When changing the value of color to "blue", via dropdown menu for example, the blue image is being loaded and rendered. That loading takes a while and thus the image is being displayed after a little delay.

How can I preload all three images Yellow, Blue and Red so they get displayed instantly when changing the value of color on page load without losing the benefits of the NextJS <Image/> component?

I tried using the priority and loading properties of the <Image/> component but they have no effect if the image is not supposed to be rendered.

Answer 1

Solved by adding three images for each color and setting the display property of the image wrappers to none:

    <ImageWrapper
      style={{
        display: "none",
      }}
    >
      <Image
        src={Yellow}
        alt="color image"
        priority
        fill
        sizes="250px"
      />
    </ImageWrapper>

This way each image is being loaded on page load and rendered instantly when conditionally changing the value of color