Hi guys
I’m creating a gallery site displaying images (From my own collections)
The file sizes are ranging from 200 KBs to 20 MBs (max)
Problem is, it takes so much time to load and display an image (around 8-10 seconds), let alone a gallery site like mine.
Since I’m new to this, I’d like to know if there’s a better way to load and display images faster, for example, direct linking from somewhere else?
Thanks a lot in advance.
Are you making calls to your DB and displaying your gallery images within a repeating group? If so (and what I do when dealing with large datasets) is to mask a pre-loader over the entire repeating group and set to hide once the repeating has finished loading. There are also a few more tangible resources to look at… a bigger (paid plan), a better CDN (locally) and/or even an image compressor. Loads of factors and avenues to explore.
Hi @nomorecode
Yes, I uploaded the images in my DB then displaying them within a repeating group. It’s taking like forever to display all images (which I doubt is not good for user experience)
Could you elaborate more about the pre-loader? Is it something like a loading screen?
How is your RG setup? full / vert scroll / horz scroll…? how many are you calling in on first load? are you using image thumbs first then expanding out into full size images (once clicked/hovered)?
Regarding pre-loaders > do a forum search (on here) as you have a few options (note: some methods are better then others).
A good UX can and will go along way, better to get the basics right first so you can expand out later.
My RG sets to show the item in full list.
I’ll look into the pre-loader on the forum now.
By the way, I’m trying a second approach.
Displaying the list in small thumbnail, when you tap the small thumbnail, the big picture would show up next to it (similar to this guy )
It speeds up a bit, however the big picture often takes a while to load completely.
haha love the characters!!!
Yes, thumbs were born out of the premise of loading times (back in the day of early development) when speeds were bad. What you’ve done above looks fine > once thumb is clicked or hovered > push data to the side image (mask a pre-loader over the top) > set to hide once img has loaded (you can even use shapes and groups with the BG set as image you know… loads of uber options. Sometimes, it’s just a case of finding out with works best for you app.
Are the images hosted on Bubble’s S3, or your third-party DB? Our site has hundreds of images (user generated) but I don’t see the delay you mention. It does take 1 second to load 10-20 images in an RG but not 10-12b seconds.
@deadpoetnsp the images are stored on my Bubble’s S3. Don’t know why it takes too long to load an image( around 8-10 seconds for a 20MB image)
Maybe it’s because of free plan?
No I was on the free plan before. There is no difference in performance between the free and low tier paid plan. Then it is probably the size of the image. All my images are compressed (Bubble’s Pictureuploader has a compress/size reduction setting). They look pretty good even after compression, so you may want to look into that. About 250 images, total size is only about 60MB.
For example, if you use that setting, each image uploaded is reduced in size. There are other plugins that offer crop/resize (some are free). I think that would improve your performance.
Thanks,
May I ask, is it a Bubble’s plugin? Bubble’s Pictureuploader
This topic was automatically closed after 70 days. New replies are no longer allowed.
