Hey bubblers
I have uploaded an image. I noticed that when I view the entires, the image is small, which means Bubble are resizing the images.
Example of resized image
Is there a way of being able to reliably access this function?
This is bubble’s CDN imgix doing on-the-fly compression to your image to increase page load speed. The original file is stored at full resolution.
This is your image’s URL
https://d1muf25xaso8hp.cloudfront.net/https://s3.amazonaws.com/appforest_uf/f1613140456119x637217390681552400/Profile%2520Pic%2520%25282%2529.png?w=&h=48&auto=compress&fit=max
Take a look at the h=48 value. This sets the image to 48px high (auto width, which is 48px since image is square)
Now take a look at this image where I’ve modified the URL to be h=256
https://d1muf25xaso8hp.cloudfront.net/https://s3.amazonaws.com/appforest_uf/f1613140456119x637217390681552400/Profile%2520Pic%2520%25282%2529.png?w=&h=256&auto=compress&fit=max
Bubble’s image element will instruct imgix the optimal size to render the image. You can override this by using the :processed with imgix in the dynamic expression inside the editor. Bubble includes some image modifications you can make inside the editor UI, however you can also add in your own code (via Url parameters) and make all sorts of modifications to your image before displaying to the user.
Yeah, what @jon2 says. And here is a post by me after “discovering” how images are handled behind the scenes…
It’s important to understand, though, that the “master” image in Bubble’s AWS storage is what counts toward your app’s quota. As such, if you have an image-centric website (e.g. photo sharing or the like), it would make sense to downsample the image before it’s uploaded to your Bubble storage. My Upload Buddy plug-in does this. It’s super lightweight with no external dependencies. There’s also a more full-featured (but heavier) plug-in available as well.
Just FYI, the master image should not be deleted, because it’s used to [re]generate all the context-optimized versions of the master image across your site.
-Steve
Jon, thanks for a brilliant response and for taking the time. It’s appreciated.
Cheers for pointing me towards Upload Buddy and solid advice on the storage stuff. Do you know of any plugins that will force a square aspect ratio?
This free plugin and this paid plugin both use the same JS cropping library, but I don’t know the capabilities of each. They might expose the ability to specify an aspect ratio without user intervention, but you’d have to research it.
That said, you can probably force the image to display in a square aspect ratio using Bubble’s built-in image display options. (The image wouldn’t actually be cropped; rather, a portion of it would just be displayed within a square region.) You’d have to experiment a bit.
And lastly, as @jon2 suggested, you can likely get what you’re after by using Imgix, but that would require some URL shenanigans if you’r’e willing to spend some time with the Imgix documentation. Be forewarned, however, that since using Imgix in that way - i.e. circumventing the limited capabilities Bubble provides - is not supported by Bubble, there’s no guarantee it will continue to work into the future if, for instance, Bubble switches to another image processing service (as mentioned here).
-Steve
