The Save-Data header is a specialized HTTP request header that acts as a "polite request" from the user's device. It tells your server: "Hey, I'm on a limited data plan or a slow connection; please send me the lightest version of this page possible."

Unlike other "Client Hints" that require the server to ask for them first, Save-Data is considered a low-entropy hint. This means the browser can send it automatically if the user has enabled a "Data Saver" mode in their settings.

🛠 How It Works

When a browser sends Save-Data: on, the server can adapt the response to be more data-efficient.

Strategies for the Server:

  • Images: Serve highly compressed JPEGs or modern formats like WebP/AVIF instead of high-resolution PNGs.
  • Video: Default to lower resolutions (e.g., 480p instead of 1080p) or disable auto-play.
  • Markup: Strip out non-essential decorative fonts, heavy tracking scripts, or high-definition background videos.
  • Polling: Reduce the frequency of "heartbeat" checks or background data refreshes.

📦 The Importance of the Vary Header

If your server changes its content based on Save-Data, you must include Save-Data in the Vary response header.

HTTP

HTTP/1.1 200 OK
Vary: Save-Data, Accept-Encoding

Why? This prevents caching errors. Without it, a CDN might store the "tiny" version of an image meant for a data-saving user and accidentally serve that low-quality image to a user on a high-speed fiber connection later.

🚦 Status & Compatibility

⚠️ Experimental: Much like the RTT header, this is not yet a global standard. It is primarily used by Chromium-based browsers (Chrome, Edge, Opera) and is most common on mobile devices.

BrowserSupport StatusChrome (Desktop & Android)✅ Supported (v49+)Edge✅ Supported (v79+)Opera✅ Supported (v35+)Firefox / Safari❌ Not Supported

📝 Syntax

The syntax is incredibly simple and only has one active state:

  • Save-Data: on: User wants to save data.

(Note: If the user doesn't care, the header is usually just omitted entirely rather than sending off).

💡 Pro-Tip: The CSS Connection

You don't always need a server to handle this. Modern CSS supports a media query called prefers-reduced-data which mirrors this header. You can use it to hide heavy decorative elements directly in your stylesheets:

CSS

@media (prefers-reduced-data: reduce) {
  .hero-video {
    display: none;
  }
  .fallback-image {
    display: block;
  }
}