1. Install the plugin from the Bubble plugin marketplace 2. Configure the Plugin Settings (see below)
3. Add the "Generate Responsive Images" action to your workflow (server side or client side)
4. Store the generated HTML for later use

Plugin Settings
Before using the plugin, configure these settings in the Bubble Plugins tab

API Key
After purchase, request your key here:
API Key request form

Bubble App URL (optional, requires Bubble Professional plan)
Set this to your app URL (e.g. https://your-app.bubbleapps.io) to upload generated images to your Bubble File Manager (requires Professional plan and Data API enabled). Leave empty to use my server to host your images

WARNING: The images on my server are not persistent – should I offer a paid option to host them, or is it easy enough to download them and upload to Bubble File Manager or to the DB?


Action Configuration
When using the "Generate Responsive Images" action in your workflows:

Required fields

• input (text): The image URL or file path to process  - Supports Bubble dynamic expressions  - Supports full URLs (e.g. https://example.com/image.jpg)  - Supports Bubble CDN URLs (//cdn.bubble.io/… automatically converted to HTTPS)  - Supports absolute file paths (/path/to/image.jpg)
  

Optional fields

• formats (dropdown): Image format to generate  - webp: Generates WebP + original format  - jpeg: Generates JPEG + original format  - png: Generates PNG + original format  - auto: Uses original format only  - Default: webp, jpeg, auto (if not specified)
  
• widths (text): Comma-separated list of widths to generate  - Example: 300, 600, 1200  - Use auto for original width  - Default: auto
  
• sizes (text): Sizes attribute for responsive images  - Example: (min-width: 1200px) 1200px, (min-width: 600px) 600px, 300px  - Documentation: MDN sizes attribute  - Default: 100vw
  
• alt (text): Alternative text for the image (default: Generated image)
  
• fixOrientation (boolean): Auto-rotate image based on EXIF orientation (default: false)
  
• failOnError (boolean): Throw error if image processing fails (default: false)
  
• useCache (boolean): Cache generated images (default: true)
  

Returned Values

Always available

• html (text): Ready-to-use <picture> HTML with responsive images
  
• urls (list of text): Array of all generated image URLs on my server (downloadable to File Manager or DB)
  
• placeholder (text): Base64 data URL of smallest image (for blur-up effect)
  
• metadata (text): JSON string with processing metadata
  
• debug (text): Debug logs
  

Files object

• files (list): Array of files in Bubble File Manager If Bubble App URL is empty → same array as urls If Bubble App URL is set → list of images uploaded into your app File Manager
  

Usage Examples

Example 1: Simple usage, multiple formats
Action Parameters:
- Input: https://cdn.bubble.io/my-image.jpg
- Formats: (leave empty for defaults)
- Widths: (leave empty for auto)

Result:

• Generates WebP, JPEG versions in original size
  
• Use html output to display the image
  
• Use urls to get individual file URLs
  

Example 2: Multiple sizes
Action Parameters:
- Input: https://cdn.bubble.io/my-image.jpg
- Formats: webp
- Widths: 400,800,1200
- Sizes: (min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px

Result:

• Generates 6 images: 3 WebP + 3 JPEG (fallback)
  
• Each in 400px, 800px, and 1200px widths
  
• Returns responsive <picture> HTML
  
• Browser selects the best image based on viewport width and DPR
  

Viewport width         | DPR | Image used ≥ 1200px               | 1x  | 1200px ≥ 1200px               | 2x  | 1200px @2x ≥ 800px and < 1200px   | 1x  | 800px ≥ 800px and < 1200px   | 2x  | 1200px < 800px                | 1x  | 400px < 800px                | 2x  | 800px

On high-DPI (retina) screens (DPR 2x), the browser selects a larger image for sharpness.

Troubleshooting

Error: "This application does not expose an API"
Solution:
- Requires Bubble Professional plan or higher
- Enable the Data API in Settings > API
- OR: leave bubbleAppUrl empty to use server URLs

Images not loading
Check:
1. Is the input URL accessible?
2. Check debug output for errors
3. Verify returned URLs are accessible

Performance Tips

• Use WebP for best compression and quality
  
• Specify multiple widths for responsive images
  
• Use the html output for automatic responsive markup
  

Support
For issues or questions, email alex.hoyau [at] internet2000.net