Why Images Are the Main Performance Problem
Images account for 50-70% of total web page weight on average. According to HTTP Archive, the average page loads over 1 MB of images. Unoptimized images are the #1 cause of slow website loading and poor Core Web Vitals scores.
Image optimization is the fastest way to speed up a website with minimal effort.
Modern Image Formats
WebP
Google's format, supported by all modern browsers (97%+ globally). Benefits:
- 25-35% smaller than JPEG at comparable quality
- 26% smaller than PNG with transparency support
- Animation support (replacing GIF with 64% size savings)
- Both lossy and lossless modes
AVIF
Format based on AV1, approximately 93% browser support. Best compression available:
- 50% smaller than JPEG at comparable quality
- 20% smaller than WebP
- HDR and wide color gamut support
- Slower to encode than WebP
When to Use Which Format
- AVIF — for photographs and complex images when encoding time isn't critical
- WebP — universal choice, good balance of quality and compatibility
- SVG — for icons, logos, illustrations (vector, scales without loss)
- PNG — for screenshots and images with text requiring pixel accuracy
- JPEG — fallback for older browsers
The Picture Element for Progressive Loading
Use <picture> to provide multiple 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"> </picture>
The browser picks the first supported format. Always specify width and height to prevent layout shift (CLS).
Responsive Images
The srcset attribute loads appropriately sized images for the device:
<img
srcset="image-480.webp 480w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1200px"
src="image-800.webp"
alt="Description"
>
Don't load a 2000px image for a 320px mobile screen. Savings can reach 80% of traffic.
Lazy Loading
Lazy loading defers loading images that aren't visible on screen until the user scrolls to them:
<img src="image.webp" alt="Description" loading="lazy">
Lazy loading rules:
- Don't apply to the LCP image — the main above-the-fold image should load immediately
- Don't apply to the first 2-3 images on the page
- Apply to all images below the fold
- Use
fetchpriority="high"for the LCP image
<!-- LCP image — high priority --> <img src="hero.webp" alt="Hero" fetchpriority="high"> <!-- Below-the-fold images — lazy loading --> <img src="gallery-1.webp" alt="Gallery" loading="lazy">
Image Compression
Compression Quality
For photographs, optimal quality is 75-85%. The difference between 85% and 100% is barely visible to the eye, but file size can differ by 2-3x.
Compression Tools
- Squoosh — visual comparison, AVIF/WebP support
- ImageOptim — массовую проверку URL optimization for macOS
- Sharp — Node.js library for server-side processing
- cwebp/cavif — CLI utilities for conversion
Automation
Integrate optimization into your CI/CD pipeline or use a CDN with automatic conversion (Cloudflare Polish, imgproxy). Never rely on manual optimization — it will be forgotten.
Additional Optimizations
Preloading the LCP Image
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
CSS Sprites and Inline SVG
For small icons, use SVG sprites or inline SVG instead of separate files — this reduces the number of HTTP requests.
Loading Placeholders
Use CSS placeholders of the correct size or blurred previews (LQIP — Low Quality Image Placeholder) to prevent layout shift.
Check Loading Speed
Use the Enterno.io Speed Test to measure your page loading times. Compare results before and after image optimization. Check the HTTP response for image caching headers.
Summary
Image optimization is the most effective way to speed up a website. Use WebP/AVIF with fallbacks, responsive images for different screens, lazy loading for below-the-fold images, and automate compression. These measures can reduce page weight by 50-80%.