Hi everyone,
I have a an app in which people can upload items with pictures of it.
The problem is that those pictures are to big in size which is not sustainable for the website performance and in terms of database optimization.
Do you have an idea about how to change the name (useful for SEO) of a picture and to compress its size?
Thanks a lot
Cheers
Edouard
Hi @edouardchene, just FYI…
Bubble has an out-of-the-box integration with the Imgix service / CDN, which automatically (and behind the scenes) optimizes publicly accessible images before they’re rendered on the page; so you needn’t concern yourself too much with file size from the standpoint of page load performance, because it’s not actually the originally uploaded image that gets served on the page - but rather an optimized and cached version generated by Imgix. (This old post explains it in a bit more detail, although the expense is less of an issue with Bubble’s recent reduction in file storage cost.)
Where file size should factor into your calculus is:
User experience
Why have a user upload an image megabytes (or tens of megabytes) in size when all you really need is a high quality web image - not something intended to be output as a fine art print. Such excess file size adversely impacts the user experience (waiting for the upload to complete) and needlessly consumes bandwidth, which can be especially important for users uploading over a slow cell network. Instead, the image can be downsampled (scaled down) before uploading. That’s what Upload Buddy does.
File storage
Needlessly large file uploads take up storage capacity. Even with the recent (and dramatic) reduction in the cost of Bubble file storage, why waste the space. Keeping uploaded images at a “sane” size helps you get the most out of the Bubble platform resources for which you’re paying.
Anyway, just wanted to share some thoughts. Good luck!
-Steve
Thanks for your advice @artemzheg and @sudsy ! I will look into that.
But doesn’t it exist a Bubble solution that allows me not to use plugins?
No, not for pre-upload compression. (That was the primary impetus for developing Upload Buddy.) For compression on the rendered page, though, that’s what Imgix does automatically.
Effectively, I didn’t check before but the pictures are compressed on the rendering side of the app. But does it mean that the compression done at each loading speed of the page containing the pictures is slowered by this compression? Does this compression happen every time we load a page?
If so, I will have to load compressed pictures on the website. I have already tried Better Uploader but went through troubles changing the pictures name and sending the pictures on my app. On the name side, I succeeded to dynamically set the name as I wanted but there were still the complicated, unuseful and unexplainable initial name.
EDIT : ok I did not read your message in its entirety. So I understand that Bubble stores 2 images on the database : the original one and the thumnail version. Is that it? Or does the server compress the pictures when we load my bubble app pages? In that case I am afraid that I will absolutely have to compress those pictures when they are uploaded on my app. But anyway, I must compress those for file storage optimization.
No. Imgix caches the compressed images, so they’re not compressed every time the page loads. But even the first time an image is compressed, it’s lightning fast, as that’s the main purpose of Imgix - i.e. to make image optimization transparent and wicked fast.
Upload Budddy allows you to set the name, but honestly I’m not sure how much that actually contributes to SEO since the Imgix-generated (i.e. on-page) URL is a transformed version of the Bubble file storage URL and looks something like…
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2F1afa26e12bb5ca4da52371c13e9ecac0.cdn.bubble.io%2Ff1685882831455x942744234874512500%2Frocket.jpg?w=512&h=&auto=compress&dpr=2&fit=max
No, Bubble doesn’t store any actual “images” in the DB. (The Bubble DB and file storage are two separate things.) The image and file data types which are built into Bubble are little more than URLs - i.e. pointers / references to - the actual file in Bubble storage.
I’m not sure I understand what you’re wanting to accomplish or what your concerns are, but Bubble makes image optimization for the web about as easy as it can be - i.e. you don’t even have to think about it.
If you want to compress images before uploading for UX and/or storage optimization reasons, then you’ll need a plugin.
Thanks @sudsy !
Ok I get it now. Yes I wanted to change the name of the picture for SEO reason. It is a bit frustrating that I cannot do it with Bubble. But the Imgix feature is great.
So I will compress the pictures anyway with a plugin for UX and storage reasons.
I will dig more into Better Uploader.
