Testing Client-Hints with imgix

These images have a width of 400 set, but are using Client Hints DPR & Width which will over-ride the 400 width on a Chrome browser.

What will I notice different on Chrome Browser?

On a Chrome browser, you will see that these images will dynamically change size after each refresh. The images will be 30% the width of the browser when the browser is larger than 768 pixels. Below 768 pixels, the image will be 100% the width of the browser.

How Am I achieving this?

I am using imgix with the following api: ch=width,dpr. Also, because of Chrome’s security settings, I am setting a Feature-Policy header in my vercel.json file to identify which image domains I will use for this.