Client Hints and DPR: incorrect image size returned

Comments

10 comments

  • Avatar
    Ido

    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
    Comment actions Permalink
  • Avatar
    Max Chernyavskyi

    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
    Comment actions Permalink
  • Avatar
    Ido

    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
    Comment actions Permalink
  • Avatar
    Max Chernyavskyi

    Hi Ido,

     

    Here's a link to the pen: https://codepen.io/maximus8891/pen/aYEQzK

     

    Thanks,

    Max

    0
    Comment actions Permalink
  • Avatar
    Ido

    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
    Comment actions Permalink
  • Avatar
    Max Chernyavskyi

    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
    Comment actions Permalink
  • Avatar
    Ido

    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
    Comment actions Permalink
  • Avatar
    Max Chernyavskyi

    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
    Comment actions Permalink
  • Avatar
    Ido

    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: 2

    we return: 

    http://res.cloudinary.com/ds6ju37hw/image/upload/w_600,dpr_2.0/v1522072114/luca-bravo-112050-unsplash.jpg

    Note that client-hints' width header includes the dpr calculation, so when we see both width: 1200 and dpr: 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/zWQrpJ

     

     

    0
    Comment actions Permalink
  • Avatar
    Max Chernyavskyi

    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
    Comment actions Permalink

Please sign in to leave a comment.