Next.js Image Optimization

This page demonstrates the Next.js Image component and its optimization capabilities.

The Next.js Image component optimizes images for better performance, including:

  • Resizing to match the device's screen size
  • Converting to modern formats like WebP or AVIF
  • Lazy loading images that aren't in the viewport
  • Preventing layout shift with proper aspect ratios
A beautiful landscape

Local image with automatic optimization

Priority loaded (loads immediately)

A modern cityscape

Remote image with automatic optimization

Lazy loaded (loads when near viewport)

Implementation Details

The Next.js Image component is implemented as follows:

import Image from 'next/image'

// Fixed size image
<Image
  src="/path-to-image.jpg"
  width={800}
  height={600}
  alt="Description"
  priority={true}
/>

// Responsive fill image
<div className="relative h-64">
  <Image
    src="/path-to-image.jpg"
    alt="Description"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>