Image Compression in ReactJs

Matheswaaran
Mar 16 · 2 min read
Designed By Naren

While uploading the images to the block storage (or) S3 storage, the full images when captured through the phone (Pixel 3 or others) camera, has a size up to 3 MB. This consumes most of our time while uploading. So, I started looking into lossless compression techniques for images on the client-side.

I came across an amazing image compression package for Javascript called compressorjs.

We can resize, compress and convert the images based on our requirements.

To compress your images follow these three simple steps:

  • Install the package using npm/yarn
  • Add the particular code block to your project
  • Be Amazed!

Install the package using npm/yarn

To install the package, type one of the following commands based on your package manager

For npm:

npm install compressorjs

For Yarn:

yard add compressorjs

Add the particular code block to your project

Add the code to your component before uploading. This code compresses the images to 80% of their original quality. We can use any percentage of compressing we need.

new Compressor(image, {      
quality: 0.8,
success: (compressedResult) => {
// compressedResult has the compressed file.
// Use the compressed file to upload the images to your server.
setCompressedFile(res)
},
});

The full example of how this code can be used in an upload component using ReactJs.

Be Amazed!

Horray! Once the magic happens, see the size of the image, the captured file of 2.8 MB is compressed to a 500 KB file.

To know more, visit their website here.

Say Hi, It’s free at @matheswaaran_S or https://matheswaaran.com

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Matheswaaran

Written by

Developer

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store