Image & Font Optimisation in React
Use next/image or lazy-loaded with correct dimensions, formats (AVIF/WebP), and font-display.
Why Images Are Critical
Images are typically the largest resources on a page. Unoptimized images cause poor LCP, slow page loads, and high bandwidth costs — especially on mobile.
Next.js Image Component
next/image automatically optimizes images: lazy loading by default, responsive srcSet, modern formats (WebP/AVIF), and correct dimensions to prevent CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>All lessons in this course
- Measuring Core Web Vitals in React Apps
- Bundle Analysis & Code Splitting Strategy
- Image & Font Optimisation in React
- Reducing INP: Event Handler Optimisation