How does the Image source work, what does it really do?

Hi,

In the image control, there are three options (uploaded, from DB, or URL), does the “uploaded” option embedded the image in to the built app or still get it from the backed?

The reason why i ask is because it seems just as slooooooow as the other two options which clearly come from backend or URL, but i was hoping a fixed image on a page would be in the app!

This is an excellent question. I used many ‘Uploaded’ images with the intention they would be within the app itself but now I’m wondering if that’s the case.

Will be following to see how the conversation unfolds. Great question.

Just came across a reeeeally good solution to this in the forums that significantly sped up my entire app. I’ve been having huge performance issues for the past few months because my app is very content heavy. Throughout the app, I had all images pulling from the database, and because a lot of the image sizes were so big, it would take forever to load the whole screen. The solution I found:

Change the image source to url, and select the appropriate image url (ie. Logged in User > profile pic > url). Then in the same box, type &w=200&auto=compress attached to the end of the url bubble (you can change the 200 to the approximate size in pixels you need for the image based on your UI, I use the exact size for each element). This auto-compresses the images while being pulled into the app rather than loading full size images then resizing them, and it can significantly speed up loading times.

The result for mine, in a user to user chat screen with only about 15 messages (each message has a profile pic attached to it that’s only supposed to be 30 pixels wide) the loading time went literally from about 35 sec to load everything all the way down to 1-2 sec only from changing this, because the profile pic sizes were so large. I went through my entire app after and every screen loads within a couple of seconds now, and now all of the features react almost instantly instead of lagging for several seconds because it’s not trying to process all of these large images. Hope this helps a ton!

2 Likes

Don’t forget about fit=facearea and facepad=10 also

Example:
{URL}&w=200&h=200&auto=compress&fit=facearea&facepad=10

Of course, change the 200s to your desired image width & height in pixels.
This is helpful to find the face in the photo and have that centered. (Perfect for profile picture placements)

The Facepad parameter can be a value between 1 and 10. I personally feel like facepad=1 zooms in way too close to the face, but feel free to experiment with this value.

1 Like

One question that I do have if anyone has done something similar, is there a similar fix for video sizes? This works on images, I want to do the same for videos to improve loading speeds on those features as well

Great question.

If you’re using the “Plyr video” component, you can upload multiple resolutions of the video and set the default video as one of the lower resolution ones.

I’m not quite sure about any auto-compression methods for video just yet.

1 Like

Thank you for that! Would love to see some of these tips published by adalo in the help center when you’re first learning to build your apps, I have had loading speeds problems since day 1 and been searching endlessly for months for solutions, I’ve seen so many people complain that adalo is too slow and even leave the platform, when in reality a little change like this was mostly all I needed, and I just happened to finally find this yesterday in a forum post from 2020 lol

The video is all user generated, so I don’t know if that would work for me right now unfortunately. I have the automatic resolution for the plyr video component set to the lowest res, though I don’t know if it does anything or not since there’s only one upload. I think images are processed through Imgix so that’s where these url extensions come from to compress everything, do you know where they store videos? That might be the starting point and I can try and find a solution and put it in the forum if I find something

Sure, I can agree with that.

There are a lot of different and unique avenues for learning Adalo and there doesn’t seem to be one unified place that can cover all of the different aspects.

This is a wonderful feature to know.

I can agree that it does take some digging around the forum to find these little gems.

Would be easy to find out. Let’s see.

EDIT: https://proton-uploads-production.s3.amazonaws.com/026c4a507f9431baa95c701c633fad5392f1c93e6aea6b4a2c95a9f766e7b8f3.mp4

Amazon AWS.

Now we know where it’s stored and rendered from, we can look into if there are any ways to better query the URL of the videos. I gotta step away for a few hours to work on some other projects but this is insightful so far.

1 Like

I have seen these tips, but some confirmation from Adalo on how the upload works would be good… Do they get embedded in the build or are they in fact just referencing a url (in which case would prefer to do it myself)???

Can anyone from Adalo confirm the functionality of this?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.