Hey Bubblers. My app stores and loads a bunch of images. We are about to do a big launch so even more images are on the way. Issue is that those images are big and I want them to be tiny so they can load faster.
For this short-term job, I’m looking for a freelancer to:
Set up a backend workflow to update all existing images in the database and compress them.
Update all image upload elements to automatically compress all future images.
I’d rather use a free plugin/API but if I have to pay for one like the TinyPNG one, so be it. Please DM me with total cost you can do this job for. If this goes well, there is plenty more work to handoff on an ongoing basis.
Bubble already optimizes rendered images via its integration with the Imgix service. In other words, Bubble does NOT serve the originally uploaded image directly to the site visitor by default. Rather, what gets served is an auto-optimized (scaled down / downsampled) version based on its display dimensions on the page.
That said, it IS certainly desirable to optimize your Bubble file storage in order to keep expenses down. Bubble’s file storage (which uses AWS S3 behind the scenes) is where the original “master” full-resolution images are uploaded. To do that, you would need to downsample the image BEFORE it gets uploaded to Bubble. That can indeed be a really good idea if you’re allowing users to upload images.
Anyway, there are a few plugins which offer image “compression” before uploading. Good luck.
Yeah so that thread is where I saw a need to do something like this. Like @sudsy mentions, Bubble compresses images using imgix but it compresses each one on page load. If I make the change like that thread does, it would load the uncompressed images faster but if loading 100 images in a Directory, it could crash a user’s page.
To clarify, Bubble does not compress each image each time the page is loaded. Imgix retains copies of optimized images and simply serves the already-optimized images directly. (And it’s wicked fast at compression the first time a new image is served.)
Both compression and pre-fetching can favorably impact the user experience, so they work well together, but they are two entirely different things.
EDIT
One additional point of clarification… Unless Imgix is explicitly disabled or bypassed, images on a rendered page are served from Imgix servers - not Bubble’s. Bubble storage is just where the originally uploaded image (what Imgix calls an “Origin image”) resides.
I’m going to be doing some testing over this week with various types of image methods. I’m going to test speeds and record them.
Currently I plan to do tests on croppie image reducing, easycode image compressor, imgix on and off, and likely quality tests between the preceding tests and a few other APIs.
My goal is to find a repeatable and reasonably moderate quality for my images. Since I’m focusing on mobile, they will be smaller images, but I plan to retain the original image for future image manipulations.
I’ll be posting my test results when I get them. Hope they will help.
I’m positive that what I’ve described is how Bubble’s built-in Imgix integration works. (I did a deep dive into this a couple years ago for an artist-related web app. I read the Imgix docs as well as did a fair amount of dev console sleuthing before writing my own image compression plugin.)
As for why your load times aren’t what you expect (or would like), that could be a number of things.
I’m not in a position to make a recommendation. I just wrote my own plug-in to satisfy my needs.
I do know there are at least a couple other plug-ins which do client-side “compression”, but I haven’t tried any of them, and I don’t recall if they’re free. Maybe someone else can help. Or you can just search the marketplace.
Also, FWIW, I would characterize what these plugins do as “downsampling” or scaling down. The end result is a smaller image - i.e fewer pixels - and that’s where the so-called “compression” comes in.
hey, you can easily set up TinyPNG via connect. then you need to compress and image and give the output URL from the previous step into the image place.
Create a tinyPNG account. Add API connect and add you build your API. use HTTP Basic Auth as authentication, and use api as username and place your API key from tiny png into password.
create two call as one as action ( compress ) and other as ( data ).
now got to the workflow put the compress action give it the image url from picture upload it will compress the image, and place another action to save the use the step one body and split it as output/ and use the last item as the download url.
