23min

Any Image Compressor

Introduction

Is the best image optimizer for compressing images of any format to the smallest possible size. Upload multiple images and reduce the file size of your images at once. It also allows converting images from JPEG to Png format and also compressing images from URL.

How to setup

The plugin has 3 elements. The uploader and compressed image are required, and preview is optional.

Place an uploader element on the page.‚Äč

Document image

ÔĽŅ

IMPORTANT: only one uploader is allowed on the page.

Place a Compressed Image element on the page.

Document image

ÔĽŅ

‚ÄčTrigger the action - compress IMGCompressor-Compressed to compress the image.

Document image

ÔĽŅ

Now in the Compressed Image element, you have compressed images.

Plugin fields, events, states, actions

Uploader

Element for uploading files for compressing.

This item has many fields to customize its appearance. Most of them are displayed in the preview.

Fields

Content - inner text of input element‚Äč

Document image

ÔĽŅ

Borders - show element borders‚Äč

Document image

ÔĽŅ

Borders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners‚Äč

Document image

ÔĽŅ

Background Color - background-color of the element‚Äč

Document image

ÔĽŅ

States

files - Return an array with base64 strings of uploaded images

compressed - Return an array with base64 strings of compressed images

names - Return an array with names of uploaded

filessizes - Return an array with sizes of uploaded files

Actions

get files - Get files from input and generate base64 strings of this

Document image

Compressed Image

Element for compress images and show them.

Fields

List of Base64 images - Array of base64 strings

URL - URL to image page

Borders - show element borders‚Äč

Document image

ÔĽŅ

Borders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners‚Äč

Document image

ÔĽŅ

Background Color - background-color of the element

Show Image Border - Change visibility of borders around each image

Image Border Color - Color of border around each image

Image Border Width - Width of border around each image

Image Border Radius - Border roundness of each image‚Äč

Document image

ÔĽŅ

Document image

ÔĽŅ

States

compressed - Array of base64 strings

compressed_from_url - Array of base64 strings ( in the array is only one element )

Actions

compress - Compress images from the uploader

Document image

ÔĽŅ

convert - Convert image from uploader

Document image

ÔĽŅ

compress_from_url - Compress image from URL

Document image

ÔĽŅ

Draw Images - Show compressed images in the element

Document image

Preview

Optional element to show uploaded images.

Fields

Images - Array of base64 strings

Borders - show element borders‚Äč

Document image

ÔĽŅ

‚ÄčBorders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners‚Äč

Document image

ÔĽŅ

Background Color - background-color of the element

Show Image Border - Change visibility of borders around each image

Image Border Color - Color of border around each image

Image Border Width - Width of border around each image

Image Border Radius - Border roundness of each image‚Äč

Document image
Document image

ÔĽŅ

States

URL in array - Return URL in the array

Actions

link to array - Add link in array

Document image

ÔĽŅ

Workflow Sample

Configure File Transfer from Uploader to Compressed Image in order to Preview uploaded files in the IMGCompressor-Preview element.

Document image

ÔĽŅ

Changelogs

Update: 16/08/21 - Version: 1.1.0

  • Added possibility to toggle multiple image uploads;

Demo to preview the settings

ÔĽŅ