Images
When you upload an image, Bubble does not modify the original file. This means no resizing, compressing, or altering takes place during the upload process. The original file is stored exactly as it was uploaded.
However, Bubble automatically generates optimized copies of the uploaded file for performance reasons. They are generated at run-time and cached.
Image caching
While Bubble doesn’t natively support image modification, it offers a for rendering images dynamically in your app.
This transformation is used specifically for images displayed inside image elements or under the following conditions:
Public images: The image is not to any private Bubble “thing.”
Bubble storage: The image is stored within Bubble’s file storage system.
File type: are not . SVGs are vector-based, which means they are inherently scalable without quality loss
When displaying an image, Bubble’s run-mode engine determines the optimal size and compression needed based on the container or device resolution. It uses the transformation layer to create a temporary resized or compressed copy of the original image.
Each time the image is rendered in a new context—whether in a differently sized container or on a device with a different resolution—a new copy is generated on the fly. For example:
Displaying the same image in a small icon versus a full-width banner will create two differently resized versions.
High-resolution devices may trigger higher-quality copies compared to standard-resolution devices.
These transformations ensure efficient loading and optimal display quality across various devices and layouts.
Copies generated through the transformation layer are stored temporarily in Bubble’s caching system for up to 30 days. This caching applies even if the original image is deleted during this period, meaning the transformed versions can still be accessed for up to 30 days after deletion.
Cached image copies do not count toward your storage limit because they are managed within Bubble’s performance infrastructure. If a cached version is unavailable, Bubble automatically generates a new resized copy from the original file to ensure the image is always displayed correctly.
Should I compress images before uploading?
Compressing and resizing images before uploading is generally unnecessary for performance reasons, as Bubble automatically optimizes images for display through its CDN caching and transformation process.
However, if conserving storage space is a priority, resizing and compressing images to the size they’ll most frequently be displayed at can be beneficial. When doing so, ensure that the images are large enough to accommodate screens larger than your own. For example, if you’re using a full HD monitor to test a background image, a higher-resolution image may be necessary to maintain quality for users with 4K monitors.
For apps where image quality is crucial, we recommend uploading images at the maximum resolution they will be viewed. This ensures the best possible experience for all users, regardless of their device’s screen size.
What about user-uploaded images?
When users upload an image, you may lose control over the initial file size, potentially leading to larger storage consumption than intended. Since Bubble does not include native image processing features, you may need to address this in one of two ways:
Set a Maximum File Size
You can configure the picture uploader element to enforce a maximum file size. This ensures users reduce their file size before uploading, helping you maintain control over storage limits.
Use a Plugin
Plugins can provide features like image compression before uploading. For the best results, choose plugins that store the compressed image in Bubble’s file storage. This allows the image to benefit from Bubble’s caching and transformation process, as described earlier, ensuring optimal performance and flexibility.
Images uploaded via plugins
Images uploaded through a plugin follow the same behavior as other uploads, as long as they are stored in Bubble’s file storage. However, if a plugin stores the image in an external storage service, the caching and transformation process will not occur.
Last updated