Optimizing Images for the Modern Web

The Heavy Cost of Images

Images often account for the majority of a webpage's total weight. Unoptimized images lead to slow Largest Contentful Paint (LCP) scores and poor SEO rankings.

Formats Matter

• JPEG: Good for photos, but dated.
• WebP: Better compression, supported by most browsers.
• AVIF: The new gold standard, offering superior compression at high quality.

Using next/image

The Next.js Image component handles lazy loading and resizing automatically.

import Image from 'next/image';

<Image 
  src="/hero.png" 
  width={800} 
  height={600} 
  alt="Hero Image" 
  priority 
/>

Using the priority prop on your LCP element tells the browser to load it immediately, preventing layout shift.