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.
Latest comments (7)
Hello,
Can I put an URL instead of the file input?
Thank you.
Dude, you are awesome. I've been looking for this solutions for many days.
Thanks.
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.
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?
In import I use
import Resizer from "react-image-file-resizer";
Fixed, sorry if it misled anyone
Hi! Thank you very very much!!!!