Image & Video Optimization: Modern Formats & Techniques
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
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.
- ✓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