# How to Use CDNs for Media Delivery in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
CDN AND MEDIA OPTIMIZATION SUMMARY
=====================================

BUBBLE'S BUILT-IN CDN:
  Storage: AWS S3
  Image optimization: Imgix
  Delivery: CloudFront edge servers
  Status: Automatic, no configuration needed
  Auto-compression: Enabled Feb 2026

IMAGE OPTIMIZATION PARAMETERS:
  Resize width:  ?w=400
  Set quality:   ?q=75
  Auto format:   ?auto=compress,format
  Combined:      ?w=400&q=75&auto=compress,format
  Bubble expression: Image URL:append ?w=400&q=75

RECOMMENDED IMAGE SIZES:
  Hero/banner:   max 1920px wide
  Product/card:  max 800px wide
  Thumbnail:     max 400px wide
  Avatar:        max 200px wide

EXTERNAL VIDEO CDN:
  Cloudflare Stream:
    Upload → Get embed URL → HTML element
    ~$1/1000 min stored + $1/1000 min delivered
  Mux:
    Create asset → Get playback ID → Embed player
    ~$0.007/min encoding
  Store video URL in Data Type field

PRE-UPLOAD OPTIMIZATION:
  Manual: TinyPNG, Squoosh before upload
  User uploads: Image Compressor plugin
  Max recommended: 2x display size

CACHE INVALIDATION:
  Bubble files: New URL on re-upload (automatic)
  External URLs: Append ?v=timestamp
  Cloudflare: Dashboard → Caching → Purge Cache
```

## Common mistakes

- **Uploading full-resolution photos without compression** — A 5MB smartphone photo takes much longer to load even through a CDN, wasting bandwidth and creating a poor user experience Fix: Compress and resize images before uploading using TinyPNG or an image compressor plugin
- **Hosting video files directly in Bubble's file storage** — Bubble does not provide adaptive bitrate streaming for video, so users on slow connections experience buffering Fix: Use a dedicated video CDN like Cloudflare Stream or Mux that provides adaptive streaming
- **Not using Imgix URL parameters to resize images for their display context** — Loading a 2000px image for a 200px thumbnail wastes bandwidth and slows rendering Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-cdns-media-streaming-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-cdns-media-streaming-bubble