Introduction
Images account for over half of the typical webpage’s total weight. As web applications grow more visual, optimizing image delivery has become critical for performance, user experience, and Core Web Vitals scores. This article explores modern image optimization strategies, from next-generation formats to responsive delivery techniques.
Image Formats in 2024
The image format landscape has shifted dramatically. Three modern formats now compete for dominance alongside legacy JPEG and PNG.
| Format | Size vs JPEG | Browser Support | Best For |
|---|---|---|---|
| WebP | 25-34% smaller | 97%+ | Universal fallback |
| AVIF | 50% smaller | 85%+ | Photographic content |
| JPEG XL | 60% smaller | Limited (Safari) | Future-proof archival |
| JPEG/PNG | Baseline | 100% | Fallback |
WebP has achieved near-universal browser support and offers 25-34% size reduction over JPEG at equivalent quality. It is the safest modern format for production use. AVIF delivers impressive compression—roughly 50% smaller than JPEG—but encoding speed remains a concern for real-time applications. JPEG XL offers the best compression and features (lossless recompression, HDR support), but its browser support remains limited.
Responsive Images with srcset
The srcset and sizes attributes let browsers select the optimal image size for the user’s viewport and device pixel ratio:
<img
src="hero-800.jpg"
srcset="
hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w,
hero-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Hero image"
loading="lazy"
width="800"
height="450"
>
Use w descriptors for responsive sizing based on viewport width, and x descriptors for targeting specific device pixel ratios. The browser automatically selects the most appropriate source based on the current viewport and DPR.
Format Selection with <picture>
The <picture> element enables format fallback chains, ensuring browsers receive the most efficient format they support:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="800" height="450">
</picture>
This pattern serves AVIF to supporting browsers, falls back to WebP, and finally to JPEG as the universal fallback. The <picture> element also supports art direction—serving differently cropped images for mobile versus desktop viewports.
CDN Image Transformation
CDNs like Cloudflare Images, Imgix, Cloudinary, and Akamai can transform images on the fly using URL parameters:
https://cdn.example.com/image.jpg?w=800&h=600&fit=cover&f=webp&q=80
Modern CDNs also support automatic format negotiation by checking the Accept header and serving AVIF or WebP automatically. This approach allows the origin to store a single master image while the CDN caches and serves multiple variants based on client capabilities.
Lazy Loading and Core Web Vitals
Native lazy loading with loading="lazy" defers off-screen image loading until the user scrolls near them. For above-the-fold images that impact LCP (Largest Contentful Paint), use fetchpriority="high":
<!-- LCP image - load immediately -->
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero">
<!-- Below-fold images - lazy load -->
<img src="gallery-1.jpg" loading="lazy" width="400" height="300" alt="Gallery">
To prevent CLS (Cumulative Layout Shift), always set explicit width and height attributes on images. This allows the browser to reserve the correct space before the image loads.
| Metric | Impact | Strategy |
|---|---|---|
| LCP | Slow hero image load | Preload, fetchpriority=“high” |
| CLS | Layout shifts | Explicit width/height, aspect ratio boxes |
| INP | Main thread blocking | Deferred decoding, lazy loading |
Conclusion
An effective image optimization strategy in 2024 combines multiple techniques: serve AVIF with WebP and JPEG fallbacks via <picture>, use srcset for responsive sizing, leverage CDN transformation for dynamic resizing and format negotiation, lazy load below-the-fold images while preloading LCP candidates, and always set explicit dimensions to prevent layout shifts. Implementing this stack consistently can reduce image weight by 50-80% while improving Core Web Vitals scores.