Bubble automatically serves images through its CDN infrastructure using Imgix for on-the-fly optimization and CloudFront for delivery. This tutorial explains how to leverage built-in CDN features, optimize image delivery with URL parameters, set up external CDNs for video content that Bubble does not natively optimize, and handle cache invalidation when media files change.
Overview: CDNs and Media Delivery in Bubble
This tutorial explains how content delivery networks work with your Bubble app and how to maximize media performance. You will learn that Bubble already includes CDN functionality for images, how to fine-tune it, and when to add external CDN services for video or other heavy media.
Prerequisites
- A Bubble app with uploaded images or media files
- Basic understanding of how images are added to Bubble apps
- Familiarity with the Bubble Design tab and Image elements
- An account with a CDN provider (optional, for video content)
Step-by-step guide
Understand Bubble's built-in CDN for images
Understand Bubble's built-in CDN for images
Bubble automatically processes uploaded images through Imgix, an image CDN that optimizes and delivers images from edge servers worldwide. When you upload an image to Bubble, it is stored on AWS S3 and served through Imgix with CloudFront as the delivery network. You do not need to configure anything. Check any image URL in your app by right-clicking an image in preview and selecting Copy image address. You will see a URL containing 'd1muf25xaso8hp.cloudfront.net' or similar, confirming CDN delivery is active.
Expected result: You understand that Bubble already uses a CDN for images and can verify it by checking image URLs.
Optimize image delivery with URL parameters
Optimize image delivery with URL parameters
Bubble's Imgix integration supports URL parameters for on-the-fly image transformation. The most useful parameters are: ?w=400 to resize width to 400px, ?q=75 to set quality to 75 percent, and ?auto=compress,format to auto-select the best format like WebP. To apply these, use a dynamic image source with the :append operator. Set the image source to your dynamic image URL followed by :append and the parameter string. This reduces file size significantly — a 2MB photo can become 50-100KB without visible quality loss. As of February 2026, Bubble also added automatic image compression for newly uploaded images.
Pro tip: Use responsive width parameters matching your element's display size. There is no need to load a 2000px wide image for a 300px thumbnail.
Expected result: Images load faster because they are served at the correct size and compression level.
Set up external CDN for video content
Set up external CDN for video content
Bubble does not optimize video delivery the way it optimizes images. For video-heavy apps, use an external video CDN. The two most popular options are Cloudflare Stream and Mux. Sign up for your chosen service. For Cloudflare Stream, upload videos through their dashboard or API and get an embed URL. For Mux, create an asset via their API and get a playback ID. In Bubble, add an HTML element to your page and paste the provider's embed code. Store the video URL or playback ID as a field on your Data Type so you can dynamically load different videos.
Pro tip: Video CDNs handle adaptive bitrate streaming automatically, serving lower quality on slow connections and higher quality on fast ones.
Expected result: Videos load from a dedicated CDN with adaptive streaming for smooth playback.
Manage file sizes before uploading to Bubble
Manage file sizes before uploading to Bubble
Even with CDN optimization, starting with reasonably sized files matters. Before uploading images to Bubble, resize them to no larger than 2x the maximum display size for retina screens. For hero images, 1920px wide is sufficient. For thumbnails, 600px wide is plenty. Use a compression tool like TinyPNG or Squoosh before uploading. For user-uploaded images, consider adding a client-side compression step using a plugin like Image Compressor from the Bubble plugin marketplace.
Expected result: Images uploaded to your app are appropriately sized and compressed for faster uploads and delivery.
Handle cache invalidation when media changes
Handle cache invalidation when media changes
CDNs cache files at edge servers, which means updated files may not appear immediately. Bubble handles this for most cases by generating unique URLs for each uploaded file. However, if you reference external media URLs, cached versions may persist. To force a cache refresh for external images, append a cache-busting parameter to the URL using the :append operator with a timestamp. For Bubble-hosted files, re-uploading generates a new URL automatically. If using Cloudflare as an external CDN, you can purge specific URLs from their dashboard under Caching → Purge Cache.
Expected result: Updated media files appear correctly for all users without stale cached versions.
Complete working example
1CDN AND MEDIA OPTIMIZATION SUMMARY2=====================================34BUBBLE'S BUILT-IN CDN:5 Storage: AWS S36 Image optimization: Imgix7 Delivery: CloudFront edge servers8 Status: Automatic, no configuration needed9 Auto-compression: Enabled Feb 20261011IMAGE OPTIMIZATION PARAMETERS:12 Resize width: ?w=40013 Set quality: ?q=7514 Auto format: ?auto=compress,format15 Combined: ?w=400&q=75&auto=compress,format16 Bubble expression: Image URL:append ?w=400&q=751718RECOMMENDED IMAGE SIZES:19 Hero/banner: max 1920px wide20 Product/card: max 800px wide21 Thumbnail: max 400px wide22 Avatar: max 200px wide2324EXTERNAL VIDEO CDN:25 Cloudflare Stream:26 Upload → Get embed URL → HTML element27 ~$1/1000 min stored + $1/1000 min delivered28 Mux:29 Create asset → Get playback ID → Embed player30 ~$0.007/min encoding31 Store video URL in Data Type field3233PRE-UPLOAD OPTIMIZATION:34 Manual: TinyPNG, Squoosh before upload35 User uploads: Image Compressor plugin36 Max recommended: 2x display size3738CACHE INVALIDATION:39 Bubble files: New URL on re-upload (automatic)40 External URLs: Append ?v=timestamp41 Cloudflare: Dashboard → Caching → Purge CacheCommon mistakes when using CDNs for Media Delivery in Bubble
Why it's a problem: Uploading full-resolution photos without compression
How to avoid: Compress and resize images before uploading using TinyPNG or an image compressor plugin
Why it's a problem: Hosting video files directly in Bubble's file storage
How to avoid: Use a dedicated video CDN like Cloudflare Stream or Mux that provides adaptive streaming
Why it's a problem: Not using Imgix URL parameters to resize images for their display context
How to avoid: Append ?w= parameters matching the element's display width to serve appropriately sized images
Best practices
- Let Bubble's built-in CDN handle image delivery without additional setup
- Use Imgix URL parameters to serve images at the exact size needed
- Compress images before uploading to reduce storage costs and improve speed
- Use a dedicated video CDN for any app with significant video content
- Store CDN URLs in your Data Type fields for dynamic media loading
- Append cache-busting parameters to external media URLs when files are updated
- Test media loading on slow connections to verify the optimization impact
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
My Bubble app loads slowly because of large images. How does Bubble's CDN work and what URL parameters can I use to optimize image delivery without losing visible quality?
Help me optimize the image loading on my product listing page. I want to serve smaller images in the grid view and full-size images only on the product detail page.
Frequently asked questions
Does Bubble include a CDN automatically?
Yes. Bubble uses Imgix for image optimization and CloudFront for delivery. All uploaded images are served through this CDN automatically with no configuration required.
Can I use my own CDN with Bubble?
For images, Bubble's built-in CDN is typically sufficient. For video or other large media, you can use external CDNs by storing content there and referencing the CDN URLs in your Bubble app.
How much does Bubble's CDN cost?
Bubble's image CDN is included in your Bubble plan at no additional cost. External video CDNs have their own pricing.
Do user-uploaded images go through the CDN?
Yes. All files uploaded to Bubble, whether by you in the editor or by users through file upload elements, are stored on S3 and served through the CDN.
Why are my images still loading slowly?
The most common reason is that the original image is very large. Even with CDN delivery, a 5MB file takes time to transfer. Use Imgix URL parameters to serve smaller versions.
Can RapidDev help optimize media delivery for my Bubble app?
Yes. RapidDev can audit your media assets, configure image optimization parameters, and set up external video CDN integrations for Bubble apps with heavy media needs.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation