widthwith their values set to
auto. For example, when the browser requests:
DPRvalue and multiplies it with the specified extrinsic width. Therefore, the final actual width of the delivered image is
Widthrequest header and also considers the DPR of the user-device while calculating the value of
Widthheader. Therefore, ImageKit ignores the
DPRvalue and delivers an image of width
600. ImageKit will return
Content-DPRresponse header so that browser can scale the image correctly.
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.
212to 300, and an image of width 300 pixels is delivered. Now, the Content-DPR header is calculated as follows:
300pixels wide image and
Content-DPRresponse header with a value
Content-DPRheader received, the browser would scale down the image as 300 / 2 = 150 px, which might break your layout.
heightattributes) 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
heightproperties with values of
192pxapplied to it, respectively. In this example, the extrinsic size of that
<img>element becomes 256x192.