Image & Video Optimization: Modern Formats & Techniques
Images and videos are often the largest resources on a page. Modern optimization techniques — next-gen formats, responsive delivery, lazy loading, and explicit dimensions — can reduce media size by 50-85% while improving LCP and eliminating layout shifts.
Instead of carrying one giant suitcase (full-size JPEG) for every trip (device), pack the right size for the journey (screen size), compress it efficiently (WebP/AVIF), and only open it when you arrive at the destination (lazy loading).
1Modern Image Formats
WebP offers ~30% savings over JPEG. AVIF offers even better compression. Always provide fallbacks with <picture>.
<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>
2Responsive Images & Lazy Loading
Use srcset + sizes for responsive delivery and loading="lazy" for below-the-fold images. Always set width/height or aspect-ratio.
3Video Optimization
Use WebM + MP4 with preload="metadata", lazy loading via poster, and facade patterns for third-party embeds like YouTube.
4Image CDNs & Automation
Tools like Next.js Image, Cloudinary, or Imgix handle format conversion, resizing, and optimization automatically.
| Property | JPEG | WebP | AVIF |
|---|---|---|---|
| Size | Baseline | ~30% smaller | ~50% smaller |
| Modern | Legacy fallback | Broad support | Growing support |
| Quality | Good for photos | Excellent | Best |
JPEG
Size
Baseline
Modern
Legacy fallback
Quality
Good for photos
WebP
Size
~30% smaller
Modern
Broad support
Quality
Excellent
AVIF
Size
~50% smaller
Modern
Growing support
Quality
Best
Common questions
- ›“How do you optimize images for web performance?”
- ›“Explain srcset and the picture element.”
- ›“How do you prevent layout shift from images?”
- ›“What is the difference between WebP and AVIF?”
What interviewers look for
- Knowledge of modern formats and fallbacks
- Understanding of responsive images and lazy loading
- CLS prevention (dimensions, aspect-ratio)
- Connection to Core Web Vitals (LCP/CLS)
Short answer (60 sec)
Use WebP/AVIF with <picture> fallbacks, srcset for responsive sizes, loading="lazy" for below-fold images, and always set explicit width/height to prevent CLS.
Detailed answer (senior level)
Modern image optimization combines next-gen formats (AVIF > WebP > JPEG), responsive delivery via srcset, lazy loading, and explicit dimensions. Use image CDNs for automation. For videos, use efficient codecs and facade patterns for embeds. These techniques directly improve LCP and eliminate CLS.
- Serving full-size images to mobile devices
- No dimensions on <img> tags (causes CLS)
- Forgetting lazy loading on below-fold images
- Using only one format without fallbacks
- Compressing images at build time without CDN
- ✓Use AVIF/WebP with proper fallbacks
- ✓Implement srcset + sizes for responsive images
- ✓Always set width/height or aspect-ratio
- ✓Lazy load everything below the fold
- ✓Use image CDNs for automatic optimization
- ✓Measure impact on LCP and CLS
- ✓Combine with code splitting for full wins