WEBサイトに公開する画像・写真を一括で圧縮する方法


みなさまお疲れ様です。
金山雄星です。

突然ですが、画像の圧縮って意外と面倒くさくないですか?

WEBサイトやWEBシステムにアップする画像はオリジナルのままだと、ファイルサイズが大きすぎることが多く、余計な通信やコンピュータリソースを食ってしまいます。
相場感としては、一つの画像は数百KBオーダーにしたいところ。

対象の画像がすこしならMacの「プレビュー」でザイズ変更したりできますが、複数枚になると結構時間かかりますよね。。

余談ですが、、
「画像圧縮」でググると画像を圧縮してくれるオンラインサービスがたくさんできてますが、あれらのサーバーに送ってしまう系のサービスを仕事で使うのは論外です。
サービスを提供する怪しい事業者に画像は保存されてると思ったほうがいいです。セキュリティー的に利用は絶対NGです。


今回、とある開発案件で500枚ほどの画像のサイズを圧縮しないといけない話があり、WEBサイトやシステムに載せる画像の一括圧縮の方法をいろいろ調べたので、僕なりのベストプラクティスを共有します。

ImageMagicをインストール

本noteで紹介するやり方は、ある程度ターミナルでのCLI操作に慣れている人が対象になります。(ターミナル操作についてはまた別途note書きたいと思います)

Linux

sudo apt-get install imagemagick

Macの方はこちら

brew install imagemagick


実行するコマンド

⚠mogrifyは上書きするコマンドのため、オリジナル画像はバックアップがある場合にのみお使いください⚠

上書きをせず別ファイルとして作成する場合はconvertが使えます(convertだとファイル名が変わってしまうので、もとのソースコードをいじらないといけないのがだるかったです)


下記のコマンドを圧縮したい画像ファイルがあるディレクトリ(/srcなど)で実行するとそこにある画像がWEB用としていい感じに圧縮されます

find . -maxdepth 1 -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" -o -iname "*.gif" \) -print0 | xargs -0 mogrify -monitor -resize '1280x1080>'


解説

なにをしているかざっくり解説すると、

findで画像ファイルを見つけてくる( -maxdepth 1 を指定しなければ下層ディレクトリを再帰的に探してくれます)

パイプで渡してxargsで受け取る

mogrifyで画像のファイルを変更する

もちろんオプション類は、変更してもOKです。

圧縮の方法について

上述のコマンドで圧縮の方法として、

-resize '1280x1080>'

を指定してるのは、頭を悩ませたポイントで、、

・圧縮率の固定する方法だと、元々画質が良くなかった場合は悪くなりずぎる

・上限ファイルサイズを指定する方法だと、ファイルサイズを落とすために画像の種類によっては画質が悪くなりすぎる可能性がある

(JPEGなどの圧縮方式の仕組み上、画像の内容によって画質とファイルサイズは一概に決まらない)

そこで、横だけを1280pxに指定する結論に至りました。

このやり方ではほとんどの対象画像が、MBオーダーから数百KBオーダーになりました。

最後に

今回は、ちょっとマニアックな話でしたが、一部の人には共感してもらえる内容だったのではないかと思っております。。

弊社では、React,Flutterエンジニアを絶賛募集しております。
技術愛のある方、ご連絡お待ちしております。(ご興味ある方はSNSでDM頂けますと幸いです)

お読みいただきありがとうござました!

Be geek.
金山雄星

この記事が気に入ったらサポートをしてみませんか?