Client-Side Image Compression and Resizing

Filestack's client side image compression and resizing works for local files and for files taken using the webcam of your computer or camera on your mobile device. The compression and resizing is performed in the browser before the file is sent to the server. This solution can vastly improve the user experience - especially for mobile devices. This page should help you determine what the best resizing and compression settings are for your user and your workflow.

Client side image compression works for jpeg images and is lossy.

Image Compression
integer
{imageQuality: 80}

Specify the image quality. Range 0 - 100. If you set imageQuality to 100, then there is no compression. By default there is no compression done on your images. The imageQuality parameter only works for jpeg images.

Curious how the imageQuality parameter will effect your images and not sure what quality to set?

Check out the example below. It demonstrates the different quality levels. We feel that 80% gives a good balance between size reduction and quality of the image overall.


Image

Quality: 80 Size: 37 KB

The imageDim parameter allows you to resize local files and files taken using the webcam of your computer or camera on your mobile device. With this parameter you can make sure all of the images uploaded to you have the same dimensions.

Image Dimensions
array
{imageDim: [width, height]}

Specify image dimenions. e.g. : {imageDim: [800, 600]}. Local images will be resized (upscaled or downscaled) to the specified dimensions before uploading. The original height to width ratio is maintained. To resize all images based on the width, set [width, null], eg. [800, null]. For the height set [null, height], eg [null, 600].

Sample Image Compression Code

compress and resize image to 400px wide while keeping aspect ratio
filepicker.pick( { imageQuality: 80, imageDim: [400, null], mimetype: 'image/*', service: 'COMPUTER' }, function(Blob){ console.log(JSON.stringify(Blob)); var img = document.createElement("img"); img.src = Blob.url + '/convert?rotate=exif'; var tag = document.getElementById("image_dim_code_results"); tag.innerHTML = ''; tag.appendChild(img); } );

Results

Run code example

If you don't want to resize all images, but would rather only those resize the images that are too small or too big, you can use the imageMax or imageMin parameters. You can also use them together to create an allowed dimensions range.

Max image dimensions
Array
{imageMax: [width, height]}

Specify maximum image dimenions. e.g. : {imageMax: [800, 600]}. Images bigger than the specified dimensions will be resized to the maximum size while maintaining the original aspect ratio. The output will not be exactly 800x600 unless the imageMax matches the aspect ratio of the original image.

Min image dimensions
Array
{imageMin: [width, height]}

Specify minimum image dimenions. e.g. : {imageMin: [800, 600]}. Images smaller than the specified dimensions will be upscaled to the minimum size while maintaining the original aspect ratio. The output will not be exactly 800x600 unless the imageMin matches the aspect ratio of the original image.

Sample Image Resizing Code

Resize images to within the min/max range while maintaining their aspect ratio
filepicker.pick( { imageMax: [800, 600], imageMin: [400, 300], mimetype: 'image/*', service: 'COMPUTER' }, function(Blob){ console.log(JSON.stringify(Blob)); var img = document.createElement("img"); img.src = Blob.url + '/convert?rotate=exif'; var tag = document.getElementById("image_max_code_results"); tag.innerHTML = ''; tag.appendChild(img); } );

Results

Run code example