Let’s talk about Image Optimization with Next.js
summary
A small Next.js demo loads images from unsplash and replaces plain <img> behavior with the built-in Image component that adds srcset, lazy loading, automatic WebP delivery and reserved layout to prevent cumulative layout shift; an example image shrinks from 446 KB to 16.3 KB and Image serves WebP compression ~30% while offering placeholder blur and a configurable quality (default 75) so images load smaller, responsive, and with fewer requests.
AI-written summary · about
chapters (5)
related talks
22mWhy Images Hurt App Performance & How the New Next.js Image Component Can Help
24mNuxt Image
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
18mNext.js - The Hybrid Architecture for Web Developer
33mImpatience is a virtue
33mImages blast off at the speed of Jamstack!
14mHigh-quality, performant images & videos on your React website (and some AI magic!)
45mResponsible Responsive Images