background load when opening image

[leccyril]

On preload on big picture it takes to long time to display

We saw that with this configuration preloadRange: 2, 3 pictures will be loaded in same time, more big are the pictures, more time it takes for display the one we clicked on. we wanted when we click on one picture load it then when displaying it load in background the odther pictures, indeed it prevents to take to much time to display the clicked ppicture. you can test with 5 pictures with 10Mo possible to configure this ?

[sebastian-marinescu]

Hi @leccyril, have you tried preloadRange: 1?

Also "5 pictures with 10MB" seems way to much. I think you should compress the images and give them a maximum resolution of Full-HD.

You can check out: https://compressor.io/

[leccyril]

Hello,

In fact we have some specific map with high resolution we could not compress. WHat we've done is onslide we change on fly the preloaded picture, when loading firstone , we don't preload anything, then we load picture, to reduce the time display of the first one

PS even preload 1 is too much because it load 3 pictures in // and only when they are loaded the first one will be displayed.

so first preload is set to 0 then

let currentSlideIndex = -1;
                const preloadReverse = 1;
                const preloadForward = 3;
onslidecomplete: (index, slide) => {
                            if( currentSlideIndex - preloadReverse <= index && index <= currentSlideIndex + preloadForward ){
                                blueimpGalleryObj.options.preloadRange = 2
                                blueimpGalleryObj.loadElements( index );
                                blueimpGalleryObj.options.preloadRange = 0
                            }
                        },

[sebastian-marinescu]

Okay, nice, so you found a workaround 👍

I still think you should check out the resolution/compression of the images, but if it works for you, that's fine :-)

So this issue can be closed then?

[leccyril]

it would be great if something for performanc could be done (sometime we need high quality picture with infone details) but i think yes you could

[sebastian-marinescu]

As I said, I really think you should reconsider the resolution and compression of your pictures, if 5 of them have 10MB (which means 1 Picture has 2MB). This is way too much for a web-application.

If you have the requirement to support 4K or 8K screens, but also mobile screens then consider using responsive images - so on mobile devices you load a small resolution version, and on desktops you load higher resolutions.

If you have the requirement for the end-user to be able to get/download the original resolution, then consider linking to the original version in the description of each image, or under the Gallery.

And again, check out https://compressor.io/ - you can choose "lossless" compression, which in most cases still makes the image much smaller, without our eyes noticing.

Because in my opinion, the blueimp-Gallery is very optimized and I'm guessing that your performance-issues are stemming from the fact that your pictures are too big.

So if you want to discuss more, leave the issue open, but if not, then you have to close it by yourself (I'm not a collaborator, just a friendly soul)

[leccyril]

So first it is not 5 files of 2 mo but 5 files of 5M min ^^ and we use responsive for mobile, the issue is for desktop, then we can't use online website du to private data about picture and customer should not do anything about upload file.

Thanks :)

[sebastian-marinescu]

Sooooo it is actually 25 MegaBytes of images on Desktop?! 😱

If I understand correctly, the customer delivering the images, won't use something like compressor.io for private data reasons - I see.

But how is you customer maintaining the images? I guess you are using a CMS or a custom upload form? If so, then in your backend-code of your CMS you will have to compress the images on the server-side, with lets say something like imagick. You can check out this tutorial on imagick, or find other tutorials by googling (maybe there is already a plugin for your CMS that you are using).

[leccyril]

we are aware about it , but constraint is to not compress for now pictures thank you !