How Save-Data Mode Instructs CDNs for Low-Res JPEGs

Save-Data mode in mobile browsers reduces data consumption by signaling network constraints directly to web servers and Content Delivery Networks (CDNs) through specialized HTTP request headers. When enabled by the user, the browser includes a Save-Data: on header with every outgoing resource request. Edge servers within a CDN detect this directive, intercept incoming image requests, and dynamically rewrite them to generate and serve lower-fidelity JPEG files with increased compression, stripped metadata, and reduced dimensions, ultimately reducing the payload transferred over cellular networks.

1. The Client-Side Signal: Save-Data: on

When a user enables "Data Saver" or "Lite Mode" in a mobile browser (such as Chromium-based browsers), the client automatically appends the Save-Data Client Hint to all HTTP and HTTPS request headers:

GET /images/hero.jpg HTTP/1.1
Host: example.com
Save-Data: on

This single token explicitly informs downstream network infrastructure that the client requests a data-conserving version of the requested asset.

2. CDN Edge Detection and Request Rewriting

Modern CDNs utilize edge computing or integrated image optimization engines (such as Cloudflare Polish, Fastly Image Optimizer, or Akamai Image & Video Manager). When a request for an image arrives at the CDN edge node, the edge server evaluates incoming headers:

1. Header Parsing: The CDN checks for Save-Data: on.
2. Dynamic Parameter Injection: If detected, the CDN rewrites the image transformation parameters either through internal service workers, VCL (Varnish Configuration Language), or edge logic. For example, a default request for hero.jpg can be mapped to an internal transformation query such as hero.jpg?quality=40&strip=all.
3. JPEG Re-compression: The CDN’s image processor compresses the JPEG using a higher quantization matrix (e.g., lowering the visual quality metric from a default 80–85 down to 40–50), removes all unnecessary EXIF and color profile metadata, and can optionally downscale the image pixel dimensions to match standard mobile viewport widths.

3. Edge Caching and the Vary: Save-Data Header

To ensure that compressed, low-fidelity assets are not delivered to standard users, the CDN partitions its cache using the Vary HTTP response header.

When the CDN processes or origins the asset, it marks the response with:

HTTP/1.1 200 OK
Content-Type: image/jpeg
Vary: Save-Data, Accept
Cache-Control: public, max-age=31536000

The Vary: Save-Data header instructs both the CDN cache and intermediary proxies to store two distinct versions of the exact same URL:

• Standard Cache Entry: Served when Save-Data is absent or set to off.
• Low-Fidelity Cache Entry: Served exclusively when Save-Data: on is present.

4. Delivery to the Device

Once the low-fidelity JPEG is processed and cached at the edge, the CDN streams the significantly smaller binary payload to the mobile device. Because JPEGs compress efficiently at lower quality factors, this process typically yields a 50% to 70% reduction in total byte size without completely degrading the core structure of the image, allowing pages to render faster while respecting the user's data limits.