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.
Why Do this?
Take this example:
- User uploads a new avatar from their camera phone - the image could easily be 5MB in size, taking 15s to upload.
- The server receives an image 3264px by 2448px - It is only wanting an avatar so resizes it to 300px square.
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.
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:
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.
You can view / use the source code however you like, it is available on GitHub.