On Chrome 46+, the browser will respect the <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"> tag and send the Width, DPR, and Viewport-Width headers along with the request.

The following is the HTML we use to generate the image above.

<img sizes="(min-width: 740px) 740px, (min-width: 320px) 100vw"
     src="https://assets.imgix.net/unsplash/bridge.jpg?ch=Width,DPR"
/>

The ?ch=Width,DPR parameter is an opt-in mechanism on the imgix service for the time being. That query parameter along with the meta tag must be present for a CH-capable browser to opt in to the behavior.

Read more about Client Hints
Back