How images are processed in Bubble

petter · 2024-12-22T09:58:02.461Z

I get a lot of questions about how images are processed in Bubble. In this post, and a new article, I’ll try to clear up some misunderstandings:

When you upload an image to Bubble, the original file remains unchanged. However, Bubble automatically generates optimized copies of the image for performance purposes. These optimized versions are created at run-time and cached for efficiency.

Image Caching and Transformation:

Bubble dynamically resizes images based on the container size and device resolution, ensuring optimal display.
Transformed images are cached for up to 30 days, even if the original image is deleted.
The transformed copies don’t count toward your storage limit.

Do You Need to Compress Images Before Uploading?
Generally, it’s not necessary to resize or compress images before uploading. Bubble automatically handles this. However, if you’re looking to conserve storage, resizing images beforehand can be helpful, especially for larger screens.

Handling User-Uploaded Images:
If you’re concerned about the size of images uploaded by users, you can set a maximum file size or use a plugin to compress images before they’re uploaded. For best results, ensure images are stored in Bubble’s file storage, which allows them to benefit from the automatic optimization process.

For more details, check out the full guide in the manual: Images | Bubble Docs

Books:
Ultimate Guide to Bubble Performance | Ultimate Guide to Bubble Security

Socials:
X: @petteramlie | LinkedIn

Web:
www.amliesolutions.com

randomanon · 2024-12-22T13:47:06.557Z

Should we be using Bubble-hosted images for our landing pages? The URL is coming from a CDN so theoretically it should be OK but is this a best practice?

petter · 2024-12-22T14:41:54.302Z

Yes, the cached images are spread out across the CDN, so this is the quickest way to serve them up.

senecadatabase · 2024-12-22T14:49:36.241Z

I’m wondering if using Imgix changes anything as far as storage etc.?

petter · 2024-12-22T17:52:16.466Z

Not in terms of your app’s overall storage capacity, no. Imgix too uses cached copies of your image that are part of Bubble’s performance ecosystem.

So if you check your file manager, you’ll find the original uploaded file, but not copies generated with imgix.

FlipList · 2024-12-30T14:39:47.988Z

@gregoryjohn has recommended avif files in the past.

MY images were fast to load on bubble compared to standard upload.
Give it a try yourself though!

ZubairLK · 2025-01-31T14:06:56.106Z

@petter Any idea how images stored in file data types are handled?

Do they also benefit from all this magic?

Thanks
Zubair

design.agx · 2025-01-31T16:04:51.573Z

Hello!
I recently made a template in Buildship that compresses and converts images in webp (or other if customized), uploads them to Bubble storage of your app, and modifies a ‘thing’s’ field with the images URL from Bubble storage.

Useful If you’re concerned about the size of images uploaded by users.

You can learn more about it here:
https://contra.com/s/QBB6NsU2-automated-image-compression-and-upload-to-bubble-with-buildship

petter · 2025-02-04T07:44:02.369Z

@ZubairLK

Yes, it’s all applied when the images are loaded (as opposed to uploaded), so it works with the file uploader too. So the only exception is if the file is stored outside of Bubble’s CDN network.

EDIT: updated the docs to clarify this, thanks again @ZubairLK