When automatic breakpoint selection is enabled, Image and Video Manager automatically converts images to the best file type for the requesting device. This is typically the smallest file size that retains image quality, based on the user agent and original pristine image.

Image and Video Manager gets information about the browser’s content preferences via three HTTP Client Hints. These client hints provide greater visibility into the size of the image container. They are:

DPR or Sec-CH-DPR: Reports the device pixel ratio (DPR) which is the ratio of physical or device pixel density to the CSS pixels for the user's device screen. The DPR determines how a device’s screen resolution is interpreted by both the browser and CSS.
Viewport-Width or Sec-CH-Viewport-Width: The width of the user’s viewport in CSS pixels.
Width or Sec-CH-Width: The layout width of an image in physical pixels.

Older browser versions support client hints without the Sec-CH- prefix. Newer browser versions require the Sec-CH- prefix. The following header will be added to the response when client hints are enabled:

Vary: DPR, Viewport-Width, Width, Sec-CH-DPR, Sec-CH-Width, Sec-CH-Viewport-Width

How it works

To obtain and use the information contained in client hints, they must be explicitly requested by the server via the Accept-CH header. This can be achieved in a number of ways, one of which is using Request Client Hints Property Manager behavior to set the Accept-CH response header in your delivery configuration.

The client hints included in the initial response will be appended to all subsequent responses during the same browser session. To learn more about using the Accept-CH header to request client hints, see the Responsive Image Client Hints section of the W3C Community Group Draft Report.

Obtaining image container information via client hints works best when the following conditions are met:

Images are on the same domain as HTML, or a permissions policy is in place
A special behavior has been added to the Akamai Technologies, Inc. configuration that hosts HTML
End users use modern versions of browsers
HTML image tags are properly configured for your images. See the Responsive Image Client Hints section of the W3C Community Group Draft Report for guidance.