1600px wide photos loading on a 400px wide phone ?

[dukesx]

Hi,

I am a customer, and i recently switched from Imagekit to yours, specially for this plugin. I am very impressed with what you are trying to do here but what i am seeing is something not normal. Now considering the ratio is kept at 1.5, what i am seeing is that the image being loaded for smaller viewports (500px and below), is way too high, such as it renders a 1600px wide photo for a container of 400px.

I don't think this is a "responsive" behavior. That's a huge hit to the bandwidth if am downloading 400kb files on a phone, not to mention, a toll on overall speed. Most people are mobile oriented and lighthouse seemed to be the first to bring it to my notice. Please check.

Note: i am using Galaxy S5 and Pixel 2xl as models using browser responsive inspector to check which image is loaded for which viewport. I am using the latest version, with Next JS latest version (11.1.0 as of now)

[dzmitry-stramavus]

Hello @dukesx ,

thx for your report.

In order to see a good quality image, image should be x time bigger in cause your device has more than 1x Device Pixel Ratio (DPR) than width of image's container. For example, if the width of a container is 400px and your DPR is 3 => image should be load with 1200px width.

There is a param if you want to disable this https://github.com/scaleflex/react-cloudimage-responsive#devicepixelratiolist

If there is no need to support retina devices, you should set an empty array devicePixelRatioList: [].

[dukesx]

Hi, I have tried it with the empty array for device pixel ratio and now the behavior is even worse, full 8mb image for a pixel2xl (403px width) device and a 1000x width image for galaxy S5 (360px width)

[dzmitry-stramavus]

@dukesx ,

We will check that asap. Thx for letting us know

[dukesx]

Thank you , i have high hopes with you guys, and you have my full support. Let me know how it works out

[amrelbialy]

Hey @dukesx, We tested on Galaxy S5 and pixel2xl using browser console and also Honor play as a real device. We only found the issue in pixel2xl when we set devicePixelRatioList to an empty array. So we will test it further until that can you please give us full feedback.

[dukesx]

Hey @dukesx, We tested on Galaxy S5 and pixel2xl using browser console and also Honor play as a real device. We only found the issue in pixel2xl when we set devicePixelRatioList to an empty array. So we will test it further until that can you please give us full feedback.

Sure absolutely. I am just not sure that mobile devices should load large images, it's just not good for the lighthouse score that now actually will rank your website in SEO ranking

[amrelbialy]

Yes you are right we shouldn't use large images on mobile devices and when we tested on the images in our lib demo. For example in Galaxy S5 and Honor play the image was 76.1 kb in size. And in Pixel2Xl it was 141 kb. The issue only happened when we set devicePixelRatioList to an empty array. Here the file size was 598kb.

[dukesx]

Yes you are right we shouldn't use large images on mobile devices and when we tested on the images in our lib demo. For example in Galaxy S5 and Honor play the image was 76.1 kb in size. And in Pixel2Xl it was 141 kb. The issue only happened when we set devicePixelRatioList to an empty array. Here the file size was 598kb.

Exactly, the picture in pixel 2 xl still comes quite large, now if its an 8mb landscape photo, then you should probably find a 400kb size worth of photo as compared to galaxy s5 where the photo would come 100 to 150kb. This 400kb vs 120kb difference in size bothers me. I mean I am going to be honest, the loading times just frustrated me on my Galaxy s10+, just because of a photo. I am not sure what size would he rendered on my device but should be significantly large. I think the algorithm needs more refinement. Personally, I feel that the src set approach is just a menace. I never got it to work efficiently, months ago when I first tried it and now I see that it still hasn't changed. There must be another approach to this.