responsive url only scales higher, never shrinks.
The following Page with JS and Cloudinary responsive URL will only scale the image bigger at breakpoints, but i will never shrink the size. Is this an error?
<html><style type="text/css"> body { padding: 5px; justify-content: center; align-items: center; background-color: white; font-size: min(1vw, 1.778vh); } </style><script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.min.js"></script> <script> function mystart() { dBreakpoints = [170, 200, 300, 450, 550, 700, 850]; cl = cloudinary.Cloudinary.new({ cloud_name: 'dnmqqkxua' }); cl.config({responsive_placeholder: "blank", responsive:"true",breakpoints:dBreakpoints, responsive_use_breakpoints:"resize"}); cl.responsive(); } </script> <body onload="mystart()">
<div style="width:80%;"> . </div>
<img id="bgil" data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/sample.jpg" src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/sample.jpg" class="cld-responsive">
<br/><br/></p> </body></html>
-
Hi Martin,
I'll share my response below that I added in StackOverflow for your question:
If you start with a large window size where one of the larger variants of the image is returned and you resize down, you won't see additional requests made by the browser for smaller resolution versions because that would use up more resources and not less.
For instance, if you started off with a large window size and the
w_
value was 850 and then you resize the window down, there is no need to request a smaller sized version of that image because the browser already has that image cached at a large resolution and can resize it down with CSS. If it requested a smaller size (e.gw_700
) as you decreased the window size then you will be downloading more bytes to fetch those versions when the browser already has a suitable image from the cache it can use.In short, when going from smaller to larger window dimensions the browser will request a higher resolution image based on the breakpoints, but if you start off with an w_X sized version and resize the window size down, the browser will re-use the larger version it has in cache rather than make more and more requests to download smaller versions.
Of course, if there are any follow up questions we can continue in this or the StackOverflow thread.
0
Post is closed for comments.
Comments
1 comment