こんにちは。虎の穴ラボデザイナーのm.mです。

本記事は虎の穴ラボ2024年夏の連載ブログ 14日目の記事です。
昨日はおっくんさんの「Babylon.js x Hono x Fresh x Deno で作る 3D モデリングツール」が公開されました。ぜひご覧ください！
次回はA.Mさんの「
【Go言語】はじめてのEbitengine【ゲームエンジン】」が公開されますので、こちらもご期待ください！

今週のテーマは「見た目でわかるビジュアルネタ」ということで、Webサイトのビジュアルを司る画像ファイルをいかに効率よく変換できるかについて検証してみました。

はじめに

皆さんは画像の圧縮をする機会はありますか？
私はWebサイトを制作する際に必ず画像の圧縮を行なっています。
Webサイトに表示する画像の容量が重いと、表示スピードが落ちユーザビリティの妨げになるためです。
新規でサイトやLPを立ち上げる際にはたくさんの画像ファイルを圧縮する必要があります。
既存のアプリケーションで、ローカルで画像を圧縮してくれるものもあるのですが、
・PNGの圧縮率が悪い
・１枚ずつしか圧縮できない
など効率が悪い面がありました。
そこで、
圧縮率の向上のためにPNGからWebPに画像ファイルを乗り換えることを検討し、
まとめて画像を圧縮する方法の研究を行いました。

WebPとは

WebPは Google 社が考案し次世代の画像フォーマットとして提唱している形式です。

WebPのメリット

従来のJPEGやPNGよりもファイルサイズを小さくできる
└Retinaに対応するためサイズの大きい画像を使用するのが一般的なのでファイルサイズを小さく抑えたい！
非可逆圧縮と可逆圧縮の両方に対応している
└従来はJPEGが非可逆圧縮、PNGは可逆圧縮というように別れていたがどちらも使える
透明度を扱うことができる
└圧縮率の悪いPNGの代わりに使える！

実は今まであえてWebPを使ってこなかった？

上記を見るとWebPに乗り換えるメリットは大きいと考えられます。
ただ、これまで実はあえてWebPを使ってきませんでした。
その理由は、WebPだと画像が粗くなると思っていたからです。
Webサイトに掲載する画像やイラストは見る人へ情報を伝達するための大切な役割があるので、できるだけ鮮明なものを使用したいと思っていました。
しかし、今回WebPの変換や圧縮を調べて、WebPに変換圧縮すると画像が粗くなるというのは都市伝説らしいことが判明したのです！

WebPとPNGの圧縮率を比較してみよう！

違いが分かりずらいと思いますが、比べてみるとWebP（非可逆圧縮方式）が一番圧縮率が高く、かつ劣化もないという結果でした。

結論：WebPは劣化しない

今まで私が見てきたものは、圧縮しすぎていただけだった疑惑…
もちろん圧縮率をあげると劣化はしますが、劣化しないレベルでも十分圧縮ができていました。
非可逆圧縮は圧縮率がより上がるのでおすすめです。透過画像も圧縮できました。

画像をまとめて一括でWebPに変換圧縮しよう

本題です。
WebPで劣化せずに変換圧縮が可能なことがわかったので、次は画像ファイルをまとめて圧縮できるようにします。

私が行なった手順でご説明していきます。

まずはターミナルを使って１枚ずつ画像をWebPに圧縮変換する

1️⃣ Homebrew経由でcwebp のライブラリをインストールします。

$ brew install webp

2️⃣ ターミナルで画像の圧縮コマンドを実行します

非可逆圧縮のコマンド

$ cwebp -q 75 -metadata icc -sharp_yuv -o output.webp input.jpg

可逆（ロスレス）圧縮のコマンド

$ cwebp -lossless -metadata icc -o output.webp input.png

コマンドのパラメーターの解説

パラメーター（オプション）を指定して圧縮率などを調整します。パラメーターの詳しい説明や最適な設定についてはたくさん情報が出ているので割愛します。
ぜひ調べてみてください！

これで画像ファイルを一枚ずつWebPに変換圧縮することが可能になりました。

シェルスクリプトを作ってまとめて圧縮する

シェルスクリプトを作成

convert2webp.shなどのファイル名をつけて、変換したい画像を格納したディレクトリの中に入れます。
画像はサブディレクトリの中にあっても大丈夫。コマンドを立ち上げ、convert2webp.shを入れたディレクトリに移動して、

$ sh convert2webp.sh

と実行します。ディレクトリ内の全ての画像のWebPファイルができてますね！
良い感じですが、元のファイルとは別のディレクトリを作ってそこにWebPを格納したかったので少し修正しました。

いい感じです！でもメイドちゃん以外のディレクトリがある場合もあるよね、ということで少々調整。

やりたかったことができました！

クイックアクションを作成する

でもでも、ターミナルを立ち上げるのも面倒な時ってある。
なのでmacのクイックアクションを作成することにしました。
詳細な手順は割愛しますが、ざっくりと下記の流れで作成しました。

アプリケーションディレクトリからAutomatorを開く
クイックアクションを選択
イメージファイルに対してシェルスクリプトアクションを追加
名前をつけて保存

こんな感じでファイル上からクイックアクションにて変換圧縮が可能になりました！

ディレクトリを横断して画像をまとめて圧縮変換したい場合はターミナルから、
選択した画像をまとめて圧縮変換したい場合はクイックアクションと使い分けをしています。

まとめ

今回は検索と合わせてChatGPTにかなりお世話になりました。こんなことができたらいいな、と思ったことは大体できるものだなと実感しています。
非エンジニアでシェルスクリプトとは？クイックアクションの設定？？状態でしたが、ChatGPTを活用すると自分でできることが増えてとても嬉しいですね。
ついでにPNGやJPGファイルも拡張子をそのままにまとめて変換できるようにもしておきました。
ちょっとしたことですが実務でも効率化につながってとても良い学習になったと思います。

採用情報

虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp