Client Hints for Dynamic Mobile JPEG Delivery

HTTP Client Hints are a set of request headers that share details about a user's device, screen dimensions, network conditions, and data preferences directly with the web server. By leveraging these hints, servers can dynamically adjust the compression level, dimensions, and quality of JPEG images before serving them to mobile devices. This eliminates unnecessary data transfer, speeds up page load times, and tailors the browsing experience to the client's real-time capabilities.

Save-Data

The Save-Data header indicates an explicit user preference for reduced data consumption. When enabled in a mobile browser (such as Chrome's Lite mode or Android's Data Saver), the browser sends:

Save-Data: on

When a web server detects Save-Data: on, it can aggressively increase JPEG compression—such as lowering the quality factor from an 85 to a 50 or 60—or serve lower-resolution fallbacks.

DPR and Width

Mobile screens feature varying pixel densities and viewport sizes. Two primary hints allow the server to calculate exact image dimensions and compression targets:

• DPR (Device Pixel Ratio): Indicates the ratio of physical device pixels to CSS pixels (e.g., DPR: 2 or DPR: 3 on modern smartphones).
• Width: Sent by the browser to declare the target layout display width of the image in CSS pixels.
• Viewport-Width: Provides the total width of the user's viewport.

By combining Width and DPR, the server computes the exact pixel dimensions required (Width × DPR) and renders a JPEG scaled precisely to the display, preventing the transmission of oversized files.

Network Quality Hints (ECT, Downlink, and RTT)

Network Client Hints communicate the client's current connection performance:

• ECT (Effective Connection Type): Classifies the network speed into categories such as slow-2g, 2g, 3g, or 4g.
• Downlink: Provides an estimated download speed in megabits per second (Mbps).
• RTT (Round Trip Time): Measures the estimated latency in milliseconds.

Servers can utilize these metrics to make real-time decisions about JPEG compression. For example, if a mobile device reports an ECT of 3g or a high RTT, the server can dynamically apply a higher compression algorithm to minimize payload size and maintain render speed.

Enabling Client Hints on the Server

Client Hints are opt-in and require the web server to declare which headers it needs using the Accept-CH response header:

Accept-CH: DPR, Width, Viewport-Width, Save-Data, ECT, Downlink

Once declared, supporting mobile browsers append these headers to subsequent sub-resource requests, enabling dynamic media processing pipelines (such as image CDNs or origin image processors) to generate and cache optimized JPEGs on the fly.