The easiest performance win in React isn't always your JavaScript. Sometimes it's your images.
I used to think performance optimization meant splitting bundles, memoizing components, and chasing Lighthouse scores.
The result? Images were quietly eating most of the page weight — way more than my JS bundle, my fonts, everything else combined.
A hero banner that looked perfect on my laptop was making mobile users download a multi-megabyte file just to see a heading.
That's when it clicked: image optimization isn't a nice-to-have. It's one of the fastest ways to make a React site actually feel faster.
Every extra second of load time costs you something — a visitor who bounces, a search ranking that slips, a bandwidth bill that keeps climbing.
None of that is dramatic on its own. But it adds up fast, and images are usually where it's hiding.
The browser still downloads the full file — every pixel of it, whether you show it or not.
| Device | Image Width | |---------|---------:| | Mobile | 400px | | Tablet | 800px | | Desktop | 1200px |
Your users won't notice the difference in quality. They'll definitely notice the faster loading.
WebP — if you're still serving JPEGs everywhere, you're leaving free performance on the table. WebP usually keeps the same visual quality while shrinking the file size significantly.
AVIF — takes compression even further. I've seen hero images drop from 500KB to nearly 200KB with almost no visible quality loss. Browser support is good enough now that it's worth using wherever you can.
Gallery images. Blog thumbnails. Testimonials. Footer logos. All of these can wait until users actually scroll near them.
Your hero image is different. If it's the biggest thing users see first, load it immediately — not lazily.
Google's Largest Contentful Paint (LCP) is often just your hero image, plain and simple.
Small change. But now the browser knows this image deserves priority over everything else on the page.
Have you ever tried clicking something and the page suddenly moved because an image loaded underneath your cursor?
That's Cumulative Layout Shift. The browser didn't know how much space to reserve, so it grabbed space the moment the image arrived — shoving everything else out of the way.