I recently got interested in compressing images on the client-side for a couple of reasons:

Reduce my cloudinary bandwidth and storage usage
Users were complaining about long waits while uploading images

So I ventured to look for a library that will help me solve this fast and easy, maybe in the future I might build my own from scratch.

So I came by a couple of libraries that will help in compressing images on the client-side.

Browser Image Compression

Install it with your favorite package manager

npm install browser-image-compression --save

yarn add browser-image-compression

Create your react component

import React from "react";

class App extends React.Component {
  onChange = async (e) => {
    // Some onchange event calls
  };

  render() {
    return (
      <input name="file" id="file" onChange={this.onChange} type="files" />
    );
  }
}

Start compressing

...
import Compress from "browser-image-compression";

...
onChange = (e) => {
    // Get the files selected from the input tag
    // On select files always come in an array even
    // if you choose one its the first index
    // if you selected a couple then loop through the array
    const file = e.target.files[0]

    // Compression config
    const options = {
        // As the key specify the maximum size
        // Leave blank for infinity
        maxSizeMB: 1.5,
        // Use webworker for faster compression with
        // the help of threads
        useWebWorker: true
    }

    // Initialize compression
    // First argument is the file object from the input
    // Second argument is the options object with the
    // config
    Compress(file, options)
        .then(compressedBlob => {
            // Compressed file is of Blob type
            // You can drop off here if you want to work with a Blob file
            console.log(compressedBlob)

            // If you want to work with the File
            // Let's convert it here, by adding a couple of attributes
            compressedBlob.lastModifiedDate = new Date()

            // Conver the blob to file
            const convertedBlobFile = new File([compressedBlob], file.name, { type: file.type, lastModified: Date.now()})

            // Here you are free to call any method you are gonna use to upload your file example uploadToCloudinaryUsingPreset(convertedBlobFile)
        })
        .catch(e => {
            // Show the user a toast message or notification that something went wrong while compressing file
        })
}

Next, we will cover using react-image-file-resizer library

Compress images in React: Browser Image Compression Libary

Comments

Compressing Images on the Client

Compress images in React: React Image File Resize

More from this blog

How to create a CLI program in Go and host it on npm

How to setup Dokku

What is Dokku

Compress images in React: React Image File Resize

Browser Image Compression

Next

Command Palette

Comments

Compressing Images on the Client

Compress images in React: React Image File Resize

More from this blog

Browser Image Compression

Next