DPR on images without explicit sizes?

Comments

6 comments

  • Avatar
    VersionPress Team

    A couple of notes:

    - Our source data doesn't contain information about how large the images are.

    - We'd like to avoid making API requests to query this information. We use a static site generator that would issue many API requests over and over, which is a waste.

    - There is this related topic about conditional transformations, however, we don't know the exact size ahead of time: https://support.cloudinary.com/hc/en-us/community/posts/115003192591-Prevent-upscaling-responsive-images

     

    0
    Comment actions Permalink
  • Avatar
    VersionPress Team

    Update: I currently think that it's indeed impossible to construct `picture` with `srcset` without a prior knowledge of image's natural size.

    I should probably explore some other options, any ideas?

    0
    Comment actions Permalink
  • Avatar
    Shirly Manor

    In order to understand your use-case better can you please provide more information about it?
    If you want to upscale your image you can either use CSS with width 100% or with cloudinary your can either use w_1000 and dpr 2.0 or w_2000. however, when taking a small image and upscale it, as a result, we will get stretch and blurry image that will produce more storage and bandwidth.

    You can add the width as initial width w_iw but It will just stretch it:

     https://res.cloudinary.com/demo/image/upload/dpr_2.0,w_iw/sample.jpg 

    0
    Comment actions Permalink
  • Avatar
    VersionPress Team

    Thanks, Shirly, I didn't know about w_iw.

     

    To repeat the use case, my question is that if I have just this URL:

     

    https://res.cloudinary.com/demo/image/upload/sample.jpg

     

    then if it's possible to construct a set of Cloudinary URLs that will downscale the image for smaller devices but won't upscale it above image's natural width.

    The key point is that I don't know the width ahead of time. For example, that "sample.jpg" happens to be 864px wide but I don't know that when constructing picture and scrset. The problem is that if I mechanically add a source like

     

    https://res.cloudinary.com/demo/image/upload/w_1200,c_lfill/sample.jpg 1200w

     

    this will cause all sorts of trouble (I'm "lying" to the browser – I say with "1200w" that it is 1200px wide but the actual URL will only return 864 pixels horizontally).

    I guess it's just an inherent problem of my use case, maybe Cloudinary's JavaScript library does some clever tricks that don't force me to know image width ahead of time?

    0
    Comment actions Permalink
  • Avatar
    Shirly Manor

    Have you tried our javascript option as described here:

    https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript

    I created a jsfiddle for you to try:

    https://jsfiddle.net/shirlymanor/86vbk0fn/

    Please let me know if that helps,

    0
    Comment actions Permalink
  • Avatar
    VersionPress Team

    Thanks, Shirly, will experiment with that, JS library might be the solution for us.

    1
    Comment actions Permalink

Please sign in to leave a comment.