# How to optimize image sizes in Bubble - Tool: Bubble - Difficulty: Beginner - Time required: 10-15 min - Compatibility: All Bubble plans - Last updated: March 2026 ## TL;DR 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. ## Before you start - A Bubble app with images (uploaded or displayed) - Basic understanding of Bubble's Image element - Familiarity with the Property Editor ## Step-by-step guide ### 1. 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. ### 2. 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. ### 3. 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. ### 4. 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. ### 5. 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 code example File: `Workflow summary` ```text IMAGE OPTIMIZATION SUMMARY =========================== STRATEGY 1: Upload Restrictions File Uploader properties: - File types: image/png, image/jpeg, image/webp - Max size: 2048 KB (2MB) for profile pics - Max size: 5120 KB (5MB) for content images STRATEGY 2: Imgix Dynamic Resizing Image element: - Set fixed width/height in Property Editor - Bubble auto-requests correct size from Imgix Manual Imgix parameters (append to URL): - ?w=400 → width 400px - ?h=300 → height 300px - ?fit=crop → crop to exact dimensions - ?q=75 → quality 75% (good balance) - ?auto=format → serve WebP if browser supports - ?blur=50 → blur for placeholder effect STRATEGY 3: Lazy Loading Image element in Repeating Group: - Property: Lazy load images = yes - Only images in viewport download initially - Remaining load as user scrolls STRATEGY 4: Responsive Sizing Image element → Responsive preview: - Desktop: 800px wide - Tablet: 600px wide - Mobile: 350px wide Each breakpoint serves appropriately sized image BUBBLE AUTO-COMPRESSION (Feb 2026): - Applied automatically on upload - ~60% file size reduction - No configuration needed ``` ## Common mistakes - **Using full-size images for small thumbnails** — A 4000x3000px image displayed at 200x150px still downloads the full file, wasting bandwidth and slowing the page Fix: Set explicit dimensions on your Image elements so Bubble requests the correct size from Imgix - **Not setting file size limits on uploads** — Users may upload 10-20MB photos directly from their camera, consuming storage and causing slow page loads Fix: Set a max file size on the File Uploader — 2MB for avatars, 5MB for content images - **Loading all images at once in a long Repeating Group** — A gallery with 100 images downloads all 100 on page load, causing a massive initial load time Fix: 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 ## 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. --- Source: https://www.rapidevelopers.com/bubble-tutorial/manage-image-size-in-bubble © RapidDev — https://www.rapidevelopers.com/bubble-tutorial/manage-image-size-in-bubble