{"id":18056019,"url":"https://github.com/argyleink/prefers-reduced-data-explainer","last_synced_at":"2026-03-19T03:04:24.440Z","repository":{"id":145673016,"uuid":"473717085","full_name":"argyleink/prefers-reduced-data-explainer","owner":"argyleink","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-22T22:57:35.000Z","size":16,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T13:30:43.451Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/argyleink.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-24T17:57:19.000Z","updated_at":"2022-10-15T22:02:26.000Z","dependencies_parsed_at":"2024-10-31T01:13:30.163Z","dependency_job_id":"7e757401-44be-4546-8f65-a8bc89de7170","html_url":"https://github.com/argyleink/prefers-reduced-data-explainer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprefers-reduced-data-explainer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprefers-reduced-data-explainer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprefers-reduced-data-explainer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprefers-reduced-data-explainer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/argyleink","download_url":"https://codeload.github.com/argyleink/prefers-reduced-data-explainer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318721,"owners_count":20919483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T01:13:20.829Z","updated_at":"2026-01-18T01:36:12.183Z","avatar_url":"https://github.com/argyleink.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"```css\n@media (prefers-reduced-data) {\n  /* styles that download less stuff */\n}\n```\n\n## Authors:\n- [@argyleink](https://github.com/argyleink)\n\n## Participate\n- https://github.com/w3c/csswg-drafts/pull/4575\n- https://github.com/w3c/csswg-drafts/issues/2370\n\n## Introduction\n\nThis feature indicates explicit user opt-in for a reduced data experience \nthat when communicated to origins allows them to deliver alternate content honoring such preference: \n- smaller or no images\n- less/no web fonts\n- smaller video resources\n- display swapping on lazy content\n- alternate markup\n- less/no promotions\n\n## Motivating Use Cases\n\nUsers paying per megabyte become very aware of heavy URLs, avoiding them \nto save money.\n\nConsider [this media browsing demo experience](https://gui-challenges.web.app/media-scroller/dist/). \n\n\u003e Comparisons from Chrome Canary, experiment enabled, within a viewport of 1920x1280. \n\n#### Before reduced data and CSS\n`55` requests total `949kb`, \nwith additional requests made for each image on scroll (loading is lazy).\n\n![Screen Shot 2022-03-24 at 11 13 15 AM](https://user-images.githubusercontent.com/1134620/159983004-b138ba4e-44de-4fb3-a6bd-76b91df4d347.png)\n\n#### After reduced data and CSS\n\n`7` requests total `104kb`, \nwith **no additional requests made on scroll**.\n\n```css\n@media (prefers-reduced-data: reduce) {\n    figure \u003e picture {\n        display: none\n    }\n}\n```\n\n![Screen Shot 2022-03-24 at 11 15 29 AM](https://user-images.githubusercontent.com/1134620/159983663-c8bfbd39-23cd-49ba-96f9-f532a7fde781.png)\n\n\n## Non-goals\nN/A\n\n## User research\nhttps://simonhearne.com/2020/save-data/\n\n## `prefers-reduced-data`\n\nhttps://www.w3.org/TR/mediaqueries-5/#prefers-reduced-data\n\n```css\n.image {\n  background-image: url(\"images/heavy.jpg\");\n}\n\n@media (prefers-reduced-data: reduce) {\n  /* Save-Data: On */\n  .image {\n    background-image: url(\"images/light.jpg\");\n  }\n}\n```\n\n## Key scenarios\n\n### Scenario 1\n\nA user in a data-saver mode wants to browse a webpage about books. \nThe site uses the `prefers-reduced-data` media to remove book images from the layout, \nand the user is able to have low-bandwidth access to the full collection.\n\n```css\n@media (prefers-reduced-data: reduce) {\n  .book img {\n    display: none;\n  }\n}\n```\n\n\u003e 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.\n\n### Scenario 2\n\nA website leans on fallback fonts by default, and if the user is visiting not in a reduced data state, \nthey load their web fonts. \n\nhttps://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/#savedata-and-prefers-reduced-data\n\n## Detailed design discussion\n\n### Design choice #1\n\nA user's operating system may offer the data-saver (perhaps alternate verbiage but same intent) \noption OR a browser may offer it within the settings and scope of the application. \nThe choice was made to respect both, flagging `prefers-reduced-data` to true \nif the system or the browser have the setting enabled.\n\n### Design consideration #1\n\nUser agents should use their own user centered discretion when \n\thandling a toggle of this value, whether it's toggled post page load \n\tor during page load. A primary goal could be to not download unnecessary \n\tdata. Consider, if a page is already loaded with high quality assets and \n\tthe user changes their preference to reduced, the page should perhaps \n\tnot update the document right away, instead wait for an explicit page \n\treload invocation from the user. Consider also, if a page is taking a \n\tlong time to download and a user changes their preference to reduced, \n\tthis could be a nice point to save the user's bandwidth and immediately \n\tswitch to downloading smaller assets. \n \n User agents should be free to \n\timplement logic as they see appropriate for situations like these, and \n\talso be aware the situations exist.\n\n## Stakeholder Feedback / Opposition\n\n- Adam Argyle (implementor) : Positive\n- CSSWG: Positive\n\n## References \u0026 acknowledgements\n\nMany thanks for valuable feedback and advice from:\n\n- Chen Hui Jing ([@huijing](https://github.com/huijing))\n- Yoav Weiss ([@yoavweiss](https://github.com/yoavweiss))\n- CSSWG Proposal https://github.com/w3c/csswg-drafts/issues/2370\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fprefers-reduced-data-explainer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fargyleink%2Fprefers-reduced-data-explainer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fprefers-reduced-data-explainer/lists"}