search

scaleflex / react-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/react-cloudimage-responsive/issues
MIT License
45 stars 15 forks source link

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

Open dukesx opened 3 years ago

dukesx commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@dukesx ,

We will check that asap. Thx for letting us know

dukesx commented 3 years ago

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

amrelbialy commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.