Client-Side Image Compression on the Web

This article was originally posted on Medium. If you prefer reading it from there, please do check it out.

Huge shoutout to Cod Community for inspiring this blog. All the code for this project is linked on GitHub.

Introduction

There are multiple ways of optimizing server performance.

One way is to make the client do some of the work.

Consider uploading images for profile pictures. Since high-quality images take up several MB, it is costly to send them over the network to the server. Also, since profile pictures dont need to be extremely detailed, it would be nice to compress them and save space.

Thankfully, with HTML Canvas, we can compress our images on the client itself. After the compression, we can then send the images to the server, reducing upload time and the work the server must do.

Agenda

• Setup demo HTML page

• Listen to the image input

• Resize and compress image with HTML Canvas

• Demo of the compression working

Setup demo HTML page

To follow along, create a new project with the following files:

- index.html- main.js

We will create the basic UI in index.html.

Put the following in index.html:

In addition to accepting file uploads, we will preview both the initial image the user uploads and our compressed version in the UI.

Lets go to main.js to handle when a user inputs an image.

Listen to the image input

In main.js, lets first define getImageDimensions, which returns a Promise of an input images width and height. We need the initial images dimensions to maintain the aspect ratio when we resize.

    function getImageDimensions(image){        return new Promise((resolve, reject) => {            image.onload = function(e){                const width = this.width;                const height = this.height;                resolve({height, width});            }        });    }

Lets now add an event listener to handle when our input tag, image-input, changes.

The above listener will trigger whenever a user uploads an image. We take the uploaded image, display it to the user, and acquire its dimensions. All that is left is to resize and compress the image.

Resize and compress image with HTML Canvas

Lets get to the fun part and make the compressImage function in main.js.

This is the magic!

Given an HTML image, the scale factor, and the initial width and height of the image, the function creates an HTML Canvas and draws the image downscaled on it.

Finally, we turn the downscaled image into a blob and resolve it from the Promise. The resolved blob represents our compressed image.

We can now use this function to compress whatever image we want.

Lets integrate this into the event listener we created earlier.

Lets break this down.

First, we create two compressed images with differing scales: the ratio of MAX_WIDTH and the initial images width and the ratio of MAX_HEIGHT and the initial images height (You can parameterize MAX_WIDTH and MAX_HEIGHT based on the use case).

Then, we pick the smaller blob out of the two to be our compressed output and display it to the user. Finally, we check if our compressed version is smaller than the initial image. If the initial image was smaller, we can use it instead.

We now can compress images whenever the user inputs an image on the client. optimalBlob represents the image with the smallest size among both the compressed versions and the initial image.

Demo of the compression working

I took the above image and submitted it into our file input.

Here is what occurred:

Here is the compressed result:

The initial size of the image was roughly 299 KB and the compressed result was only 45 KB, a huge reduction.

With this reduction in size, it will be much faster to send the image to the server, and the server doesnt need to worry about compressing it either.

It is a win-win situation!

However, if image quality is important, this approach is not a good idea, since resizing through HTML Canvas is lossy.

Despite that, this is a great way to handle the uploads of profile pictures.

Thats all I got. Thanks for reading!