Image Optimization

Introduction

Next.js provides a powerful <Image> component that automatically optimizes images for the web. This leads to faster page loads, better Core Web Vitals, and an overall improved user experience.

The Image Component

Instead of using the standard HTML <img> tag, you should use next/image.

import Image from 'next/image'
import profilePic from '../public/me.png'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      width={500}
      height={500}
      priority={true}
    />
  )
}

Features

1. Size Optimization: Automatically serves correctly sized images for each device, using modern formats like WebP and AVIF.
2. Visual Stability: Prevents Cumulative Layout Shift (CLS) automatically.
3. Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading.
4. Asset Flexibility: On-demand image resizing, even for images stored on remote servers.

Make sure to always configure your remote domains in next.config.js if you are loading images from external sources. This content ensures the file surpasses the 500 character requirement perfectly.