Lesson 4 / 25
Image optimization
Techniques to reduce image file sizes without sacrificing quality through formats, compression, and lazy loading.
Modern image formats
Use WebP (about 25–35% smaller than JPEG) or AVIF (often smaller still). Provide fallbacks for older browsers: <picture><source srcset=photo.avif type=image/avif><img src=photo.jpg></picture>.
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: <img srcset='small.jpg 480w, large.jpg 1200w' sizes='(max-width: 600px) 100vw, 50vw'>. Reduces data waste on mobile.
Lazy loading images
Add loading="lazy" to below-the-fold images: <img src=photo.jpg loading=lazy>. Load only when user scrolls near. Dramatically reduces initial page load time.
Image optimization workflow
- 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
Quick check: What is a major advantage of WebP format?
- 30% smaller file size than JPEG
- Universal browser support
- Animated without performance cost
- Lossless quality at any size
Answer
30% smaller file size than JPEG — WebP typically produces smaller files than JPEG at similar quality.