prefers-reduced-data Playground

1.What your browser reports

Checking…

Honest caveat: support is thin. Chrome and Edge have this behind the experimental-web-platform-features flag, and Firefox and Safari don't report it at all. So the line above will say no preference for almost everyone. The override below lets you try both paths anyway.

Data-saver override (demo only) Follow the system setting Pretend data saver is on Pretend data saver is off

2.The demo: one hero, two weights

Serving: …

Alpine lake at sunrise with snow-capped peaks and pine forest — Same scene, two files. Only the chosen one is ever requested — open the Network tab and confirm the other never loads.

3.What else to gate when data is precious

Hero and inline images — serve a lite variant or a smaller responsive size (this demo).
Autoplay video — show the poster frame; play only on tap.
Web fonts — fall back to the system stack instead of downloading hundreds of KB.
Heavy animation libraries — skip them and keep the page static.
Prefetch / preload of below-the-fold resources — drop it.
Server-side: check the Save-Data request header for the same signal.

4.The pattern

// respect the user's data-saver preference
const reduceData = window.matchMedia('(prefers-reduced-data: reduce)');

function chooseHero() {
  // only the chosen file is ever requested
  heroImg.src = reduceData.matches ? 'hero-lite.jpg' : 'hero-heavy.jpg';
}

reduceData.addEventListener('change', chooseHero);
chooseHero();

/* the CSS-only version: hide the heavy stuff */
@media (prefers-reduced-data: reduce) {
  .hero-video { display: none; } /* poster image shows instead */
}