# Image optimization — Web Performance Optimization
Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-04
> Techniques to reduce image file sizes without sacrificing quality through formats, compression, and lazy loading.
## Modern image formats
Use **WebP** (30% smaller), **AVIF** (20% smaller than WebP), or **HEIC**. Provide fallbacks for older browsers: ``.
## Compression strategies
Use **lossy compression** (JPEG, WebP quality 75-85) for photos, **lossless** for graphics. Tools: ImageOptim, TinyPNG, Squoosh. Compress before responsive resizing to avoid sending oversized images.
## Responsive images
Use `srcset` and `sizes` to serve appropriate resolution per device: ``. Reduces data waste on mobile.
## Lazy loading images
Add `loading="lazy"` to below-the-fold images: ``. Load only when user scrolls near. Dramatically reduces initial page load time.
## Image optimization workflow
1) Choose correct format, 2) Compress aggressively, 3) Use responsive images, 4) Lazy load below-the-fold, 5) Consider WebP with fallbacks. Images often comprise 50% of page weight.
Quick check
**Quiz:** What is a major advantage of WebP format?
- [ ] 30% smaller file size than JPEG
- [ ] Universal browser support
- [ ] Animated without performance cost
`. Load only when user scrolls near. Dramatically reduces initial page load time.
## Image optimization workflow
1) Choose correct format, 2) Compress aggressively, 3) Use responsive images, 4) Lazy load below-the-fold, 5) Consider WebP with fallbacks. Images often comprise 50% of page weight.
Quick check
**Quiz:** What is a major advantage of WebP format?
- [ ] 30% smaller file size than JPEG
- [ ] Universal browser support
- [ ] Animated without performance cost
`. Reduces data waste on mobile.
## Lazy loading images
Add `loading="lazy"` to below-the-fold images: `