Save-Data header
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
The HTTPSave-Datarequest header is anetwork 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 alow entropy hint, and hence may be sent by the client even if not requested by the server using anAccept-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, likeDownlink andRTT.
A value ofOn 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.
In this article
Syntax
Save-Data: <sd-token>Directives
<sd-token>A value indicating whether the client wants to opt in to reduced data usage mode.
onindicates yes, whileoff(the default) indicates no.
Examples
>UsingSave-Data: on
The following message requests a resource withSave-Data header indicating the client is opting in to reduced data mode:
GET /image.jpg HTTP/1.1Host: example.comSave-Data: onThe server responds with a200 response, and theVary header indicates thatSave-Data may have been used to create the response, and caches should be aware of this header to differentiate responses:
HTTP/1.1 200 OKContent-Length: 102832Vary: Accept-Encoding, Save-DataCache-Control: public, max-age=31536000Content-Type: image/jpeg[…]OmittingSave-Data
In this case, the client requests the same resource without theSave-Data header:
GET /image.jpg HTTP/1.1Host: example.comThe server's response provides the full version of the content.TheVary header ensures that responses should be separately cached based on the value of theSave-Data header.This can ensure that the user is not served a lower-quality image from the cache when theSave-Data header is no longer present (e.g., after having switched from cellular to Wi-Fi).
HTTP/1.1 200 OKContent-Length: 481770Vary: Accept-Encoding, Save-DataCache-Control: public, max-age=31536000Content-Type: image/jpeg[…]Specifications
| Specification |
|---|
| Save Data API> # save-data-request-header-field> |
Browser compatibility
See also
- CSS
@mediafeatureprefers-reduced-dataExperimental Varyheader which indicates that the content served varies depending on the value ofSave-Data(seeHTTP Caching: Vary)NetworkInformation.saveData- Help Your Users
Save-Dataon 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)