Client hints are the hints provided by the client device to the server along with the request itself. These hints allow the server to fulfill a particular request with the most optimal resource.
You can learn more about client hints from the responsive image guide.
ImageKit supports the following client hints:
To allow ImageKit to read values from the client hint request headers (DPR and Width), you have to pass the transformation parameters
width with their values set to
For example, when the browser requests:
GET: https://ik.imagekit.io/your_imagekitid/tr:w-100,dpr-auto/image_name.jpgDPR: 2
In this case, an extrinsic width of 100 pixels is required. To calculate the extrinsic width of the to-be-delivered image, ImageKit reads the client hint header
DPR value and multiplies it with the specified extrinsic width. Therefore, the final actual width of the delivered image is
If the browser requests:
https://ik.imagekit.io/your_imagekitid/tr:w-auto,dpr-auto/image_name.jpgDPR: 2Width: 600
In this case, an intrinsic width of 600 pixels is required. The browser sends
Width request header and also considers the DPR of the user-device while calculating the value of
Width header. Therefore, ImageKit ignores the
DPR value and delivers an image of width
600. ImageKit will return
Content-DPR response header so that browser can scale the image correctly.
ImageKit rounds the intrinsic size of the image to the next smallest 100. If the
Widthheader indicates a width of 150 px, then ImageKit will deliver an image with a width of 200 px.
Now, if the DPR of the device is 2, then the device will end up rendering an image of width 100 px (200 / 2), which is the incorrect width. The correct intended width to be displayed is 75px (150 / 2). To rectify this miscalculation due to the rounding to the next 100, the Content-DPR header is used.
Content-DPR is a response header and indicates the actual DPR of the response image. It is calculated as follows:
Let's learn this with a few examples:
GET: https://ik.imagekit.io/your_imagekitid/tr:w-auto,dpr-auto/image_name.jpgDPR: 2Width: 212
ImageKit rounds off
212 to 300, and an image of width 300 pixels is delivered. Now, the Content-DPR header is calculated as follows:
Hence, ImageKit responds with a
300 pixels wide image and
Content-DPR response header with a value
When the browser receives the image and the header, it scales it down as 300 / 2.83 = 106 px, which was is intended final width of the rendered image. If there were no
Content-DPR header received, the browser would scale down the image as 300 / 2 = 150 px, which might break your layout.
You should be aware of the different terms. Here are a few important definitions from Google developer docs.
The actual dimensions of a media resource. For example, if you open an image in Photoshop, the dimensions shown in the image size dialogue describe its intrinsic size.
The size of a media resource after CSS and other layout factors (such as
height attributes) have been applied to it. Let’s say you have an
<img> element that loads an image with a density-corrected intrinsic size of 320x240, but it also has CSS
height properties with values of
192px applied to it, respectively. In this example, the extrinsic size of that
<img> element becomes 256x192.