Using the Image Component for Automatic Optimization

Demonstrate how to use Next.js's built-in Image component to automatically optimize images for different screen sizes and resolutions.

import Image from 'next/image';

// In your component
export default function MyComponent() {
  return (
    <div>
      {/* Include the Image component from Next.js */}
      <Image
        src='/path/to/your/image.jpg' // The path to your image file
        alt='Description of the image' // A short description of your image
        width={500} // The width of your image in pixels
        height={300} // The height of your image in pixels
        layout='responsive' // This makes the image scale with the parent element
        priority={true} // This tells Next.js to preload this image on the initial load
      />
    </div>
  );
}

This code imports the Image component from Next.js and demonstrates how to use it within a functional component. A responsive image is created, that scales with its parent element's size, and is set to be preloaded on the initial page load.