A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.
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
Post a comment