Lazy load images with Next.js (video tutorial)

Overview

Improve performance in your Next.js app by lazy loading images using the Cloudinary Next.js SDK.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	Lazy loading minimizes loading times, helping retain visitors on your website.

How lazy loading works

0:15	Lazy loading is a built-in attribute of the HTML img and iframe tags. Setting the loading attribute to "lazy" prevents the browser from loading resources until the user scrolls to them or interacts in some way.

Preventing layout shifts

0:37	To avoid layout shifts when images load, it's best to define the width and height of images either through CSS or inline attributes. Additionally, only images that don't contribute to the Largest Contentful Paint (LCP)—such as banner and hero images—should be lazy loaded.

Lazy loading with Cloudinary’s CldImage component

0:55	With Cloudinary’s CldImage component, lazy loading is enabled by default. This means images are only requested when needed, saving bandwidth and ensuring that unnecessary calls aren’t made. If an image is never seen by the user, it’s never loaded.

When to use eager loading

1:11	For LCP images, such as prominent header images, you can override lazy loading by adding the priority attribute to the CldImage component. This tells the browser to load the image immediately, just like the priority attribute in Next.js’s Image component. However, using this attribute incorrectly can impact performance, so it should only be applied to critical LCP images.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.