Save-Data: <sd-token>
Directives
<sd-token>
-
A value indicating whether the client wants to opt in to reduced data usage mode.
on
indicates yes, whileoff
(the default) indicates no.
Examples
Using Save-Data: on
The following message requests a resource with Save-Data
header indicating the client is opting in to reduced data mode:
GET /image.jpg HTTP/1.1
Host: example.com
Save-Data: on
The server responds with a 200
response, and the Vary
header indicates that Save-Data
may have been used to create the response, and caches should be aware of this header to differentiate responses:
HTTP/1.1 200 OK
Content-Length: 102832
Vary: Accept-Encoding, Save-Data
Cache-Control: public, max-age=31536000
Content-Type: image/jpeg
[…]
Omitting Save-Data
In this case, the client requests the same resource without the Save-Data
header:
GET /image.jpg HTTP/1.1
Host: example.com
The server's response provides the full version of the content.
The Vary
header ensures that responses should be separately cached based on the value of the Save-Data
header.
This can ensure that the user is not served a lower-quality image from the cache when the Save-Data
header is no longer present (e.g., after having switched from cellular to Wi-Fi).
HTTP/1.1 200 OK
Content-Length: 481770
Vary: Accept-Encoding, Save-Data
Cache-Control: public, max-age=31536000
Content-Type: image/jpeg
[…]
Specifications
Specification |
---|
Save Data API # save-data-request-header-field |
Browser compatibility
See also
- CSS
@media
featureprefers-reduced-data
Experimental - HTTP Caching: Vary)
NetworkInformation.saveData
- Help Your Users
Save-Data
on css-tricks.com - Delivering Fast and Light Applications with Save-Data - web.dev on web.dev
- Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)