Web Fundamentals

Image & Video Optimization: Modern Formats & Techniques

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
easyWeb Fundamentals

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

TL;DRUse WebP/AVIF + srcset + dimensions + lazy loading. Always reserve space to prevent CLS.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

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).

Choose Right Format (WebP/AVIF)
Serve Right Size (srcset)
Lazy Load Below Fold
Reserve Space (dimensions)

1Modern Image Formats

WebP offers ~30% savings over JPEG. AVIF offers even better compression. Always provide fallbacks with <picture>.

picture.htmlhtml
<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.

Key Takeaways
  • ✓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
PreviousNext

Topic Guide

On this page