COLUMN コラム

皆さんはWeb制作をする際、画像の拡張子をどのように使い分けていますか？
写真等はjpeg/jpg、透過画像はpngでしょうか？実はWebPでは写真も透過画像も表現できる上、さらに画像のファイルサイズも大幅に削減できます。
WebPに変換できる無料のWebサービスはいくつか存在しますが、枚数によってはアップロードに時間がかかったり、容量に制限があることも多いです。
そこで今回は、わずか数ステップでローカルにWebP変換の環境を作る方法をご紹介します。

1. WebPとは？

WebPは2010年にGoogleによって開発された画像フォーマットです。
冒頭で述べた通りファイルの軽量化ができるのとフォーマットを統一できるということが特徴です。
以前まではInternet Explorer（以下「IE」）に対応していないというデメリットが有りましたが、2023年7月現在IEのサポートは終了しており、「Can I use」のWebP対応状況もIE以外対応済みのため、基本的にはWebPに移行して問題はないでしょう。
それぞれの拡張子の違いについては、過去の記事「JPG、GIF、PNG、SVG、WebPのメリット・デメリット」でもご紹介していますので、詳しく知りたい方はそちらをご参照いただければと思います。

2. 準備

2-1. WebPをインストールする

jpeg/jpgやpng画像をwebpに変換するには「cwebp」というコマンドをインストールする必要があります。

「cwebp」はMacのパッケージ管理ツールである「Homebrew」からインストールできます。

パッケージ管理ツールとは、PythonやNode.jsといったプログラミング言語や、 SlackやZoom等といったアプリケーションのインストール・管理ができるツールです。
個別でインストールするよりも管理が楽になる等のメリットがあります。
Homebrewのインストール方法や使い方については解説されているサイトが多くありますので、今回の記事では割愛させていただきます。

今回はwebpというパッケージをインストールするので、ターミナルを開き以下のコマンドを実行してください。

$ brew install webp

実行後、「brew list」コマンドを実行して、一覧に「webp」があればインストールに成功しています。

2-2. Shellスクリプトを用意する

変換したい画像をまとめた任意のフォルダに空のテキストファイルを作成し、以下を貼り付けます。

#!/bin/sh
for file in `find . -type f -name "*.jpg" -or -name "*.jpeg" -or -name "*.png"`;
do
cwebp $file -o "${file%.*}.webp" >/dev/null 2>&1
done

ファイル名は任意のファイル名、拡張子は「.sh」で保存します。今回は「webp.sh」にしましょう。

こちらのシェルに「フォルダの中を上から順に見ていき、jpg/jpeg/pngがあればwebpに変換する」という処理が書かれています。

2-3. Shellスクリプトに実行可能な権限を付ける

Shellスクリプトは作った段階では「実行できない状態」ですので、ターミナルで以下のコマンドを実行してファイルを実行できる状態にします。

$ cd path/to/dir  //Shellスクリプトがあるフォルダに移動する
$ chmod 755 webp.sh  //ファイルを実行可能な権限に変更

以上で準備は完了です。

3. 実行方法

webp.shがあるフォルダに変換したい画像を置きます。



ターミナルで以下のコマンドを実行します。

$ ./webp.sh  //シェルスクリプトを実行

設置した画像ファイルの数だけwebpファイルができていれば成功です。


ファイルの容量もかなり少なくなっているのがお分かり頂けると思います。
また、画像の劣化も無く容量のみを削減することができるため、Webサイトの見た目が悪くなるということもありません。

【画像比較】

左：sample1.jpg(2.4MB) / 右：sample1.webp(953KB)
 

 

左：sample2.png(13.6MB) / 右：sample2.webp(953KB)
 

おわりに

いかがでしたでしょうか？初期設定が必要ではあるものの、変換自体はとても簡単にできたのではないかと思います。
昨今はモニターの解像度も上がってきており、高解像度の画像をたくさん使う機会も多いと思います。
そんなときにWebの圧縮サービスに画像をアップロードするのではなく、ローカルで作業することができれば作業の効率化に繋がります。
是非この機会に導入してみてはいかがでしょうか。