My beautiful face

Joel Vardy

Contract Web Developer

JavaScript Image Upload

Posted: 4th July 2013

Most people's upload speed is far slower than their download speed. 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, and upload them on the fly. However the JavaScript also uses the HTML5 canvas API to resize the images in the browser before being uploaded.

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 Demo

My demo uses vanilla JavaScript and will only work on modern browsers, it is available at demo.joelvardy.com/uploads - 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
3.1MB 557KB 82%
5.6MB 318KB 94%
7.5MB 241KB 97%

As you can see there are large savings to be made. While the quality is sometimes not optimal, you could 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.