Large images slow down your Bubble app and eat storage. This tutorial covers three optimization strategies: compressing images before upload using File Uploader settings, resizing images on display using Bubble's Imgix integration for dynamic parameters, and lazy loading images in Repeating Groups for faster page loads.
Overview: Managing Image Sizes in Bubble
Unoptimized images are one of the biggest causes of slow Bubble apps. A single 5MB photo can double your page load time. Bubble hosts images through Imgix, which gives you server-side image transformation parameters. This tutorial shows you how to leverage these tools plus client-side optimization to keep your app fast without sacrificing visual quality.
Prerequisites
- A Bubble app with images (uploaded or displayed)
- Basic understanding of Bubble's Image element
- Familiarity with the Property Editor
Step-by-step guide
Understand how Bubble handles images
Understand how Bubble handles images
When you upload an image to Bubble, it is stored on Bubble's servers and served through Imgix, an image CDN. The original full-size image is stored, and Imgix can transform it on the fly by appending URL parameters. This means you can serve different sizes and quality levels from the same uploaded image without storing multiple versions. Bubble added automatic image compression in February 2026, reducing file sizes by roughly 60% on upload.
Expected result: You understand that Bubble uses Imgix for image serving and that automatic compression is applied on upload.
Resize images dynamically using Imgix parameters
Resize images dynamically using Imgix parameters
On any Image element, the displayed size is controlled by the element dimensions in the editor. But the downloaded image might still be much larger than the display size. To serve properly sized images, you can append Imgix parameters to the image URL. Use an expression that modifies the source URL: append ?w=400&h=300&fit=crop to the image URL in a Text element or use dynamic expression manipulation. For standard Image elements, set the element to fixed dimensions and Bubble will request an appropriately sized version from Imgix.
Pro tip: Set your Image elements to explicit pixel dimensions rather than percentage-based sizing — this helps Bubble request the correct image size from Imgix.
Expected result: Images are served at the exact dimensions needed for display, reducing download size significantly.
Set file size limits on the File Uploader
Set file size limits on the File Uploader
Go to the File Uploader element's Property Editor. Set the max file size to a reasonable limit — 2MB for profile pictures, 5MB for content images. You can also restrict file types to only image formats (image/png, image/jpeg, image/webp). This prevents users from uploading oversized images that consume storage and slow down display.
Expected result: The File Uploader rejects images that exceed your size limit.
Enable lazy loading for images in Repeating Groups
Enable lazy loading for images in Repeating Groups
For pages with many images (galleries, product listings), lazy loading prevents all images from downloading at once. On your Image element inside a Repeating Group, look for the Lazy load images option in the Property Editor and enable it. This tells the browser to only download images that are visible in the viewport, loading additional images as the user scrolls. This can dramatically reduce initial page load time for image-heavy pages.
Expected result: Images in Repeating Groups load progressively as the user scrolls, instead of all at once.
Use responsive images for different screen sizes
Use responsive images for different screen sizes
Bubble's responsive engine lets you set different image element sizes at different breakpoints. Click on an Image element, then use the responsive preview to adjust its size for mobile, tablet, and desktop. At each breakpoint, the Image element's dimensions change, and Bubble serves an appropriately sized image from Imgix. This means mobile users download smaller images than desktop users, saving bandwidth and improving load times.
Expected result: Mobile users receive smaller images than desktop users, optimized for their screen size.
Complete working example
1IMAGE OPTIMIZATION SUMMARY2===========================34STRATEGY 1: Upload Restrictions5 File Uploader properties:6 - File types: image/png, image/jpeg, image/webp7 - Max size: 2048 KB (2MB) for profile pics8 - Max size: 5120 KB (5MB) for content images910STRATEGY 2: Imgix Dynamic Resizing11 Image element:12 - Set fixed width/height in Property Editor13 - Bubble auto-requests correct size from Imgix14 Manual Imgix parameters (append to URL):15 - ?w=400 → width 400px16 - ?h=300 → height 300px17 - ?fit=crop → crop to exact dimensions18 - ?q=75 → quality 75% (good balance)19 - ?auto=format → serve WebP if browser supports20 - ?blur=50 → blur for placeholder effect2122STRATEGY 3: Lazy Loading23 Image element in Repeating Group:24 - Property: Lazy load images = yes25 - Only images in viewport download initially26 - Remaining load as user scrolls2728STRATEGY 4: Responsive Sizing29 Image element → Responsive preview:30 - Desktop: 800px wide31 - Tablet: 600px wide32 - Mobile: 350px wide33 Each breakpoint serves appropriately sized image3435BUBBLE AUTO-COMPRESSION (Feb 2026):36 - Applied automatically on upload37 - ~60% file size reduction38 - No configuration neededCommon mistakes when optimizing image sizes in Bubble
Why it's a problem: Using full-size images for small thumbnails
How to avoid: Set explicit dimensions on your Image elements so Bubble requests the correct size from Imgix
Why it's a problem: Not setting file size limits on uploads
How to avoid: Set a max file size on the File Uploader — 2MB for avatars, 5MB for content images
Why it's a problem: Loading all images at once in a long Repeating Group
How to avoid: Enable lazy loading on Image elements inside Repeating Groups and paginate to 10-20 items per page
Best practices
- Set explicit pixel dimensions on Image elements rather than percentage-based sizing
- Enable lazy loading for all images inside Repeating Groups
- Limit uploaded image sizes to 2-5MB depending on the use case
- Use Bubble's responsive breakpoints to serve smaller images on mobile
- Paginate image-heavy Repeating Groups to 10-20 items per page
- Consider using WebP format for better compression (Imgix auto=format parameter)
- Monitor your storage usage in Settings to track image storage consumption
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Bubble.io app loads slowly because of large images. I have a gallery with 50+ product photos in a Repeating Group. How can I optimize image sizes, enable lazy loading, and use Imgix parameters to speed up my page?
Optimize the images on my product listing page. I have a Repeating Group with product photos that loads slowly. Set up lazy loading, proper image sizing, and make sure mobile users get smaller images.
Frequently asked questions
Does Bubble automatically compress uploaded images?
Yes. As of February 2026, Bubble applies automatic image compression on upload, reducing file sizes by approximately 60%. This happens transparently without any configuration.
What is Imgix and how does Bubble use it?
Imgix is an image CDN that processes and delivers images. Bubble routes all images through Imgix, which can resize, crop, compress, and format images on the fly by adding URL parameters.
Will resizing images reduce my storage usage?
No. The original image is stored at full size. Imgix resizing happens at delivery time, reducing bandwidth but not storage. To reduce storage, limit upload sizes.
How do I check my current storage usage?
Go to Settings in your Bubble editor. Your storage usage is shown in the plan metrics area. Images and files count toward your plan's storage limit.
Should I use PNG or JPEG for uploaded images?
JPEG is better for photos (smaller file size with acceptable quality). PNG is better for screenshots, logos, and images with transparency. WebP offers the best compression for both. RapidDev can help set up automated image optimization pipelines for high-traffic apps.
Can I serve different image formats to different browsers?
Yes. Append ?auto=format to the Imgix URL and it will serve WebP to browsers that support it and fall back to JPEG/PNG for older browsers.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation