Media assets are the dominant source of bandwidth cost and Largest Contentful Paint regressions on modern web platforms.
This site covers the full delivery stack: choosing between AVIF, WebP, and legacy JPEG; tuning AV1, VP9, and H.265 encode pipelines;
configuring Cache-Control and Vary: Accept headers correctly on CDNs; and writing srcset/sizes
attributes that actually reflect your layout breakpoints.
Coverage runs the whole path from source asset to painted pixel: encoding and format choice, progressive rendering and placeholders, responsive markup, lazy loading, fetch priorities and Early Hints, adaptive bitrate streaming, CDN and edge delivery (Cloudflare Image Resizing, AWS CloudFront cache behaviors, Fastly VCL negotiation, signed-URL access control), framework and build-tool integration (next/image, Nuxt, Vite, Astro, Sharp, FFmpeg), and the monitoring that catches media regressions before they ship.
Every guide targets engineers who need depth — benchmark tables, runnable CLI and HTML snippets, browser compatibility matrices (Safari 14/16, Chrome 85+, Firefox 93+, Edge 18+), and explicit tradeoff callouts rather than generic best-practice summaries.
Site Sections
Core Media Fundamentals & Next-Gen Formats
Codec selection, compression benchmarks, MIME type configuration, cache-control strategies, progressive rendering and placeholders, and video codec theory covering AVIF, WebP, AV1, VP9, and H.265.
Lazy Loading, Preloading & Fetch Priorities
Native lazy loading, IntersectionObserver patterns, preload vs prefetch decisions, 103 Early Hints and Speculation Rules, and fetchpriority tuning for LCP images and critical video.
Responsive Image & Video Delivery
Mastering srcset and sizes, art direction with <picture>, CSS container queries for dynamic media sizing, adaptive bitrate streaming, and framework integration for Next.js and React.
CDN & Edge Media Delivery
Edge image transformation and cache-key design across Cloudflare, AWS CloudFront, and Fastly — plus Vary: Accept negotiation, signed-URL access control, and media performance monitoring.
Framework & Build-Tool Media Integration
Wiring optimized media into modern frameworks and build pipelines: the Next.js Image component, @nuxt/image and Vite, Astro's <Image>/<Picture> components, and Sharp/FFmpeg build pipelines.
Start Here
If you are new to the site, these pages cover the highest-leverage decisions in a modern media delivery pipeline:
- AVIF vs WebP — benchmark data and when to use each
- Configuring AVIF fallbacks for Safari 14
- Setting max-age on CDN media assets
- fetchpriority for LCP image optimisation
- When to use rel=preconnect for CDN origins
- Calculating optimal sizes attribute values
- Using next/image with custom loader configurations
- Debugging incorrect Content-Type headers for WebM
- Configuring Cloudflare Image Resizing URL parameters
- Enforcing image-weight budgets with Lighthouse CI
- Optimizing images with the Next.js Image component
New in This Update
The latest additions go deeper on delivery mechanics, streaming, access control, and build pipelines:
- Progressive rendering, LQIP and BlurHash placeholders
- 103 Early Hints and Speculation Rules for media
- Adaptive bitrate streaming with HLS and DASH
- Signed URLs and media access control
- Sharp and FFmpeg media build pipelines
- Building an HLS bitrate ladder with FFmpeg
- Generating BlurHash placeholders with Sharp
- Generating CloudFront signed URLs for private media
- Why loading="lazy" on above-the-fold images hurts LCP
- Density descriptors vs width descriptors in srcset