How to Blur Placeholder for Images in Next.js

When working with images in Next.js, you may have noticed that large images can cause a flicker or empty space before they fully load. To improve the user experience, Next.js gives you a built-in option called blur placeholder. This feature shows a small blurred preview of the image until the full version loads.

In this post, we’ll go step by step on how you can implement it.

Why Blur Placeholder?

Blur placeholders help create a smoother visual experience. Instead of showing a blank space or loader, users see a preview that quickly fades into the full image once it’s loaded. This technique is widely used by platforms like Medium and Unsplash.

Using next/image with Blur

Next.js makes this simple using the <Image /> component. All you need is a blurDataURL, which is a base64 string that represents a small blurred version of your image.

Here’s a simple example:

In the snippet above:

1. placeholder="blur" tells Next.js to use the blur effect.
2. blurDataURL holds the small blurred version of the image in base64 format.

How to Generate Blur Data URL

You could generate the base64 manually with tools like sharp in Node.js, but the easiest way is to use blurred.dev.

Steps:

1. Go to blurred.dev.
2. Upload your image.
3. Choose the image format (JPEG/PNG/WebP) and adjust the quality if you want.
4. Copy the Data URL (base64) that is generated.
5. Paste that string into your blurDataURL property in your Next.js <Image />.

Here’s what the generated value looks like:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...

Final Example

And that’s it. Now your image will show a smooth blurred preview before loading in full quality.