@media (prefers-reduced-data) {
  /* styles that download less stuff */
}

• @argyleink

• w3c/csswg-drafts#4575
• w3c/csswg-drafts#2370

This feature indicates explicit user opt-in for a reduced data experience that when communicated to origins allows them to deliver alternate content honoring such preference:

• smaller or no images
• less/no web fonts
• smaller video resources
• display swapping on lazy content
• alternate markup
• less/no promotions

Users paying per megabyte become very aware of heavy URLs, avoiding them to save money.

Consider this media browsing demo experience.

Comparisons from Chrome Canary, experiment enabled, within a viewport of 1920x1280.

55 requests total 949kb, with additional requests made for each image on scroll (loading is lazy).

7 requests total 104kb, with no additional requests made on scroll.

@media (prefers-reduced-data: reduce) {
    figure > picture {
        display: none
    }
}

N/A

https://simonhearne.com/2020/save-data/

https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-data

.image {
  background-image: url("images/heavy.jpg");
}

@media (prefers-reduced-data: reduce) {
  /* Save-Data: On */
  .image {
    background-image: url("images/light.jpg");
  }
}

A user in a data-saver mode wants to browse a webpage about books. The site uses the prefers-reduced-data media to remove book images from the layout, and the user is able to have low-bandwidth access to the full collection.

@media (prefers-reduced-data: reduce) {
  .book img {
    display: none;
  }
}

Note: this does require loading="lazy" on the images so they aren't fetched as soon as possible, giving CSS enough time to hide them from the DOM tree.

A website leans on fallback fonts by default, and if the user is visiting not in a reduced data state, they load their web fonts.

https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/#savedata-and-prefers-reduced-data

A user's operating system may offer the data-saver (perhaps alternate verbiage but same intent) option OR a browser may offer it within the settings and scope of the application. The choice was made to respect both, flagging prefers-reduced-data to true if the system or the browser have the setting enabled.

User agents should use their own user centered discretion when handling a toggle of this value, whether it's toggled post page load or during page load. A primary goal could be to not download unnecessary data. Consider, if a page is already loaded with high quality assets and the user changes their preference to reduced, the page should perhaps not update the document right away, instead wait for an explicit page reload invocation from the user. Consider also, if a page is taking a long time to download and a user changes their preference to reduced, this could be a nice point to save the user's bandwidth and immediately switch to downloading smaller assets.

User agents should be free to implement logic as they see appropriate for situations like these, and also be aware the situations exist.

• Adam Argyle (implementor) : Positive
• CSSWG: Positive

Many thanks for valuable feedback and advice from:

• Chen Hui Jing (@huijing)
• Yoav Weiss (@yoavweiss)
• CSSWG Proposal w3c/csswg-drafts#2370