How to Use Placeholder Blur in Next.js Image Component

In Next.js, you can add a blur placeholder to images by using the Image component with the placeholder="blur" prop and providing a blurDataURL for the low-quality image preview. This shows a blurred version while the full image loads, improving user experience.

Syntax

The Image component from next/image supports a placeholder prop that can be set to "blur". You also provide a blurDataURL which is a small, base64-encoded image string used as the blurred preview.

Key parts:

• src: The main image URL or import.
• placeholder="blur": Enables the blur effect.
• blurDataURL: The tiny blurred image shown initially.
• alt: Describes the image for accessibility.

tsx

import Image from 'next/image'

export default function Example() {
  return (
    <Image
      src="/example.jpg"
      alt="Example image"
      width={600}
      height={400}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
    />
  )
}

Output

An image 600x400 pixels that first shows a blurred preview before the full image loads.

Example

This example shows how to use a local image import with automatic blur placeholder generation in Next.js. When you import an image file, Next.js generates a blurDataURL automatically, so you only need to add placeholder="blur".

tsx

import Image from 'next/image'
import examplePic from '../public/example.jpg'

export default function Example() {
  return (
    <div>
      <h1>Image with Blur Placeholder</h1>
      <Image
        src={examplePic}
        alt="Example picture"
        width={600}
        height={400}
        placeholder="blur"
      />
    </div>
  )
}

Output

A page with a heading and an image that first shows a blurred version, then the full sharp image loads.

Common Pitfalls

• Not providing blurDataURL when using external URLs causes the blur placeholder to not work.
• Using placeholder="blur" without a valid blurDataURL or imported image will show a broken placeholder.
• For remote images, you must manually generate and provide a base64 blurDataURL.
• Not setting width and height can cause layout shifts.

tsx

/* Wrong: External image without blurDataURL */
import Image from 'next/image'

export default function Example() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="Photo"
      width={600}
      height={400}
      placeholder="blur" // No blurDataURL provided
    />
  )
}

/* Right: Provide blurDataURL manually */
export default function ExampleWithBlur() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="Photo"
      width={600}
      height={400}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
    />
  )
}

Quick Reference

Prop	Description	Required for Blur Placeholder
src	Image source URL or imported file	Yes
alt	Alternative text for accessibility	Yes
width	Image width in pixels	Yes
height	Image height in pixels	Yes
placeholder	Set to "blur" to enable blur effect	Yes
blurDataURL	Base64 tiny image for blur preview	Yes for external images, auto for imported images

Key Takeaways

Use placeholder="blur" with blurDataURL to show a blurred preview in Next.js Image.

Imported local images automatically generate blurDataURL, so just add placeholder="blur".

For external images, manually provide a base64 blurDataURL to enable blur placeholders.

Always specify width and height to prevent layout shifts.

Blur placeholders improve user experience by showing a smooth preview while images load.