How to compress the image on the client side before uploading

Compress the image on the client side before uploading using JavaScript.

Optimizing images is always a good idea. It reduces the total amount of data being transferred over the network and memory consumption. What, if we could compress the image before uploading it to the server? It is possible. Let’s dive into that.

Introduction

Image optimization is an important strategy for improving performance. Compressing an image before uploading gives an opportunity to reduce its file size without losing the quality before uploading to the server.

Should I compress images before uploading?

There are several benefits:

1. Faster uploading and downloading data.
2. Reducing memory consumption.
3. Saves the space on the server.

How to use JavaScript to compress the image before upload

To compress an image via JavaScript in the browser we’ll use Canvas API for that purpose. What is needed is to attach the event handler for the event type change and HTML element input type file, then process the image using canvas and the canvas.toBlob method.

Here is the basic code if you want to use it straight on your site and get the package from jsdelivr.com (free, fast, and reliable CDN for JS and open source):

<script src="https://cdn.jsdelivr.net/npm/@sitelintcode/optimize-image-on-the-client-side@0.0.15/dist/optimize-image-on-the-client-side.js"></script>
<script>
(function() {
  const optimizeImage = new window.sitelint.OptimizeImage();
  optimizeImage.install();
}())
</script>

Worth to mention that jsdelivr.com suggest: Omit the version completely or use latest to load the latest one (not recommended for production usage):

https://cdn.jsdelivr.net/npm/@sitelintcode/optimize-image-on-the-client-side@latest/dist/optimize-image-on-the-client-side.js

https://cdn.jsdelivr.net/npm/@sitelintcode/optimize-image-on-the-client-side/dist/optimize-image-on-the-client-side.js

Full code for image compression is available on GitHub.

Limitations

There are several limitations:

1. Browsers are required to support image/png, but many will support additional formats including image/jpeg, and image/webp.
2. The event type change attached to the input type file may not be executed correctly when there are multiple event handlers.
3. Founded issue or have a suggestion? Visit optimize-image-on-the-client-side on GitHub.

Workable example

There is nothing better than a workable solution. See the image compression on the client-side example.