Learn How to Preload Images in NextJs

In this post, we will discuss how to preload Images in Nextjs. When we set the priority property to true in Nextjs Image component, The image will be considered high priority and it will preload. The default value of preload is false. The preload property should only be used to the images above the fold. i.e visible in the first load. Otherwise it will effect the webpage load time.

Preload Image in HTML

So, if you want to load any resource before the rendering process starts, you can use rel=”preload”:

<link rel="preload" as="image" href="image.jpg">

Preload Image in NextJs

In NextJs we can preload the image with priority property.

<Image
    src="/images/image.jpg"

    width="800"
    height="600"
    priority={true}
 />

Happy Coding 🙂

Read : Eager Load Images in NextJs