Image Optimization
ELI5 — The Vibe Check
Sending a full-size photo to your website is like shipping a grand piano when someone asked for a music box. Image optimization squishes, resizes, and converts your images so they load fast without looking like they were drawn in MS Paint.
Real Talk
Image optimization reduces file size through compression, format conversion (WebP, AVIF), responsive sizing, and lazy loading. Modern frameworks automate this with built-in image components that serve appropriately sized images per device.
Show Me The Code
<Image src="/hero.jpg" width={800} height={600} alt="Hero" />
When You'll Hear This
"Our Lighthouse score tanked because nobody optimized the hero images" / "Switch to WebP and we'll save 60% on image payload"
Related Terms
Lazy Loading
Lazy loading waits until you actually access related data before fetching it. Access post.author and only then does it query the database.
Lighthouse
Lighthouse is Google's report card for your website. It grades you on speed, accessibility, SEO, and best practices.