How images are processed in Bubble

Tips
1

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

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

:point_right: Socials:
X: @petteramlie | LinkedIn

:globe_with_meridians: Web:
www.amliesolutions.com

10 Likes
2

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?

3

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

1 Like
4

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

5

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.

6

@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!

2 Likes
7

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

Do they also benefit from all this magic?

Thanks
Zubair

1 Like
8

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

9

@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

1 Like