Image optimization
Reducing image file sizes while maintaining visual quality for faster loading.
What is Image optimization?
Image optimization involves reducing image file sizes to improve page load speed while maintaining acceptable visual quality. Techniques include compression, choosing appropriate formats, serving responsive images, and lazy loading off-screen images.
Images often account for 50-80% of a page's weight. Optimizing them is one of the highest-impact performance improvements available.
Why Image optimization matters
Large images are the #1 cause of slow page loads. Optimized images directly improve LCP and overall page speed. This affects both user experience and search rankings through Core Web Vitals.
How to implement
Use modern formats (WebP, AVIF)
Compress images appropriately
Serve responsive images (srcset)
Lazy load below-fold images
Set explicit width/height attributes
Use CDN for image delivery
Code example
<!-- Responsive images with modern formats -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img
src="image.jpg"
alt="Description"
width="800"
height="600"
loading="lazy"
decoding="async"
>
</picture>
<!-- Responsive srcset -->
<img
srcset="image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="image-800w.jpg"
alt="Description"
>Common mistakes to avoid
- Uploading uncompressed images
- Using PNG for photographs
- Serving same size to all devices
- Not lazy loading off-screen images
Examples
Convert JPEG to WebP: 30-50% size reduction
Use srcset for responsive images
Lazy load images below the fold
Frequently asked questions
AVIF offers best compression but limited support. WebP is widely supported and smaller than JPEG/PNG. Use JPEG for photos, PNG for transparency, SVG for icons.
Lazy load below-fold images. Don't lazy load the LCP image or important above-fold content - these should load immediately with fetchpriority='high'.