Skip to main content
Dublin Library

The Publishing Project

New and Upcoming CSS: @media (prefers-reduced-data)



This feature is only supported behind a flag in Chromium browsers since version 85 and, as far as I know, there is no polyfill. Do not use this feature in production.

The prefers-reduced-data media query detects if the user has requested the web content that consumes less internet traffic via the browser or operating system's data-saver option.

Until the introduction of the prefers-reduced-data media query, there was no way to honor the data-saver settings.

In a music shop app or in any other application where we have a lot of images representing products, we can ask the browser to remove the images if the user has requested to save data using something like this:

@media (prefers-reduced-data: reduce) {
  .album-cover {
    display: none;

This will reduce the number of requests and will improve the loading speed and overall performance of your site.

Edit on Github