I’m building an image-heavy native mobile app and using a Shortlist to display a series of images. Typically, I’ve done most of my testing on wi-fi, and the photos load pretty quickly in Bubble Go.
Recently, I was on cell service only, and it took forever for the images to load (much longer than something like Instagram might load images).
This document on Bubble’s site suggests that images are compressed on load/display. However, mobile is a different story, and I’m unsure if the same rules apply. It feels slow.
More than the Bubble side, you need to understand if they are optimized on the user side that loads them.. Bubble stores photos in AWS. If you insert a photo that weighs 45 mb, obviously it will be slow. It’s all in the optimizations you put in the images. I would study an ad hoc photo upload plugin in your case, since images are so important..
From the bubble image uploader you don’t have many options to set.. I would create my own uploader as a private plugin or I would explore the alternatives on the marketplace in your place..
That above bubble doc seems to suggest that on display, bubble acts like a CDN and delivers smaller images based on context :
“When displaying an image, Bubble’s run-mode engine determines the optimal size and compression needed based on the container or device resolution. It uses the transformation layer to create a temporary resized or compressed copy of the original image.
Each time the image is rendered in a new context—whether in a differently sized container or on a device with a different resolution—a new copy is generated on the fly. “
So it’s a little confusing.
I guess based on what you’re saying, it doesn’t. The only marketplace mobile plugin I’ve seen out there is one that pushes to upload care. Are there any others I’ve missed?
(I’ve run into the situation where non-mobile plugins show in the marketplace even when the mobile filter is checked, so figure it’s better to double check here)
This uploader will compress images to a much smaller version without compromising on quality too much, consequently loading a lot faster when you’re page is then rendered.
If you throw a service worker into the mix, they’ll be cached into local storage upon first load. Then every time your page loads, they wont be pulled from S3 each time, but instead from local cache storage which will make all your pictures load instantly.
Thanks for the suggestions. Before I look into this any more, the plugin pages seem to indicate that these plugins are for web, not Bubble Mobile Native. Do you know if that’s the case or is it reporting incorrectly?
Totally over-looked the fact you’re using the native mobile builder here, my bad, and I’m unsure if you’ll be able to use them in that at the moment. I’ve not had much experience with it yet unfortunately.
That’s exactly what Bubble does. So, assuming BubbleBot is not hallucinating or fabricating, it works the same as for web apps. Bubble automatically and seamlessly optimizes images “on the fly” and behind the scenes via their integration with Imgix service / CDN. Bubble does not serve images directly from Bubble storage (which is AWS S3 under the hood); although Imgix optimization can be bypassed on a per-request basis by appending a special query parameter to the image URL.
Of course, that’s just the “output” side of the equation. If you’re allowing users to upload (input) publicly accessible images (such as for a photo gallery), then the UX could be improved by downsampling (compressing) images before they’re even uploaded to Bubble storage. That would need to be done on the user’s device, and there are several plugins available in the marketplace for web apps; but I don’t know about mobile native plugins.
There several benefits to downsampling images before uploading:
Improved UX since users don’t have to wait as long for the upload
More efficient use of bandwidth
More efficient use of Bubble storage
More reliable uploads over slower or less stable connections
Yes of course it does.. but obviously it makes a difference if the image is already optimized during loading.. Optimizing a 6 mb image is one thing.. optimizing a 270 kb image another.. and I assure you that it is very possible to do it easily without any loss of quality (I believe that however it is essential to keep it).
Just give it a try with the bubble charger and see what a difference it makes.. The moment the plugins come out, however, I would make a passage..
Thanks for the response Steve, I am testing with images that range from 500kb - 2mb, which seems OK reasonable to me for source files… if they are getting compressed for the end user. Long term I’d look to implement one of the plugins that compress files upon upload.
The trouble is that when I’ve tested on cell-service (no WIFI), the images take a while to load, which makes me concerned that maybe they aren’t getting compressed?
I wonder if there’s a way to output the file size on mobile to confirm that a smaller version is being delivered?
I would like to be sure so that I don’t invest effort in a solution that won’t be workable long-term… if I don’t have to pay for separate hosting and a CDN for images, that’d probably be optimal.
And also, I don’t 100% trust that the BubbleBot isn’t hallucinating.
Not sure, but if you know what you’re looking for, you can also tell by the image URL whether or not it’s being served by Imgix’s CDN (which is easy to do on a web app by inspecting the page).
Totally understand. You could verify with a human support rep. It’s also conceivable you’ve encountered a bug with Bubble’s Imgix integration on mobile.
I’ve not done much with mobile yet myself, but I’ll be developing my mobile app as a hybrid - i.e. some parts native mobile and some inside a WebView. That way, I can have the best of both worlds and migrate parts to native as Bubble’s mobile dev platform matures.
