Developed an image compression site to fight pandas.

yosi — Mon, 29 Jul 2024 19:32:31 +0000

We released another new service on July 25, so I will talk about it this time.
By the way, I started development around the 22nd, so I made it in about 3 days.

About the service I created

The "ImgRoller" is a site that compresses and resizes images.

https://yosidev.com/tools/imgroller/en/

It is an image compression & resizing web application with the following features when briefly introduced.

🆓Free to use and no limit on the number of sheets you can compress at once
🍎Powerful compression performance
📜Not only compression but also resizing. Also provides intuitive comparison of image quality
📌Output settings are reflected in the URL, so you can bookmark it and use the same settings next time
✨Output supports Webp as well as PNG and Jpeg
👀File size reduction at a glance
💕No need to worry because no files are uploaded to the server
📗Supports 8 languages including Japanese and English

Points

We insisted that image processing be completed browser-side. There is a reason for this: it was necessary to lower infrastructure costs so that we could offer free and unlimited use.

Basically, we use Compressor.js, but we also compress PNGs, which compressorjs is not good at.

If you enter an appropriate PNG image in Compressor.js sample site, you will see that the size does not change.

Next, enter the same image into ImgRoller. The result is compressed to less than half the size.

For PNG images, this is achieved by separately reducing the number of colors to 256 and performing lossy compression processing.

Dropzone on React

ImgRoller has a Doropzone that allows you to drag and drop files to select files. And I think the most famous way to create it in React is to use the package react-dropzone.

I myself was a frequent user of this package, but when I went to Github after a long time, I realized that it had been almost two years since the last commit. Since I couldn't find any other good options, I was torn between using react-dropzone or creating my own, and finally decided to create my own.

I am releasing it as a package under the name react-dropzone-vv.
I have also created a documentation site. I'm doing my best to update it, so please use it.

https://github.com/yosipy/react-dropzone-vv

https://www.npmjs.com/package/react-dropzone-vv#react-dropzone-vv

It is influenced by react-dropzone, but I did not divert the code but rebuilt it from scratch.
It was surprisingly troublesome to check the mime type and file extension of the files.

Finally.