Media Optimization for the Web

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production.

See the section bibliography for the reference material consulted while preparing these pages.

The backend produces optimized variants, see Media Optimization for the backend. This sub-section is the other half: how a web page asks for the right variant, shows something useful while it loads, and plays video that adapts to the connection. It is current as of 2026-10-07, and each page names the versions it was checked against.

flowchart LR API["API response: variants, width, height, blurhash"] --> H["HTML: picture, srcset, sizes, width, height"] API --> P["Placeholder: BlurHash decoded to 32 px"] H --> L["Lazy loading, fetchpriority for the LCP image"] P --> L L --> D["Decoded image replaces the placeholder"] API --> V["Video: poster plus HLS or DASH manifest"] V --> PL["Player: hls.js, Shaka Player, native HLS"]

Pages

Page What it covers

Native HTML Images and Lazy Loading

img with srcset, sizes, width and height, decoding, picture with AVIF and WebP, loading lazy, fetchpriority, and the video element.

BlurHash in the Browser

Decoding into a canvas or data URL, react-blurhash, unlazy, punch, ThumbHash and server-side placeholders.

Next.js Image

sizes and fill, placeholder blur with a BlurHash, custom loaders for image CDNs, formats and remotePatterns, and preload replacing priority.

React Image Libraries

react-lazyload, react-image, react-lazy-load-image-component, an IntersectionObserver hook, and a recommendation table with status.

Angular NgOptimizedImage

ngSrc, priority, placeholder, built-in loaders, a custom loader and BlurHash with the blurhash package.

Video Playback and Streaming

The video element, native HLS, hls.js, dash.js, Shaka Player, Video.js, Media Source Extensions and ManagedMediaSource.

Cheat Sheet (PDF)

A one-page summary of attributes, loaders, placeholder code and players.

Related pages

Bibliography

Every source below is the official site, repository or documentation page of the library, service or standard it supports. Links were checked from an authoring environment with restricted outbound access. Entries marked (unverified) could not be opened from there (the site refused or blocked the request), so open them and confirm the content, version and status before you rely on them. Entries without the mark were opened successfully, or, for package pages, confirmed through the package registry.

Native HTML, formats and performance

BlurHash and placeholders

Next.js and image CDNs

React

Angular

Video players and streaming