search

scaleflex / js-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-responsive/issues
Other
68 stars 15 forks source link

Serve images with fractional values of display pixel ratio. #6

Closed GorvGoyl closed 4 years ago

GorvGoyl commented 4 years ago

I'm using blur-hash js library for responsive images. updateSizeWithPixelRatio() method is not optimized when DPR is 1.5. It scales up to 2 size * Math.round(window.devicePixelRatio || 1)) and serves the double size 2600px image for my 1300px screen, doubling the image bandwidth!

So, I tried full-screen images with both width 2600px and 1300px and despite having dpr 1.5, I didn't notice any difference, only the large size of 2600px image. Unfortunately, there's no way to configure dpr as of now. cloudinary offers a simple solution to opt-out for auto-detect-dpr-ratio. There are many devices with fractional dpr so a better approach would be to not rounding off the dpr. size * window.devicePixelRatio.

dzmitry-stramavus commented 4 years ago

hey @JerryGoyal ,

We will improve this in the next release (during the week). size * window.devicePixelRatio this thing didn't work in IE, that's why it was rounded. I fix it by rounding to one decimal place.

dzmitry-stramavus commented 4 years ago

hey @JerryGoyal

fixed in v3.2.3