Web Media Optimization Cheat Sheet

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.

A single-page index of quick back-links to every page in the web Media Optimization sub-section, grouped the same way as the sub-section index.

The downloadable PDF is a separate, single A4 page meant for printing. It states the baseline date (2026-10-07) and covers:

  • a complete responsive <picture> example and what srcset, sizes, width and height each do;

  • the loading rules: lazy loading below the fold, never on the LCP image, fetchpriority, decoding and video attributes;

  • BlurHash decoding to a canvas or data URL, the punch caveat and the placeholder lifecycle;

  • Next.js Image props, images.formats, custom loaders and preload replacing priority;

  • Angular NgOptimizedImage, its loaders and placeholder options;

  • a React library status table; and

  • a video player comparison with the native HLS fallback pattern, plus image CDN loader URL shapes.

Images — Native HTML Images and Lazy Loading and BlurHash in the Browser.

Frameworks — Next.js Image, React Image Libraries and Angular NgOptimizedImage.

Video — Video Playback and Streaming.

Overview — Media Optimization for the Web.

Download the Web Media Optimization Cheat Sheet (PDF)