Client Hints and DPR: incorrect image size returned
Hi,
My image tag looks like this:
<img id="img"
srcset="http://res.cloudinary.com/ds6xxx/image/upload/w_auto,dpr_auto/v1522xxxx/image.jpg"
sizes="(min-width: 600px) 600px, 100vw"
alt="Image">
Chrome sends the following Client Hints:
DPR: 2
Viewport-Width: 980
Width: 600
The image is returned with the following dimensions:
Width: 300
Height: 200
Is this a bug? I am expecting:
Width: 600
Height: 400
If I change dpr_auto to dpr_2.0 in the request I get the size as expected.
I am not using any SDK.
Thanks,
Max
-
Hi Max,
Could you maybe send the page where this is happening in so we could understand this better?
It's also possible to open a request at support@cloudinary.com and we could take a closer look.
Thanks.
0 -
Hi Ido,
I've created a pen for you. https://s.codepen.io/maximus8891/debug/aYEQzK/xnkabdxYGEGM
On a mac Chrome sends DPR: 2 for the image and Width: 1200. The natural size returned by cloudinary is 600.
Thanks,
Max
0 -
Hi Max,
The pen has expired and we receive a 403 error.
We would really want to take a closer look at this.
Is it possible to share the page and image you are seeing this on?
0 -
Hi Ido,
Here's a link to the pen: https://codepen.io/maximus8891/pen/aYEQzK
Thanks,
Max
0 -
Hi Max,
Looking at the pen I see that the image is returned as a 600X400 with DPR 2 as can see in the image below:
Is there a possibility you could send us a screenshot of the image that is received on your end so we could see what you are receiving?
Also if you could share the DPR header that is received (as seen in below) we could understand what you are seeing
0 -
Hi Ido,
Thank you for looking into it.
I expect the image to be returned with 1200px width as in the request.
The request is:
The response is:
0 -
Hi
In ths sizes attribute in the pen its specified that "sizes="(min-width: 600px) 600px, 100vw"", i.e if the viewport is 600px and above, the browser is requested to deliver a 600px image. thats also what we see on our end - a 600px image is delivered (with a dpr2)
If you want to recvie a 1200px image you could change the sizes attribute to the below:
"sizes="(min-width: 600px) 1200px, 100vw" alt="Image"></div>"
Does that make sense?
0 -
Hi Ido,
Thank you for looking into it.
> the viewport is 600px and above, the browser is requested to deliver a 600px image
I'm afraid this is not correct. Values in attribute 'sizes' are 'logical' pixels. The browser is requested to deliver the width of 'size x dpr' pixels. Which is the case in our example. If dpr is 1, then the requested size is 600 x 1 = 600. If dpr is 2 then 600 x 2 = 1200.
I have updated the pen with a similar example where srcset has regular images. With dpr 2 the 1200 image is requested, with dpr 1 - 600.
Thank you,
Max
0 -
When we take a look t the pen, we see that the dpr and width are calculated and the image is returend correctly.
For the hints that we see on our end, which are:
viewport-width: 1440 width: 1200 dpr: 2we return:
Note that client-hints'
widthheader includes the dpr calculation, so when we see bothwidth: 1200 anddpr: 2, that tells Cloudinary to create a transformation like:w_<width/dpr>,dpr_<dpr>It's possible to debug this by asking Cloudinary to also print the size, e.g.,:
srcset="https://res.cloudinary.com/ds6ju37hw/image/upload/w_auto,dpr_auto/$width_w,$height_h/l_text:Arial_50_bold:$(width)x$(height)/luca-bravo-112050-unsplash.jpg"see:
https://codepen.io/taragano/pen/zWQrpJ0 -
Hi Ido,
Thank you for the debug request with the size printed on it. It looks like Cloudinary indeed sends back the correct resolution.
I relied on the value of naturalWidth which has a flaw when reporting back the natural width of an image: https://bugs.chromium.org/p/chromium/issues/detail?id=760612&can=2&start=0&num=100&q=naturalWidth&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
Thanks for your help!
Max
0
Post is closed for comments.
Comments
10 comments