Demo to preview the settings
Introduction
Optimize your images by compressing the size before uploading.
A powerful tool to compress and resize large images and then upload them to Bubble or AWS bucket (upload feature integrated)
Works with different formats:
png, jpeg, svg, webp, heic (iOS images)
Features
- Compress image
- Compress image from URL
- Upload to your Bubble app
- Upload directly to AWS S3 bucket
- Select multiple images -Compress multiple images
- Generate multiple thumbnails -Upload multiple images at once
- Convert to png, jpeg, webp
- Rename image before uploading it
- Auto creates a thumbnail
- Set minimum size threshold to convert
- Check the image orientation (jpeg only)
- Add watermark
- Get Image Width/Height
If you don't want to run too many actions, the plugin has one action that combines them all.
- Select Compress and Upload
The best results are on large images.
For example, you could get a 2MB png image and compress it to a 700KB image and you will barely notice the difference between those two images.
All compression work is done in the browser.
How to setup Plugin and Workflow
Plugin element: Compressor
The main and only element of the plugin. If you have trouble understanding some fields, feel free to click “show documentation” under each field.
Plugin element fields
Title | Description | Type |
Create thumbnail | A field that requires a checkbox value( true or false), by default it is true.
Allows to create an even smaller lower quality image to be used as a thumbnail. The result will be in the state "Compressed Thumbnail base64”. | Checkbox |
Text | A optional field that accepts the text that will be used for the watermark of the thumbnail.
If you do not want a watermark, it is required to leave this field empty. | Text |
Text Color | A optional field for the watermark text color, only color values are accepted.
By default it it set to green(#00C851). | Text |
Text Size | A optional field for the text size of the watermark in pixels.
By default it is set to 80. | Number |
Font Family | A optional field used for family font of the watermark.
Can be used only fonts that are widely available across different platforms and do not require any additional installation or linking. Some common examples include:
Serif Fonts:
Times New Roman
Georgia
Garamond
Sans-Serif Fonts:
Arial
Helvetica
Verdana
Tahoma
Monospace Fonts:
Courier New
Lucida Console
Monaco
It's important to note that while these fonts are generally available across different systems, the exact appearance may vary slightly due to different font rendering engines. | Text |
Position | A optional dropdown field that sets the position of the watermark on the created thumbnail.
By default it is set to “Bottom Left”. | Dropdown |
Convert to format | A text field that sets the format of the new compressed image.
By default it is set to “JPEG”. | Text |
Plugin’s Element States
Title | Description | Type |
Solo - Size before compress | The initial image size as a text, such as "1.23 MB". | Text |
Solo - File name | Image file name. | Text |
Solo - Compressed image base64 | Base64 encoded string representing the binary data Blob of the compressed image. | Text |
Solo - Size after compress | Image size as a text after compressing. | Text |
Solo - Uploaded image URL | URL of the uploaded to the bubble app storage image. | Text |
Solo - Uncompressed base64 | Base64 encoded string representing the binary data Blob of the initial uploaded image, before compressing. | Text |
Solo - aws s3 URL | URL of the uploaded image in Amazon S3, where it can be accessed. | Text |
List - Compressed Base64 | Base64 encoded strings representing the binary data Blob of the compressed multiple images. | Text |
List - Uploaded images URLs | URL’s of the uploaded to the bubble app storage images. | Text |
List - Compressed Sizes | Image size as a text of the multiple images after compressing. | Text |
List - aws s3 URLs | URL’s of the uploaded images in Amazon S3, where files can be accessed. | Text |
Compressed Thumbnail base64 | Base64 encoded string representing the binary data Blob of the thumbnail of the uploaded image. | Text |
Thumbnail size | The thumbnail version size as a text of the uploaded image. | Text |
Solo - Size after compress Number in MB | Image size after compressing as a text. | Number |
List - Sizes after compress Number in MB | Sizes of the uploaded images after compression as number value in MB. | Number |
Solo - Size before compress Number in MB | Image size before compressing in MB. | Number |
Error message | The error message that caused the event "Error compressing" to trigger. | Text |
List - Thumbnails Base64 | List with Base64 encoded strings of the thumbnail version of the uploaded images. | Text |
Solo - Compressed Image Width | The width in pixels of the compressed image. | Number |
Solo - Compressed Image Height | The height in pixels of the compressed image. | Number |
Number of selected files | The number of selected files for multiple files selection. | Number |
Plugin’s Element Events
Title | Description |
Done compression | Triggered for every image successful done compression. |
Image uploaded | Triggered when the image was successfully uploaded to bubble app storage. |
Uploaded to S3 | Triggered when the image is successfully uploaded to S3. |
Multiple selected | Triggered when multiple files have been selected by the user. |
Done multiple compression | Triggered for multiple images successful done compression. |
Done multiple uploads | Triggered for multiple images successful uploading to bubble app storage. |
Error compressing | Triggered for every failed compression. |