A Data-Saving Media Query You Can Prepare For Today

prefers-reduced-data is a media query that lives in the Media Queries Level 5 spec, alongside more familiar user-preference features like prefers-color-scheme and prefers-reduced-motion. Unlike those, however, no browser currently supports it in production. The Polypane team, which has written extensively on the subject, already emulates the feature in its own browser behind a Chromium flag.

Before getting too excited, the spec itself flags two concerns: the query could become an unwanted fingerprinting vector with a bias against lower-income users on limited data plans, and the CSS-WG does not yet consider the feature stable enough to ship. None of that stops you from understanding the syntax and how you'd implement it once support arrives.

@media (prefers-reduced-data: reduce) {
  /* Stuff for reduced data preferences */
}

@media (prefers-reduced-data: no-preference) {
  /* Stuff for no data preferences */
}

Practical Patterns for Leaner Pages

The Polypane post runs through several credible use cases worth knowing:

  • Fonts. Declare a @font-face and apply it to body only for users with no-preference. For those with reduced, serve a lighter system stack instead of downloading webfont files.
  • Background images. Large hero splashes can be gated behind no-preference. Users opting for reduced either get a scaled-down version or no image at all.
  • Responsive images. The media attribute on the <source> element inside a <picture> block can be paired with this query, e.g., <source media="(prefers-reduced-data: reduce)" />, to swap in smaller assets.
  • Video behavior. JavaScript can inspect window.matchMedia('(prefers-reduced-data: no-preference)').matches and conditionally set autoplay and preload attributes on video elements.
  • Disabling infinite scroll. Users who prefer reduced data shouldn't auto-load more content simply by reaching the page bottom. The pattern can be turned off for them entirely.

Those are by no means the only applications. The query can also help decide whether to link out to a data-heavy page, serve low-resolution PDFs for download, or conditionally load entire scripts, stylesheets, and libraries.

Adopt a Reduced-Data Default

A worthwhile principle emerges from the article: treat reduced as the baseline, just as prefers-reduced-motion advocates suggest. Build the lean, fast experience first, and only add the extra payload when a user explicitly signals no-preference. Browsers that don't support the query then fall back to the lighter experience by default, mirroring the progressive enhancement approach of mobile-first design. That way, you're building for data-conscious users from the start and layering on extras for those who want them.