Implementing Placeholder Blur with Next.js Image Component

Show how to add a blur-up effect using the placeholder attribute of the Image component to improve the perceived loading time of images.

import Image from 'next/image';

export default function MyComponent() {
  return (
    <div>
      <Image
        src='/path/to/your/image.jpg' // Your image path
        alt='Descriptive alt text' // Alternative text for the image
        layout='responsive' // Specifies the image layout mode
        width={700} // Your image width
        height={475} // Your image height
        placeholder='blur' // Adds a placeholder with a blur effect
        blurDataURL='/path/to/your/placeholder.jpg' // The small image data URL to be used as a blur placeholder
      />
    </div>
  );
}

This code shows how to use Next.js Image component to add a blur-up effect on image load. The Image component uses a small blurry version of the image as a placeholder until the full-resolution image is loaded, which can improve perceived performance.