The web is a highly visual medium, and most sites at some point or another display user-generated image content. While bandwidth and storage costs have generally trended downwards, mobile web adoption and smartphone camera resolutions have increased rapidly, significantly increasing average upload image sizes. Standard iPhone images can be over 5mb, which uploaded over data can cause significant delays for users. These images are often of a size and quality well above the requirements of a website.

Many sites set restrictions on the sizes and types of images that can be uploaded, creating a poor experience by putting the burden of image conversion on the user. Others do costly and slow server-side image conversions, using tools like ImageMagick.

To solve this problem, I created ImageTune, a lightweight (<3kb unminified) Javascript tool that lets you quickly and efficiently handle the heavy lifting of image conversions within your users' web browsers. Even the weakest mobile phones generally have graphics processing capabilities that far exceed most web servers, allowing image processing to happen near instantly and totally in the background.

All you need to do is pass the data from a native HTML file input into ImageTune, and it will return the image converted into the size, type and quality you chose in Base64 format. You can then upload the smaller, optimized file to your servers.

Example usage:

document.getElementById("file").addEventListener("change", function(evt) {
  ImageTune.tune(evt.target.files[0], {
    type: 'jpg',
    quality: 80,
    height: 250,
    width: 250
  }).then(function (imageData) {
    // upload imageData to storage
  });
});

Check out the example running here: ImageTune Example

Example Scenario: Profile Pictures

You provide the ability for users to add profile pictures to their accounts. The profile picture is never displayed at a resolution larger than 1MP. An iPhone user tries to upload a 12MP 3mb selfie. Previously, you uploaded the files directly to S3, then use ImageMagick to make a 1MP copy that you use on your site. The user has to wait for the 3mb file to upload over their LTE connection, then for your server to handle saving and processing. Your S3 bucket needs to store both a 3mb file and a 150kb optimized file.

Using ImageTune, the user's browser automatically converts the image to a 1MP JPEG at 80% quality, creating an 150kb image file, which you then upload to S3, using just 5% the amount of LTE bandwidth of the other method and requiring no ImageMagick instance for processing. The processing takes less than 200ms in the browser.