Intro
Client side image resize allows you to resize images on the client side before uploading them. Simply set the maximum width, height, quality, and target image type directly in the file input controls or the dropzone component. This ensures that your images are resized automatically before being uploaded, reducing upload times and saving bandwidth. You can even convert images to formats like WebP, with optional resizing, for more efficient storage and faster loading times.
Image Resize Options
You can enable this for your existing single or multi file upload forms.
File Inputs
Simply select your file input:
And you will see the image resize options in the properties inspector:
Dropzone
You can also enable the client side image resize for the dropzone component.
Select the dropzone component and you will see the same image resize options as for your regular form input:
Size and Quality
If you want to resize the image, you can set the maximum width and height, quality (a percentage value from 0 to 100), and image type:
File Type
Another use case is to create a WebP version of your images before uploading. In case you don't want to resize the images just set the type to WebP and you are done:
Previewing Selected Image
You can also preview the resized image, before uploading it.
Add a new component on the page:
Add image:
Set the image to responsive, so it fits your layout:
And add a new dynamic attribute to it. Select Images > Image Source:
Click the dynamic data picker to select an image source:
And under File Input > File select dataUrl:
You can preview your image as soon as you select it:
Your images will be then uploaded and processed on the server side as usual.