Creating websites with prefers-reduced-data

The prefers-reduced-data media query detects if the user prefers being served alternate content that uses less data for the page to be rendered.

Spoiler: there is no browser support… yet.

Why do we want to reduce data?

With the average size of webpages increasing, and those browsing on mobile devices over 3G/4G networks, it is very important that we can offer up solutions to those who may not be on gigabit connections. For example, for people using the internet in countries that do not have fast internet, it is necessary for them to access websites that can work on those reduced speeds, and show them the information they need without them needing to wait for unnecessary content to load over the slow network.

It also makes a lot of sense to offer this to those who do have access to fast connections. This way, we can offer more choice for people browsing, supplying a lower data version of a webpage to those who choose to receive it, therefore reducing the environmental impact of that webpage.

What could the prefers-reduced-data media query be used for?

This example is given on w3.org. Essentially, the prefers-reduced-data media query would give developers the scope to load different media or potentially change a website’s content and functionality based upon the preference of the user wanting or needing a reduced data version.

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

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

How to test the prefers-reduced-data media query now

In Chrome v86, you can use DevTools to emulate the prefers-reduced-data media query. Though, only if you have enabled the function under the experimental web features flag. Find out more about using this on developers.google.com

Our thoughts

We think the prefers-reduced-data media query could be a very useful and easy to use method to help developers offer a reduced data version of a website. We hope it gets worked up and added into the next specification to be rolled out into browsers soon.