Image optimization reduces file sizes and improves loading times. Images often account for the largest portion of page weight, making optimization crucial for performance.
Image optimization techniques
Format selection
- JPEG: Best for photos
- PNG: Best for graphics with transparency
- WebP: Modern format, 30% smaller than JPEG
- AVIF: Newest format, even better compression
Compression
- Lossy: Reduces quality slightly for smaller files
- Lossless: No quality loss, larger files
- Find the balance for your use case
Responsive images
<img
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 800px"
src="medium.jpg"
alt="Description"
>
Image optimization checklist
- Choose the right format (WebP/AVIF when supported)
- Resize images to actual display size
- Compress appropriately
- Use responsive images
- Lazy load below-the-fold images
- Set explicit width and height to prevent CLS
Related Terms
Content Delivery Network (CDN)
A geographically distributed network of servers that work together to provide fast delivery of internet content by serving it from locations closer to users.
Cumulative Layout Shift (CLS)
A Core Web Vital that measures visual stability by quantifying how much page content unexpectedly shifts during loading.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.
Lazy Loading
A design pattern that defers the loading of non-critical resources until they are needed, typically when they enter the viewport.