Using Image Optimization with Next.js Image Component

A code snippet that illustrates how to use the Next.js Image component to automatically optimize and serve responsive images.

import Image from 'next/image';

export default function MyImageComponent() {
  return (
    <div>
      <Image
        src='/path/to/myimage.jpg' // The relative path or URL to the image
        alt='Description of the image' // Alternative text for the image
        width={500} // Desired width of the image in pixels
        height={300} // Desired height of the image in pixels
        layout='responsive' // This makes the image scale nicely to the parent element
        priority // This tells Next.js to preload this image on the initial page load
        placeholder='blur' // This enables a blur-up effect while the image is loading
        blurDataURL='data:image/jpeg;base64,...' // Base64 encoded image for the placeholder
      />
    </div>
  );
}

This is a simple usage of the Next.js Image component importing it at the start. The `Image` component is used within a functional component named `MyImageComponent`. It displays an optimized image that has responsive layout and a blur-up effect on load. The `priority` prop is set to preload the image in the viewport, improving perceived performance.