𝗭𝗲𝗿𝗼 𝗖𝗟𝗦 𝗜𝗺𝗮𝗴𝗲𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟲

𝗭𝗲𝗿𝗼 𝗖𝗟𝗦 𝗜𝗺𝗮𝗴𝗲𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝟭𝟲

You scroll a page. An image loads. The text jumps. This is a bad user experience. It is called Cumulative Layout Shift (CLS).

There are two separate image problems:

• Layout shift.
• Abrupt pop-in.

Fix layout shift by reserving space. The browser needs the image size before the file arrives.

Use these patterns:

• Give next/image a width and height.
• Use a parent div with a relative position and an aspect-ratio.

This stops the page from jumping.

Fix the abrupt pop-in with a Low-Quality Image Placeholder (LQIP). This is a tiny base64 image.

For remote images, Next.js does not do this for you.

• Create the tiny image during upload.
• Store the base64 string in your database.
• Pass the string to the blurDataURL prop.

Only enable the blur if the data exists. This prevents errors.

Use the sizes prop. It tells the browser the right image size for the screen. It saves bandwidth.

Use preload for the main hero image. This helps the page load faster. Do not preload every image.

Test your site on slow 4G.

• The layout stays still.
• Placeholders appear fast.
• Final images fade in smoothly.

Reserve space for stability. Use LQIP for a better feel.

Source: https://dev.to/markyu/zero-cls-images-in-nextjs-16-lqip-blur-up-done-right-1nkb