Installation & Basic Setup
Add the Smart Image Optimizer Mobile Pro element to your page.

For the complete built-in interface, give the element enough room to display the image preview, editing controls, crop interface, and slide-out tools menu.

Recommended minimum element size

Width: 350 px
Height: 300 px

The element can be larger and responsive according to your application's layout.

Enable gallery selection when you want the end user to select an image directly from their device.

The basic user flow is:

Choose Image → Select Editing Tool → Configure → Process → Save or use Processed Image

No external editing interface is required for the standard workflow because the plugin provides its own controls.

Built-in Slide Menu

When an image is loaded, the editing tools are available from the right side of the image.

The menu remains hidden to preserve image space.

The user can swipe from the right edge toward the left to reveal the editing tools.

Swipe back toward the right to hide the menu.

The available tools are:

Tool Function
Crop Opens interactive crop mode
Resize Changes image dimensions
Compress Reduces image size/quality
Rotate Rotates the image
Flip Horizontal Mirrors the image horizontally
Flip Vertical Mirrors the image vertically
Process Applies combined processing settings
Save Saves/downloads the processed image
Clear Clears the processed result
Image Selection

When gallery selection is enabled, the user can tap the image area to select an image from the device.

After selection, the image becomes available for editing.

The plugin automatically updates its internal image source and exposes the relevant image information through states.

Resize Image

Resize allows the image dimensions to be changed.

The user can define:

Width — target image width.

Height — target image height.

After applying the operation, the plugin creates a new processed image using the requested dimensions.

Example

Original:

2000 × 1500

Requested:

800 × 600

Result:

800 × 600

The resulting dimensions are also available through the plugin's processed width and height states.

Compress Image

Compress reduces the image data while preserving the image for normal application use.

Compression is useful before:

uploading images;
storing images;
sending images through APIs;
displaying user-generated content;
reducing bandwidth;
reducing storage usage.

The compression value controls the resulting image quality.

A higher value preserves more image quality, while a lower value produces stronger compression.

Example

1.0 → maximum quality / minimal compression

0.8 → high quality with compression

0.5 → stronger compression

The ideal value depends on the application's requirements.

Rotate Image

Rotate changes the image orientation.

Rotation can be applied repeatedly.

For example, when configured for 90°:

First execution:

90°

Second execution:

180°

Third execution:

270°

Fourth execution:

360° / original orientation

This allows the user to continue rotating the current processed result instead of always starting again from the original image.

Flip Horizontal

Flip Horizontal mirrors the image from left to right.

Example:

← Image →

becomes:

→ Image ←

This is useful for selfies, mirrored photographs, design tools, and image orientation correction.

Flip Vertical

Flip Vertical mirrors the image vertically.

The top and bottom orientation of the image is reversed.

Interactive Crop

The Crop tool provides a visual crop interface directly over the image.

When Crop is activated, the user can define the area that should remain in the final image.

The crop region can be adjusted visually rather than requiring the application developer to provide fixed crop coordinates.

After confirming the crop, the selected region becomes the new processed image.

This makes the feature suitable for:

profile photos;
avatars;
product images;
document images;
social media images;
thumbnails;
custom image regions.
Image Format

The plugin supports output format configuration for processed images.

Supported formats depend on the runtime and processing environment, with the implementation supporting:

JPEG

PNG

WEBP

Use JPEG when smaller photographic files are preferred.

Use PNG when image quality or lossless output is more important.

Use WEBP when supported and optimized web/mobile image output is desired.

Process Image / Combined Processing

The Process function allows multiple configured transformations to be processed together.

Depending on the configured values, the processing pipeline can include operations such as:

Resize → Rotate → Flip → Crop → Compression / Output

This is useful when the application needs to optimize an image using several parameters in a single processing workflow.

Save Processed Image

The built-in Save button saves the current processed result.

Its behavior automatically adapts to the runtime.

BubbleGo / Native Mobile

The processed image is saved to the device media library/gallery.

The operating system may request media/photo permission when required.

WebView / Web

The processed image is downloaded using the browser.

This allows the same plugin interface to support both environments without requiring a separate Save button or workflow.

The plugin also exposes save-related states and events so the application can react to successful or failed saves.

Clear Processed Image

Clear removes the current processed result and resets the editing result.

This allows the user to restart the editing process without requiring the entire page to reload.

Processing Progress

The plugin includes a built-in progress indicator.

The progress bar remains hidden while no operation is running.

When processing begins, it becomes visible and progresses from:

0% → 100%

When processing finishes, the interface indicates completion.

The progress interface automatically disappears after processing.

This provides immediate visual feedback without requiring the Bubble developer to build an external loading interface.

Fields

Below is the configuration structure used by the plugin.

Field Type Description
source_image Image Optional image supplied to the plugin for processing.
allow_gallery_selection Yes / No Allows the user to select an image from the device gallery.
resize_width Number Target width used when resizing the image.
resize_height Number Target height used when resizing the image.
compression Number Controls image compression/quality.
output_format Text Defines the processed image format, such as JPEG, PNG, or WEBP.
rotation Number Defines the rotation angle applied to the image.
flip_horizontal Yes / No Enables horizontal image flipping.
flip_vertical Yes / No Enables vertical image flipping.
enable_crop Yes / No Enables crop processing when applicable.

Note: the plugin also provides built-in visual controls for editing. Therefore, an application does not necessarily need external Bubble inputs for these parameters when using the internal editing interface.

States
State Type Description
selected_image Image / Text URI* Current image selected for processing.
selected_image_uri Text URI of the selected source image.
processed_image Image / Text URI* Current processed image result.
processed_image_uri Text URI of the processed image. Useful for workflows and displaying the result.
processed_width Number Width of the processed image.
processed_height Number Height of the processed image.
is_processing Yes / No yes while image processing is running.
is_processed Yes / No Indicates that a processed result is available.
processing_status Text Current processing status.
processing_progress Number Current processing progress from 0 to 100.
error_message Text Processing error message when an operation fails.
saved_file_uri Text URI associated with the saved processed image.
is_saved Yes / No Indicates whether the save operation succeeded.
save_status Text Current save status.
save_error Text Error message generated by a failed save operation.

*Use the exact Bubble state type configured in the plugin editor for the image states.

Processing Status Values

processing_status can be used to control external Bubble UI if desired.

Typical values include:

Value Meaning
processing Image processing is currently running.
completed Processing completed successfully.
error Processing failed.

The boolean states is_processing and is_processed can also be used when a simple yes/no condition is preferable.

Save Status

The Save feature exposes its own status independently of image processing.

Typical values include:

Value Meaning
saving Save operation is running.
saved Image was successfully saved/downloaded.
error Save operation failed.

Use save_error to retrieve the error message when save_status is error.

Events
Event Description
processing_started Triggered when an image processing operation begins.
processing_completed Triggered when image processing completes successfully.
processing_failed Triggered when image processing fails.
image_saved Triggered after the processed image is successfully saved/downloaded.
image_save_failed Triggered when the Save operation fails.

These events can trigger normal Bubble workflows.

For example:

When Smart Image Optimizer's processing_completed → Create a new Thing

Then use:

Smart Image Optimizer's processed_image_uri

as the processed result.

Actions

The plugin provides image-processing Actions in addition to the built-in interface.

Action Purpose
Resize Image Resizes the current image according to the configured dimensions.
Compress Image Compresses the current image using the configured quality.
Rotate Image Rotates the current image.
Flip Image Flips the image horizontally or vertically according to the configuration.
Crop Image Crops the image using the configured crop information.
Process Image Runs the configured image-processing pipeline.
Save Processed Image Saves the processed image to the device or downloads it in WebView/Web.
Clear Processed Image Clears the current processed result.

The built-in menu can perform the common editing operations directly, so these Actions are especially useful when the developer wants to control processing through Bubble workflows instead.

Example: Built-In Editor

The simplest implementation requires very little Bubble configuration.

Place Smart Image Optimizer Mobile Pro on the page.
Set allow_gallery_selection to yes.
Give the element at least 350 × 300 px.
Run the app.
Tap the image area and select an image.
Swipe the right-side handle to reveal the editing tools.
Choose Resize, Compress, Rotate, Flip, Crop, or Process.
Configure the desired values in the plugin's built-in controls.
Apply the operation.
Use the built-in Save tool when finished.

No separate Bubble input fields or external editing buttons are required for this workflow.

Example: Using the Processed Result in Bubble

After processing:

Smart Image Optimizer's processed_image_uri

contains the current processed result URI.

You can use the exposed result in workflows, previews, subsequent processing, or other supported operations in your application.

You can also check:

Smart Image Optimizer's is_processed is yes

before executing a workflow that requires a processed result.

Example: Custom Workflow

You can also build your own UI instead of relying exclusively on the internal controls.

Example:

Button Resize is clicked

→ Element Action: Resize Image

Then:

When Smart Image Optimizer processing_completed

→ Continue your Bubble workflow using the processed result.

This makes the plugin suitable for both:

ready-to-use visual editing

and

custom Bubble-controlled workflows.

Error Handling

For processing errors, use:

processing_failed

and:

error_message

For saving errors, use:

image_save_failed

and:

save_error

This allows the application to display custom alerts, log failures, or retry an operation.

BubbleGo and WebView Compatibility

The plugin uses different processing/saving mechanisms according to the runtime while maintaining the same user-facing interface.

BubbleGo / Native: uses the available native image capabilities for mobile processing and device interaction.

WebView / Web: uses browser-compatible image processing where required and browser download behavior for saving.

Some operating-system permissions and file-handling behavior can vary according to the device, browser, and platform.

Short Marketplace Summary

Edit, resize, compress, rotate, flip, crop, optimize and save images directly inside your Bubble mobile app, with a built-in visual editor and BubbleGo/WebView support.