'cloudinary responsive url only scales higher, never shrinks. why doesnt it shrink?
The following code displays an responsive image with cloudinary js and html. if window is resized, it will only scale the image higher at the breakpoints. it will never scale the image smaller. Any idea why this behaviour is showing?
<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: 'demo' });
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>
Solution 1:[1]
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.g w_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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Aleksandar |