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

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

1 Like