Compress Images with JavaScript for Faster Website Speed

Why Should You Compress Images for Your Website?

Optimizing images to increase website speed is crucial for improving your user experience and increasing your website conversion rates. Studies by Alkamai and Gomez show that…

• The average online shopper expects your pages to load in two seconds or less.
• After three seconds, up to 40% of website visitors will abandon your site.
• When waiting for a webpage to load, 14% of shoppers will begin shopping at another site, and 23% will stop shopping or walk away from their computer.
• The average impact of a 1-second delay meant a 7% reduction in conversions

Heavy images can account for the bulk of website weight. Detailed, high resolution images might be overkill for your website, especially if you find yourself resizing images for different screen sizes. Compressing images ensures that you are not carrying any unnecessary weight that will slow your website down – and that your users will still get a top notch user experience.

How to Compress Images with JavaScript

Filestack allows you to easily compress images. (Note, Filestack also provides API wrappers for image compression if you prefer a specific programming language).

To compress images with the JavaScript API, simply…

1. 1. Sign up for a free account to get your API key.
   2. Include the Filestack library in your code:
      

      <script src="https://static.filestackapi.com/v3/filestack.js"></script>

   3. Find the URL of the jpeg or png you are compressing. (Files that are not jpeg or png will be returned without compression). Using Filestack, you have two options here.
      1. You can use any externally hosted public file. Simply use the image url. For example, take this glorious but massive 4097×2848 rhinoceros picture: https://fossilrimblog.files.wordpress.com/2014/06/rs11711__do37002.jpg
      2. You can use Filestack’s file uploading API to upload the image. When uploading with Filestack, you are returned a CDN URL that you can use to transform and deliver images through Filestack’s integrated CDN. This is advantageous, as files delivered through CDNs are cached with regional servers worldwide, so your images tend to load a lot faster and use less bandwidth for globally distributed viewers. Your Filestack CDN URL should look something like: https://cdn.filestackcontent.com/iEoTBdtQRajSJ1eO7FU8
   4. Compress the image using the compress transformation parameter. For an external file, you can use the code:
      https://process.filestackapi.com / [YOUR API KEY] / compress / [IMAGE URL]
      For example:https://process.filestackapi.com/AhTgLagciQByzXpFGR10Az/compress/https://fossilrimblog.files.wordpress.com/2014/06/rs11711__do37002.jpgIf the file has already been uploaded using the Filestack API you can pass in the file handle and simply use the formula:
      https://cdn.filestackcontent.com / compress / [filelink]Just as with the external URL, this will result in an identical compressed image. For example:https://cdn.filestackcontent.com/compress/iEoTBdtQRajSJ1eO7FU8
One thing to note is that by default, Filestack strips metadata from images on compression to reduce its size. However, you can tell the API to keep metadata by passing compress=metadata:true with your compression URI.For example:https://process.filestackapi.com/compress=metadate:true/iEoTBdtQRajSJ1eO7FU8

Additional Image Optimization

Image compression is just a first step in optimizing images for high performance. Filestack offers a plethora of other tools to manage images, including an integrated content delivery network (CDN), responsive imaging functionality, and transformations to crop, resize, and otherwise edit images. Sign up now to get started optimizing your images.

We’re eager to see how this works for you! Please leave questions and comments below in the comments, or reach out directly to hello@filestack.com.

Filestack

Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.

Read More →