1️⃣ Install Add Image Converter & Resizer to your app. In the plugin editor, it’s configured as a Server-side Action using Node modules (Axios + Sharp).

2️⃣ Choose Your Flow

A) For Web & Desktop Workflows

Use directly in page workflows:
Add Plugins → Image Converter & Resizer.

Basic inputs (most users only need these):

🔗 website_home_url (text, required) – App’s base URL (live or test), used for the /fileupload endpoint.

🖼️ image_url (text, required) – Public https://…, protocol-relative //…, or Bubble path like /file/get/....

🌀 output_format (text: jpeg or webp; default webp) – JPEG/WebP only for speed/compatibility.

↔️ width_px (number, optional) – Target width.

↕️ height_px (number, optional) – Target height.

🎚️ quality (1–100, default 80) – Lower = smaller file, higher = better quality.

🏷️ new_name (text, optional) – Filename (without extension; .jpg or .webp is added automatically).

Advanced options:

📐 fit (text: cover, contain, fill, inside, outside; default inside) – How to fit into the box without stretching.

🎯 position (text: centre, top, bottom, left, right, entropy, attention) – Crop focus when fit=cover.

🧭 auto_orient (yes/no, default yes) – Fixes rotation using EXIF.

🧱 max_megapixels (number, default 50) – Safety cap: downscales very large images to avoid timeouts.

🚀 use_imgix_if_bubble_file (yes/no, default yes) – Returns an Imgix URL for Bubble-hosted images (fast and cached).

🔐 upload_privacy / attach_to_id – Upload as private and/or attach to a Thing.

⏱️ timeout_ms / 🔁 max_redirects – Handle flaky URLs with network safeguards.

📝 Note: Bubble’s fileupload API requires base64. The plugin handles that automatically.

B) For Mobile & Web (via API/Backend Workflows)

Because Bubble’s Native Mobile editor doesn’t yet show plugin actions in the toolbox, use this backend/API flow to integrate the plugin into mobile apps:

A) Enable Backend Workflows

Go to Settings → API and enable “Workflow API and backend workflows.”

B) Create an API Workflow

In your app, go to Backend Workflows → Add a new API workflow (name it e.g. process_image).

Define the same parameters as the plugin’s inputs (e.g., image_url, width_px, output_format, etc.)

Add a step: Plugins → Image Converter & Resizer, passing these parameters

Add a final action: Return data from API with outputs like url, filename, width_final_px, height_final_px, size_kb, etc.

C) Call the API Workflow
From mobile-app workflows or frontend screens:

Use “Schedule API workflow” to call process_image with the required params

This runs server-side asynchronously.
Medium
NocodeAssistant

OR call it via HTTPS:

POST https://yourapp.bubbleapps.io/api/1.1/wf/process_image

Pass params in the request (ensure API workflows are exposed correctly).

3️⃣ Results You Can Use
From either workflow setup, use the Result of Step X to access:

🌐 url – final file URL (or Imgix URL in fast mode)

🏷️ filename, 📏 width_final_px, 📐 height_final_px, 💾 size_kb

(Optional debug outputs if exposed) – format, mode, width_src_px, height_src_px, etc.

4️⃣ Tips for Performance & Mobile Apps

🌈 Prefer WebP for smaller sizes and speed.

📷 When processing many large files (e.g. 4K), queue via recursive backend workflows to avoid resource overload.

⚡ If your image lives in Bubble already, let the plugin return an Imgix URL—that’s your fastest path and leverages Bubble’s caching.

5️⃣ Troubleshooting

❗ image_url empty or private? Pass a real accessible URL (e.g., File Uploader’s value’s URL).

🧯 Upload fails? Ensure website_home_url is correct and that the file is reachable; Bubble’s fileupload expects base64.

🔄 Sideways photos? Keep auto_orient = yes; Sharp auto-orients via EXIF.

👀 See it in Action
🔗 Live demo: https://pluignstestapp.bubbleapps.io/version-test

🧩 Demo editor: https://bubble.io/page?id=pluignstestapp&tab=Workflow&name=index&type=page&wf_item=bTHDr