Save-Data
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The HTTP Save-Data
request header is a network client hint which indicates the client's preference for reduced data usage.
This could be for reasons such as high transfer costs, slow connection speeds, etc.
Save-Data
is a low entropy hint, and hence may be sent by the client even if not requested by the server using an Accept-CH
response header.
Further, it should be used to reduce data sent to the client irrespective of the values of other client hints that indicate network capability, like Downlink
and RTT
.
A value of On
indicates explicit user opt-in into a reduced data usage mode on the client.
When communicated to origins, this allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
Note: Disabling HTTP/2 Server Push (RFC 7540, section 8.2: Server Push) may reduce data downloads. Note that this feature is no longer supported by default in most major browser engines.
Header type | Request header, Client hint |
---|---|
Forbidden header name | No |
CORS-safelisted response header | No |
Syntax
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
BCD tables only load in the browser
See also
- CSS
@media
featureprefers-reduced-data
Experimental Vary
header which indicates that the content served varies depending on the value ofSave-Data
(see 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)