pictures in repeating group take very long to load. have compressed everything and its hosted on the bubble app database. they are comrpessed JPG. read somewhere i should convert to Webp but I checked and theyre larger than the compressed JPG. on the video here I am clicking on the different cells in the RG and there is a lag and sometimes / often times the ‘old pic’ is not immediately replaced with the new pic that i click on - takes around 2 secs to update everytime. pls help! RPReplay_Final1729310271.mov
i am on a paid starter plan and the app is live
sorry here is the link that actually works to the video - RPReplay_Final1729310271.mov - Google Drive
I use WebP as much as possible. But, it still depends on how you compress them.
My images are in an option set and are rendered using Imgix.
Are you using Imgix?
Have you considered preloading your images which has been talked about a lot on this forum?
Have you considered a preloader to show the image is loading? Preloaders can let the user know something is happening.
Are you using lazy loading?
I have been doing speed tests lately.
Yes, a speed test can be hacked, which is what I think some plugins may do…
but still, there is only so much you can do with Bubble. There are walls right now that can limit things.
I understand Bubble is working on things in this department.
hiya, my images are also in option set and using imgix.
Re WebP - do you mean you convert into WebP and then compress as well? ill check that out
Preloader - yes am using this
Will check out lazy loading etc, thanks for the ideas
I don’t compress them anymore after converting them to WebP.
Then again, I don’t have an image heavy site.
You can compress them further if you want to go into lossy or lossless…
for me that’s not that important.
I also don’t use 2500 px by 2500 px and convert them if I know the largest image I need is say 700 px or whatever.
At home I usually just use my chromebook to work on my Bubble app. At work I don’t use a Chromebook because I use a lot of Adobe tools…but those aren’t Bubble sites.
The fastest converter I’ve found using my Chromebook is picflow:
I really don’t think a 2 second pause is that long.
Then again, I use preloaders like I said.
As soon as the user clicks to change an image or wants to look at the next one I immediately have a preloader that lets the user know something is happening.
Hello
thanks this is super helpful!
Noted re preloaders am using them too but I find that i cant use them for images/GIfs. I have this GIF (already comrpessed) that ive inserted into my app via an IMAGE. When i go into settings, i see that i cant use a conditional expression “when Image J is loading” - it is not an option I can select. So it seems that i cannot use preloaders animations/lottie for image J and there is a blank space there when it is loading?
Technically, you can’t have the image doing something while it is loading because the image hasn’t loaded yet to do anything.
You can add something like an icon to do something while the image is loading.
One easy thing you can do is have a group and set it align to parent. Inside the group place an image and then place an icon on top of that.
That could look like this:
The button that says ‘upload your image’ actually has a picture uploader on top of it that is transparent. When a user clicks what they think is the button, they are actually clicking the PU. The PU isn’t showing an image because I have the top padding set to 50 which is the height of the button and PU so it covers the image completely.
The image that is shown in the image element is actually the PUs value.
For the image I have a condition:
I also have a condition for the icon:
So, it all looks like this:
This is something I learned from the forum.
There are other ways you can do it…and maybe someone else with more experience using Bubble has a better idea.
Anyway, this is just a quick example to show one way you can use a preloader.
thanks for this! but hmm i dont really follow. I’d rather not have a ‘UPLOAD YOUR IMAGE’ button showing on my app (cos it will prob confuse app users)? just wanting to know how to lay a preloader animation on top of an image?
Not sure why an upload button would confuse your users.
Just kidding. I did not realize you would assume you had to use an upload button to use a preloader. I was simply showing something I had on my site. The concept I gave works whether you have a button or not.
Anyway, last night I did an image slider on my site without a plugin and just used a custom state.
I have a group set to align to parent and 3 images inside it, with another group for the arrows. It switches images quickly.
You may want to consider going this route also.
I didn’t have time to optimize the .gif but I think you’ll get the gist of it.
1 Like
thanks! ill give it a try