Joel Vardy

JavaScript Image Upload

Posted: 4 July 2013

I put a lot of effort into reducing website load time, the longest a user has to wait is usually when they try to upload a file. In the case of uploading an image, it is highly likely the user is uploading a photo straight from their digital camera.

In an effort to reduce the users waiting time, and the server load, I'm going to resize images in the browser before uploading them. By doing this you can easily achieve a 90% bandwidth saving.

I have written a brief demo which allows you to select a number of images, these will then be resized in the browser, and uploaded on the fly. By doing this you can easily achieve a 90% bandwidth saving.

Why Do this?

Take this example:

In the above example the user is wasting bandwidth and time uploading a large image, and the server is wasting CPU time processing a large image only to resize it.

The Code

Below is a brief overview of what happens in the demo:

In it's simplest form you can use the resize library like this:

var resize = new window.resize();
resize.init();, 800, 'dataURL', function (thumbnail) {
    image.src = thumbnail;

The Demo

My demo uses vanilla JavaScript and will only work on modern browsers, it is available at - upload some (large) images, and see what you think.

The Benefits

Because of the resizing there isn't a linear size saving, however I uploaded a few different size images with the max_size variable set to 1200px - the results are shown below:

Original Uploaded Saving
1.68 MB 122.58 kB 93%
932.14 kB 58.81 kB 94%
4.77 MB 226.89 kB 95%

As you can see there are large savings to be made. While the quality is sometimes not optimal, I would upload the image twice the size you need, and downscale it on the server.

The Source

You can view / use the source code however you like, it is available on GitHub.