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
Place the plugin’s element on the page and fill its fields.
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. |
Plugin’s Element Actions
Select and Compress
Opens a file input and accepts only a single image that will be compressed accordingly to the plugin’s fields filled.
Action fields:
Title | Description | Type |
Quality | The quality of the output image. It must be a number between 0 and 1.
This option only available for image/jpeg and image/webp images.
By default it is set to 0.8 | Number |
Max width | The max width of the output image. The value should be greater than 0.
By default it is set to 1920. | Number |
Max height | The max height of the output image. The value should be greater than 0.
By default it is set to 1920. | Number |
Max file size | If the file is bigger than this field amount, it will be converted to jpeg (if it's not jpeg) and compressed. Size in mega bites.
By default it is set to 1. | Number |
Check Orientation | JPEG image only.
If the size of target image is too large (e.g., greater than 10 MB), you should disable this option to avoid out-of-memory crash.
Optional field, by default set to “no”. | Yes/No |
Threshold to Convert | Min file size in MB to convert it.
If the file size will be less than this field amount, it will not be converted(but still available as base64). Optional field. | Number |
Upload image
Handles the process of uploading the image to your bubble app storage.
Action fields:
Title | Description | Type |
Image Base64 | Base64 encoded string of the image.
Get it from the plugin’s states. | Text |
New Name | Image new name, will be used the original name if not set. | Text |
Reset
Resets all of the plugin element states to their initial empty values.
Compress from URL
Handles a single image compressing from a image URL.
Action fields:
Title | Description | Type |
Image URL | The URL of the image to be compressed. | Text |
Image Name | The name of the new compressed image. | Text |
Quality | The quality of the output image. It must be a number between 0 and 1. This option only available for image/jpeg and image/webp images. | Number |
Max width | The max width of the output image. The value should be greater than 0. | Number |
Max height | The max height of the output image. The value should be greater than 0. | Number |
Max file size | If the file is bigger than this amount, it will be converted to jpeg (if it's not jpeg) and compressed. Size in mega bites. | Number |
Threshold to Convert | Min file size in MB to convert it, if the file size will be less than this amount, it will not be converted(but still available as base64). Optional field. | Number |
Upload to AWS S3
Handle the upload of an image file to an Amazon S3 bucket using the AWS SDK
Action fields:
Title | Description | Type |
Bucket name | Make sure that you prepared your AWS properly to use this action. See Prerequisite Tasks in their documentation: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html | Text |
Identity Pool Id | Identity Pool ID for authentication | Text |
Folder name | (Optional) Folder name within the S3 bucket for the image to be saved. | Text |
Make public | Field indicating whether the uploaded file should be made public.
By default it i set to true. | Yes/No |
Base64 | Base64 encoded string of the image to be saved.
Get it from plugin’s element states. | Text |
File name | Image new name, will be used the original name if not set. | Text |
Select multiple
Opens a file input element that is set to accept multiple images. When the user selects files, the state with the total number of selected files is updated with the selected ones, and triggering a 'Multiple selected' event.
Compress multiple
“Compress multiple” can not be handled correctly if “Select multiple” was not called to get the value of the selected images that are going to be compressed.
Performs compression of multiple selected image files, generating thumbnails if specified, and publishing base64-encoded compressed images along with their sizes after compression.
Action fields:
Title | Description | Type |
Quality | The quality of the output image. It must be a number between 0 and 1. This option only available for image/jpeg and image/webp images. | Number |
Max width | The max width of the output image. The value should be greater than 0. | Number |
Max height | The max height of the output image. The value should be greater than 0. | Number |
Max file size | If the file is bigger than this amount, it will be converted to jpeg (if it's not jpeg) and compressed. Size in mega bites. | Number |
Threshold to Convert | Min file size in MB to convert it, if the file size will be less than this amount, it will not be converted(but still available as base64). Optional field. | Number |
Check Orientation | JPEG image only. If the size of target image is too large (e.g., greater than 10 MB), you should disable this option to avoid out-of-memory crash. | Yes/No |
Upload multiple images
Uploads a list of base64-encoded images to the user Bubble app storage, constructing new filenames and URLs based on the provided properties, and triggers an event upon completion.
Action fields:
Title | Description | Type |
Base64 List | Base64 encoded string of the images.
Get it from the plugin’s states. | Text |
Images new name | Images new name. The original name will be used if not set. A suffix with the image index will be added to differentiate them when uploading multiple images at once. | Text |
Upload multiple to S3
Uploads a list of images to an Amazon S3 bucket. It dynamically configures AWS credentials, iterates through a list of base64-encoded images and uploads each file to the specified S3 bucket. When all uploads are completed, it publishes a list of the corresponding S3 URLs and triggers an event signaling the completion of the multiple uploads.
Action fields:
Title | Description | Type |
Bucket name | Make sure that you prepared your AWS properly to use this action. See Prerequisite Tasks in their documentation: https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html | Text |
Identity Pool Id | Identity Pool ID for authentication | Text |
Folder name | Folder name within the S3 bucket for the images to be saved. | Text |
Make public | Field indicating whether the uploaded files should be made public.
By default it is set to true. | Yes/No |
Base64 List | Compressed images list, get it from the Multiple Compressed Base64 state after you selected and compressed them. | Text |
Add more
Allows to select multiple images, compresses them to reduce file sizes, and optionally creates thumbnails. The compressed images, their sizes, and thumbnails (if enabled) are then made available for further use. The script is triggered when the user selects multiple images through a file input, and it completes the compression process, notifying the user when finished.
Changelogs
Update 13.08.20- Version: 1.0.0
- Release
Update 24.09.20- Version: 1.1.0
- Added Reset action
Update 06.10.20- Version: 1.2.0
- New feature - Compress from URL
Update 15.10.20- Version: 1.3.0
- New feature - Upload directly to AWS S3 bucket
Update 10.11.20- Version: 1.3.1
- Fixed small bug with upload feature.
Update 04.12.20- Version: 1.3.2
- Minor improvements for "Compress from URL" action
Update 19.01.21- Version: 2.0.0
- New feature: Select and upload multiple images at once
Update 04.02.21- Version: 2.0.1
- Fixed incorrect file naming when converting to jpeg.
Update 05.02.21- Version: 2.0.2
- New state for compress multiple action - Multiple Compressed Sizes.
Update 08.02.21- Version: 2.1.0
- New feature: Upload multiple images to S3. You can now change the image name before uploading it. Bug fixes.
Update 08.02.21- Version: 2.1.1
- New feature: Thumbnail - will auto-generate a thumbnail to a compressed image that will have a lower resolution and size.
Update 11.02.21- Version: 2.2.0
- You can now set a minimum size threshold to convert (When converting multiple images)
Update 15.02.21- Version: 2.2.1
- Change the image name before upload for Multiple upload action. A suffix with the current image index will be added.
Update 16.02.21- Version: 2.2.2
- Fixed reset action
Update 21.02.21- Version: 2.3.0
- Added - Check Image orientation (jpeg only). New states with size in Number format.
Update 02.03.21- Version: 2.3.1
- Fixed a bug with incorrect path when uploading to S3.
Update 03.03.21- Version: 2.3.2
- Fixed a minor bug with multiple upload to S3
Update 07.04.21- Version: 2.3.3
- Added ContentType 'image/png' for AWS uploads.
Update 26.04.21- Version: 2.4.0
- Fixed cross-origin errors
Update 27.05.21- Version: 2.4.1
- Fixed a bug with image conversion when compressing from a URL
Update 31.05.21- Version: 2.4.2
- Updated the instruction from the plugin description.
Update 27.09.21- Version: 2.5.0
- New feature! Convert any image to jpeg, png or webp format. Check element settings.
Update 06.12.21- Version: 3.0.0
- Added support for heic format (iOS images). Other overall improvements.
Update 08.12.21- Version: 3.1.0
- Added Checkbox to enable/disable thumbnail generation. Bugs fixed.
Update 14.01.22- Version: 3.2.0
- Added new event "Error compressing" triggers when something goes wrong while compressing.
Update 19.01.22- Version: 3.2.1
- Fixed a small issue with thumbnail generation.
Update 31.03.22- Version: 3.2.2
- Fixed a bug with multiple file selection.
Update 14.04.22- Version: 3.3.0
- Added "List - Thumbnail" state, when compressing multiple images
Update 14.04.22- Version: 3.3.1
- Added Width and Height states for compressed image
Update 03.06.22- Version: 3.4.0
- Compressor’s solo size fix
Update 31.10.22- Version: 3.5.0
- Description update
Update 22.11.22- Version: 3.6.0
- Description update
Update 17.07.23- Version: 3.7.0
- Updated description
Update 18.07.23- Version: 3.8.0
- Updated description
Update 04.09.23- Version: 3.9.0
- Updated description
Update 06.09.23- Version: 3.10.0
- Obfuscation
Update 12.09.23- Version: 3.11.0
- Minor updates
Update 26.09.23- Version: 3.12.0
- Added "Threshold to Convert" field to "Select and Compress" & "Compress from URL"
Update 18.10.23- Version: 3.13.0
- Fixed actions Select and Compress" and "Select multiple"
Update 18.10.23- Version: 3.14.0
- Updated description
Update 26.10.23- Version: 3.15.0
- Added option convert heic to png/jpeg/webp and compress.
Update 14.11.23- Version: 3.16.0
- Added "font family" for watermark
Update 15.11.23- Version: 3.17.0
- Added "Number of selected files" exposed field
Update 24.11.23- Version: 3.18.0
- Updated description
Update 05.12.23- Version: 3.19.0
- Updated functions “Select Multiple”, “Compress Multiple”, “Upload Multiple Images” to save old photos when adding others
Update 05.12.23 - Version: 3.20.0
- Minor fixes