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 using JavaScript before uploading it to the server? It is possible. Let’s dive into that.

Introduction: Understanding the need to compress images on the client side before uploading

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 you compress images before uploading? Exploring the benefits of using JavaScript

There are several benefits:

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

Step-by-step guide: Compressing images with JavaScript before uploading

To compress images on the client-side, you can use Canvas API for lossy compression. This approach allows you to optimize images without the need for servers, directly in the user’s browser.

What is needed is to attach the event handler for the event type change and HTML element input type file, pause the event propagation, process the image using canvas and the canvas.toBlob method, and at the end return results and resume event propagation.

You can automate that process and use our npm package @sitelintcode/optimize-image-on-the-client-side with documentation on how to install and use it.

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.23/dist/optimize-image-on-the-client-side.js"></script>
<script>
(function() {
  const optimizeImage = new window.sitelint.OptimizeImage();
  optimizeImage.install();
}())
</script>

Worth mentioning 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

Full code for image compression is available on GitHub.

Limitations: Factors to consider when compressing images on the client side

There are several limitations:

1. Browsers are required to support image/png (PNG), but many will support additional formats including image/jpeg (JPEG, JPG), and image/webp (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: Demonstrating image compression with JavaScript

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