Introduction
We have all heard this term before. Lazy Loading. What is it anyways?
Lazy loading postpones the loading of resources on a page, in this case an image, until they are actually required. Rather than loading these resources as soon as the page loads, as is usually the case, they are delayed until the user need them. They have numerous advantages. We can make our web pages load really quickly with lazy loading. In this guide, we will cover how to lazy load images using Next.js.
Next.js comes default with an Image
component. Lazy loading is enabled by default in the Next.js Image
component. It is not only useful to the end-user, but it is also beneficial to the server because it does not have to execute image generation for images that may or may not be required.
Installation and Setup
You can create a new Next.js application using the following command:
npx create-next-app lazy-load-images
Let's start the application by running the following command
npm run dev
# or
yarn dev
We are running our application in the development server. Open your browser and navigate to https://localhost:3000.
Lazy Loading
Add a new image file to the public
directory. In the pages
directory, create a new file lazy-load.js
. This will be our Next.js page.
Add the following to the fil
export default function ImagePage() {
return (
<h1>Image Page</h1>
);
}
Visit https://localhost:3000/lazy-load to preview the page. Now that the page has rendered succesfully, we can continue to implement lazy loading.
First import the Image
component from Next.js
import Image from "next/image";
Next, replace the <h1>
tag with this the Image
Component
<Image
src="/github.jpg"
alt="Github"
width={600}
height={450}
layout="responsive"
loading="lazy"
/>
Now preview it in the browser to see the results. Add a lot of images and see lazy loading in action as you scroll.
Top comments (6)
You don't even have to pass
loading
becausenext/image
uses lazy loading as the default.I realized this later on that it was baked into Next Image by default.
Tip : add
blurDataURL
to get blurry placeholder while lazy loading your image.can you give a visual usage of this
there you go :
thank you!
this explains better to me.