search

sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.49k stars 1.28k forks source link

LightGallery loads the wrong SrcSet image on a 4k-monitor. #1489

Closed acwolff closed 1 year ago

acwolff commented 1 year ago

I made this LightGallery test album to test the LightGallery library with srcsets. For the first image there are 5 WEBP images and 1 jpg image generated. The WEBP images indicates the size as a string in the middle of the image. The largest image with a size 4000x3000 contains the text: 2.0: 4000x3000 (WEBP) and the next smaller image with a size off 3000x2250 contains the text: 1.5: 3000x2250(WEBP).

If I show this album in full screen mode on my 4k- laptop with a full screen resolution of 3840x2160, it selects for the first image in this album the 2.0: 4000x3000 (WEBP) image.

Because this image is too large for the screen, the size is reduced to 2880x2160. But with the next possible smaller image, 1.5: 3000x2250(WEBP), you can get the same result with a faster loading time.

So the LightGallery loads an image which is too large.

Other Lightbox libraries which I did test with the same set of images do select the correct 1.5: 3000x2250(WEBP) image as you can see in this PhotoSwipe test album.

sachinchoolur commented 1 year ago

lightGallery does not decide which image to load. It just creates the markup and gives it to the browser.

The srcset attribute leaves the decisions up to the browser in terms of which image to load if you want to decide which image to load on which screen, either use the picture tag or use ligthGallery inbuilt responsive option.

Demo - https://www.lightgalleryjs.com/demos/responsive/

acwolff commented 1 year ago

Well apparently there are libraries who handle this in another better way..

sachinchoolur commented 1 year ago

lightGallery supports picturefill by default. Including this, there are four ways to serve responsive images. You can choose the best method that works for you

acwolff commented 1 year ago

lightGallery supports picturefill by default. Including this,

I assume that I don't have to include this, because it is already in your library. Correct?

there are four ways to serve responsive images. You can choose the best method that works for you

Where in your documentation and how can I choose the best method?