Compress images in React: React Image File Resize

Okay for this one I highly recommend, the speeds is just amazing. I loved it. I am gonna do a comparison real quick, between browser-image-compression and react-image-file-resizer.

`browser-image-compression`	`react-image-file-resizer`
Really fast	Compressed the same took a while
Quality option on the config	Only offers size limit
Return `base64` or `Blob`	Returns `Blob` only do the conversion yourself
No need to handle Promise	Must handle Promise
Specify compress format (png, webp, jpeg)	The compress format provided is the one returned

Below is an image I was able to compress with the following config

width -> 480px
height -> 480px
file format -> Set to JPEG
quality -> 50
rotation -> 0

Actual size: 1.6mb

(Click here) Click on the link its a huge image and I just want the load time for this blog to be faster.

Compressed size: 16.3kb

Let's jump into how you can plug it into your React app

React Image File Resizer

Install the package
```
yarn add react-image-file-resizer
```

Create your react component

import React from "react";

// ...

class App extends React {
  // ...
  render() {
    return (
      <div className="App">
        // ...
        <h3>React Image File Resizer</h3>
        <br />
        <input
          type="file"
          id="file"
          accept="image/*"
          onChange={this.onFileResize}
        />
      </div>
    );
  }
}

Start compressing

...
import Compress from "react-image-file-resizer";

...
onFileResize = e => {
    const file = e.target.files[0];

Resizer.imageFileResizer(
  file, // the file from input
  480, // width
  480, // height
  "JPEG", // compress format WEBP, JPEG, PNG
  70, // quality
  0, // rotation
  (uri) => {
    console.log(uri);
    // You upload logic goes here
  },
  "base64" // blob or base64 default base64
);
}

Again I highly recommend this library especially because it supports compressing to WEBP(file of this format are really fast).

Note: Set quality to 100 if you want to compress to PNG/WEBP(Lossless) else set the compressed format to JPEG(Lossy)

We will cover understanding Lossy and Lossless compression.

Compress images in React: React Image File Resize

Comments

Compressing Images on the Client

Compress images in React: Browser Image Compression Libary

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: Browser Image Compression Libary

Actual size: 1.6mb

Compressed size: 16.3kb

React Image File Resizer

Next

Command Palette

Comments

Compressing Images on the Client

Compress images in React: Browser Image Compression Libary

More from this blog

Actual size: 1.6mb

Compressed size: 16.3kb

React Image File Resizer

Next