El siguiente código muestra una imagen receptiva con cloudinary js y html. si se cambia el tamaño de la ventana, solo escalará la imagen más arriba en los puntos de interrupción. nunca escalará la imagen más pequeña. ¿Alguna idea de por qué se muestra este comportamiento?
<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>Si comienza con un tamaño de ventana grande donde se devuelve una de las variantes más grandes de la imagen y reduce el tamaño, no verá solicitudes adicionales realizadas por el navegador para versiones de resolución más pequeña porque eso consumiría más recursos y no menos .
Por ejemplo, si comenzó con un tamaño de ventana grande y el valor de w_ era 850 y luego reduce el tamaño de la ventana, no hay necesidad de solicitar una versión de tamaño más pequeño de esa imagen porque el navegador ya tiene esa imagen almacenada en caché a gran escala. resolución y puede reducir su tamaño con CSS. Si solicitó un tamaño más pequeño (por ejemplo w_700 ) a medida que disminuyó el tamaño de la ventana, entonces descargará más bytes para obtener esas versiones cuando el navegador ya tenga una imagen adecuada del caché que pueda usar.
En resumen, al pasar de dimensiones de ventana más pequeñas a más grandes, el navegador solicitará una imagen de mayor resolución en función de los puntos de interrupción, pero si comienza con una versión de tamaño w_X y reduce el tamaño de la ventana, el navegador reutilizará la versión más grande. tiene en caché en lugar de hacer más y más solicitudes para descargar versiones más pequeñas.