パンダと戦う画像圧縮サイトを開発した話
先日、Joke Jobというサイトを作成したという記事を書いたyosiです。
そして7月25日にまた新しいサービスをリリースしたので、今回はその話をしようと思います。
ちなみに開発を始めたのが22日ごろからなので3日くらいで作ったことになります。
作ったサービス
「ImgRoller」という画像を圧縮したり、リサイズを行うサイトです。
機能の紹介記事も書いてますので良ければどうぞ。
簡単に紹介すると以下の特徴を持った画像圧縮&リサイズWebアプリです。
- 🆓無料で使えて一度に圧縮できる枚数にも制限なし
- 🍎強力な圧縮性能
- 📜圧縮だけではなくて画像解像度の縮小も可能。画質を直感的に比較する機能も提供
- 📌出力の設定はURLに反映されるのでブックマークしておくと、同じ設定を次回も使える
- ✨出力はPNGとJpeg に加えてWebpにも対応
- 👀どのくらい効率化できたか一目でわかる
- 💕ファイルをサーバーにアップロードしないので安心
- 📗日本語と英語含む8言語対応
こだわったポイント
ブラウザサイドで画像処理が完結することにこだわりました。これには理由があり、インフラコストを下げることができるので無料かつ無制限に使えるようにするために必要だったからです。
基本的にはCompressor.jsを使っていますが、compressorjsが苦手とするPNGの圧縮も行っています。
Compressor.jsのサンプルサイトに適当なPNG画像を入力するとサイズが変わらないのが確認できます。
次にImgRollerに同じ画像を入力します。結果は半分以下のサイズに圧縮できました。
PNG画像に関しては別途、256色に減色して非可逆圧縮処理をすることで実現しています。
Dropzone
ImgRollerにはファイルをドラッグアンドドロップでファイルを選択できるDoropzoneがあります。そして、それをReactで作るにはreact-dropzoneというパッケージを使用するのが一番有名な方法だと思います。
僕自身もよくお世話になっていたパッケージなのですが、久々にGithubを見に行くと最終コミットから2年近くたっていることに気づきます。他に良い選択肢も見つからないので、react-dropzoneを使用するか自作するかで悩んだ結果、最終的には自作することにしました。
react-dropzoneに影響を受けていますが、コードの流用はせずに1から作り直しています。
ファイルのmime typeや拡張子を確認する作業が意外と面倒でした。
せっかく自作したのでreact-dropzone-vvという名前でパッケージとして公開しています。
ドキュメントサイトも作ってますよ。頑張って更新してるので使ってください（使わないならスター付けてください）。
このパッケージ開発に関する話もまた記事にしたいですね。
最後に
ちょっと圧縮したいときなどに便利なので、ぜひ触ってみてください。
Discussion