Image Placeholder (Blur Effect) and Optimize Images for SEO using Next.js

Image Placeholder (Blur Effect)

Next.js supports placeholders for images, like a blur effect, while they are loading.

import Image from 'next/image';

const BlurredImage = () => (
  <Image
    src="/images/high-res-image.jpg"
    alt="Blurred Image"
    width={800}
    height={600}
    placeholder="blur"          // Enable blur placeholder
    blurDataURL="/images/low-res-blur-image.jpg"  // Low-res image or base64 string
  />
);

export default BlurredImage;

8. Optimize Images for SEO

Always include the alt attribute for accessibility and SEO purposes. Describing your image well helps improve your website’s ranking and makes it more accessible to screen readers.

<Image
  src="/images/optimized-image.jpg"
  alt="A description of the image for SEO"
  width={600}
  height={400}
/>