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
How VitalSentinel handles this
Image weight is usually the dominant factor in LCP, and an unoptimized hero image can wreck Core Web Vitals overnight. VitalSentinel's RUM monitoring tracks real-user LCP so you'll catch the moment a marketing team uploads a 4MB PNG, and synthetic monitoring audits page weight on every run. Find out in hours, not weeks, when image regressions are costing you conversions.
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.