Leveraging WebP Format for Improved Performance

Convert images to WebP format using Next.js Image component's format prop, allowing for smaller image sizes and faster loading without reducing quality.

import Image from 'next/image';

// Using next/image to serve WebP images with format prop
function MyImageComponent() {
  return (
    <Image
      src="/path/to/image.jpg" // Your image file path
      alt="Descriptive alt text"
      width={1920} // Set the width of the image
      height={1080} // Set the height of the image
      layout="responsive" // makes the image scale nicely to the parent element
      format="webp" // Request WebP format
    />
  );
}

This code snippet imports the Image component from Next.js and demonstrates how to request an image in WebP format using the 'format' prop of the Next.js Image component. The image will be served in WebP format if the browser supports it, helping reduce the image size and potentially improve loading performance.