忙しい向けの人へのまとめ
- ImageMagickはアップロード後に圧縮するから要件的にNGだった
- browser-image-resizerは、画像の幅、高さが小さくなりすぎる場合もある
- picaは幅、高さを指定できて、なんとかなった
ImageMagickがダメだった話
ちゃんと設定しないとセキュアじゃないし、インストールコマンドが急に動かなくなることがあるし、インストールにかかる時間も長いけど、これ以上に万能な画像加工ライブラリを私は知らない
日頃IT業に従事する諸兄らには俄かに信じ難い話かもしれないが、数メガバイトの画像アップロードが「重たすぎる（遅すぎる）」というお言葉を頂戴した
そこで、アップロード後にサーバで圧縮する方法（ImageMagick）は廃止し、ブラウザ（フロントエンド）で画像を圧縮する運びとなった
browser-image-resizerもやめた話
フロントエンドで画像を圧縮できるライブラリを探していたところ、browser-image-resizerというライブラリを見つけた。数メガバイトの画像ファイルを数十キロバイトまで圧縮することができる優れモノであった
しかし、画像の高さ、幅がガラパゴスケータイ時代のサイズになってしまうケースがあり、難アリという話が上がってしまい、画像の幅、高さをある程度指定できるライブラリを探すことになった
pica様と出会った話
picaを発見し、使ってみたところ、上記の課題を解決することができた。当然と言えば当然であるが、型はFile→Image→Canvas→Blobに変換してゆく必要がある
仕方ないことだと頭では理解しているものの、上記の変換処理の存在は、あまりにも異質というか、自然言語から離れすぎた実装になっている気がして大変気に食わない。どうにかしたいが、私はそれが解決できるほどオブジェクト指向をマスターしていない！ ひとまず課題は解決できたのでヨシッとする
ソースコード
ChatGPT 4oにpicaで画像圧縮する方法を聞けば、確実に教えてくれるため割愛する
アスペクト比の考慮や小さすぎるファイルは圧縮しないように伝えておくとよいだろう
さいごに
このpica様、最終公開が3年前である
問題なく動いているが、将来メンテナンスされてゆくのか心配であり、他ライブラリを探すべきなのかもしれない
ところでフロントエンドで画像を含むファイル圧縮は対応している拡張子は少ない気がする。とはいえ、多すぎても何かしら困りそうだ
コメント欄に有識者が批判と一緒に良いライブラリや方法を書いてくれるかもしれないし、ライブラリの批判を書くのはエンジニアの恥、自分で開発すべきなのかもしれないがそんな時間の余裕も知識もない。ライブラリ開発者各位、誠にありがとうございます