Advanced Image Optimization Options on Next.js

Advanced Image Optimization Options

We can pass several advanced options to the <Image> component:

• Quality: You can control the quality of the image, with a value between 1-100 (default is 75).

<Image
  src="/images/quality-image.jpg"
  alt="High-Quality Image"
  width={600}
  height={400}
  quality={90}    // Set image quality
/>

• Priority: If you want an image to load immediately and not lazily, you can set priority to true:

<Image
  src="/images/priority-image.jpg"
  alt="Priority Image"
  width={600}
  height={400}
  priority={true}  // Load image with high priority
/>

Supported Image Formats

The next/image component supports the following formats:

• JPEG
• PNG
• GIF
• WebP
• AVIF (with support in browsers)

Next.js will automatically convert images to WebP when possible for further optimization