How to optimize image sizes in Bubble

The simplest and most effective way to optimize image sizes in Bubble is to avoid uploading giant raw files and instead let Bubble serve resized versions using the built‑in :processed with Imgix operator. When you display an image, always transform it to the exact size you need so Bubble doesn’t load the original heavy file.

What You Should Do

Bubble stores every uploaded image at its original resolution. If you display that raw version, users download the full file even if it's shown as a tiny 100px thumbnail. To fix that, Bubble integrates with Imgix, a real image‑optimization service. You use it through the expression :processed with Imgix whenever you set an image’s data source.

• For thumbnails: resize to small width (e.g., 150 or 300).
• For profile pictures: enforce width or height so users never load a 5MB original.
• For repeating groups: always process images; this is the biggest performance win.

How to Do It in Bubble

Inside an Image element’s “Dynamic image” field, wrap the original image field with Imgix:

Current cell's Product's photo:processed with Imgix (width=300)

If you also need cropping:

Current user's avatar:processed with Imgix (w=200, h=200, fit=crop)

Extra Tips That Really Matter

• Don’t resize images before storing them using workflows; it wastes server capacity. Always resize on display with Imgix.
• Don’t upload unnecessarily huge files. Add file size and dimension warnings using “When FileUploader’s value is uploaded”.
• Use “Limit width of image” in the Image element only for layout; it does not reduce file size — Imgix does.
• Test in DevTools Network tab to confirm file sizes drop to a few KB instead of MB.

This approach keeps your app fast without complicating your database or backend workflows.