Images often account for the largest portion of a page's total weight. If you're serious about performance, image optimization is the most impactful place to start.
The Triad of Image Optimization
Optimization essentially comes down to three things: Format, Sizing, and Delivery.
1. Modern Formats: AVIF and WebP
Stop using PNGs and JPEGs for everything.
- AVIF offers the best compression ratios currently available, often reducing file sizes by 50% compared to WebP with no noticeable loss in quality. Support is now widespread across all modern browsers.
- Use standard WebP as a fallback if you have users on legacy setups.
2. Responsive Sizing with srcset
Don't serve a 2500px wide image to a user on a 375px wide smartphone.
Use the srcset and sizes attributes to provide the browser with multiple resolution options. The browser will automatically download the most appropriate size for the user's screen.
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Beautiful landscape"
/>
3. Smart Delivery: Lazy Loading
Unless an image is above the fold (visible immediately when the page loads), it shouldn't load right away.
Add loading="lazy" to all below-the-fold images. This defers the network request until the user scrolls near the element.
For your most critical above-the-fold image (usually the LCP element), do the opposite: explicitly use loading="eager" and consider an explicit fetchpriority="high" attribute to tell the browser it is urgent.
Conclusion
Combining modern formats, responsive sizing, and lazy loading will shave megabytes off your page weight, resulting in happier users and better Core Web Vitals scores.