Enabling Responsive Images with srcSet in Next.js

import Image from 'next/image';

// The Image component from Next.js with srcSet
function ResponsiveImageComponent() {
  return (
    <Image
      src='/path/to/image.jpg' // The base image path
      alt='Descriptive text for the image'
      width={800} // The width of the image (in pixels)
      height={600} // The height of the image (in pixels)
      srcSet={
        'path/to/image-320w.jpg 320w, ' +
        'path/to/image-480w.jpg 480w, ' +
        'path/to/image-800w.jpg 800w' // Define the different image sources along with their widths
      }
      sizes={
        '(max-width: 320px) 280px, ' +
        '(max-width: 480px) 440px, ' +
        '800px' // Define the size of the displayed image based on viewport width
      }
      layout='responsive' // Ensure the image scales correctly to the dimensions of its parent container
    />
  );
}