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];
Compress.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(files of this format are really fast).
Note: Set quality to 100 if you want to compress to PNG/WEBP(Lossless) else set the compress format to JPEG(Lossy)
Next
We will cover understanding Lossy and Lossless compression.
Top comments (7)
Dude, you are awesome. I've been looking for this solutions for many days.
Thanks.
In import I use
import Resizer from "react-image-file-resizer";
Fixed, sorry if it misled anyone
Hi! Thank you very very much!!!!
Is there a way to bulkify Image Resize action?
For example I send image list to the engine and it returns promise when its done with all the neccessary parameters?
Hi , i didn't understand the code because i am new to react js and only used functions until now . Can you please keep zip file of all the files used in the code .It will help me greatly.
Hello,
Can I put an URL instead of the file input?
Thank you.