Cache-Control Headers for Image and Video Assets

Efficient asset delivery begins at the edge. Proper Cache-Control Headers for Image and Video Assets configuration dictates how browsers, CDNs, and intermediate proxies store media. Aligning cache directives with immutable asset fingerprints reduces origin load by 30–60%. This pipeline stage bridges automated encoding workflows and client-side rendering.

Implementation Patterns & Server Configuration

Directives like max-age, public, immutable, and stale-while-revalidate must be applied contextually. Static, fingerprinted media should leverage long-lived caching to bypass validation requests entirely. For frequently updated assets, stale-while-revalidate ensures immediate delivery while background updates occur. See our Best practices for setting max-age on CDN media assets for granular tuning strategies.

location ~* \.(jpg|jpeg|png|webp|avif|mp4|webm)$ {
 expires 1y;
 add_header Cache-Control "public, max-age=31536000, immutable";
 add_header Vary "Accept-Encoding";
}

{
  "headers": [
    {
      "source": "/assets/media/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable, stale-while-revalidate=86400"
        }
      ]
    }
  ]
}

Browser Quirk & Accessibility Notes: Safari historically ignores immutable without an explicit max-age value. Always pair with Vary: Accept-Encoding to prevent serving Brotli-compressed assets to legacy clients. Wrap media elements with alt text and aria-label attributes to prevent screen reader timeouts during cache validation cycles.

Format-Specific Caching & Browser Support Matrix

Modern image and video formats exhibit varying cache efficiency based on compression characteristics. Next-generation formats deliver superior compression ratios, directly impacting cache hit rates and storage overhead. Refer to AVIF vs WebP Compression Benchmarks for empirical data on payload reduction. The matrix below outlines recommended caching behaviors aligned with browser compatibility.

Browser Quirk & Accessibility Notes: Safari 15 requires explicit Content-Type headers to cache AVIF correctly. Always use <picture> or <video> with preload="auto" and aria-describedby to maintain accessibility during cache validation.

Adaptive Bitrate Streaming & Chunk-Level Caching

Video delivery requires segmented caching strategies. HLS and DASH manifests should use short-lived max-age values with stale-while-revalidate to accommodate live updates. Media segments (.ts, .m4s) benefit from immutable caching once encoded. Codec selection heavily influences chunk size and cache eviction frequency. For a technical breakdown of encoding efficiency and bandwidth implications, consult Understanding Video Codecs: VP9 vs H.265 vs AV1. Proper segment caching reduces rebuffering events by up to 35% and optimizes CDN edge storage.

Browser Quirk & Accessibility Notes: Chrome’s Media Source Extensions (MSE) aggressively prefetches segments. Ensure Accept-Ranges: bytes is explicitly set to prevent 206 Partial Content failures on edge nodes. Provide poster attributes to prevent blank frames during adaptive bitrate switches.

Fallback Strategies & Cache Miss Handling

When cache directives fail or edge nodes purge assets unexpectedly, graceful degradation prevents layout shifts. Implement stale-if-error=43200 to serve expired assets during origin outages. Pair this with <picture> and <video> source fallbacks to ensure legacy browsers receive compatible formats. Configure origin servers to return 304 Not Modified when If-None-Match headers match. This preserves cache efficiency during revalidation cycles and reduces origin CPU load by 40%.

• stale-if-error=43200 for CDN resilience during origin downtime
• ETag + Last-Modified dual validation for precise origin synchronization
• Client-side service worker cache-first with network fallback for PWA media delivery

Browser Quirk & Accessibility Notes: Firefox ignores stale-if-error on cross-origin requests without explicit CORS headers. Always include Access-Control-Expose-Headers: Cache-Control. Ensure fallback media includes descriptive alt and track elements for captions to maintain WCAG compliance during cache misses.

Core Web Vitals & Accessibility Impact

Strategic cache configuration directly correlates with measurable performance metrics and inclusive user experiences. Long-lived caching of above-the-fold media improves Largest Contentful Paint (LCP) by 20–40% on repeat visits. Proper immutable flags reduce Cumulative Layout Shift (CLS) by preventing delayed asset swaps. For accessibility, cached media enables faster delivery of prefers-reduced-motion variants. Teams should monitor cache hit ratios alongside LCP and Time to Interactive (TTI) to validate pipeline efficiency.

Browser Quirk & Accessibility Notes: iOS Safari aggressively caches media in memory, which can mask CLS issues during local testing. Always validate layout stability using Chrome DevTools’ Performance panel with network throttling enabled. Ensure prefers-reduced-motion media queries serve pre-cached lightweight variants to prevent jarring transitions.