特定ディレクトリ内の画像を再帰的にWebPに変換する

こんにちは、なんぞーです！

今回はサイトの高速化のために画像を WebP 形式で配信するようにしたいので、既にある画像を一括で WebP 形式に変換したいと思います！

A「うちのおかんがね、好きな画像形式があるらしいんやけど」

B「そうなんや。」

A「その名前を忘れたらしいねん。いろいろ聞くんやけどな、全然わからへんねん。」

B「ほんだら俺がね、おかんの好きな画像形式一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ。」

A「なんか Google が開発しているオープンな静止画フォーマットやって言うてた。」

B「WebP やないかい？その特徴はもう完全に WebP やがな。すぐわかったよこんなもん。」

A「俺も WebP やと思てんけどな、おかんが言うには、Safari でも IE でも表示できるっていうねんな。」

B「ほな WebP と違うか！」

WebP とは?

WebP（ウェッピー）は、Google が開発しているオープンな静止画フォーマット。

WebP は、Web 上で表示する画像に優れた可逆圧縮および非可逆圧縮を提供する最新の画像形式です。
WebP を使用すると、ウェブマスターと Web 開発者は、Web を高速化する、より小さくて鮮やかなイメージを作成できます。
WebP ロスレスイメージは、PNG と比較してサイズが 26%小さくなっています。
WebP 非可逆画像は同等の SSIM 品質インデックスで比較可能な JPEG 画像より 25~34%小さくなっています。
ロスレス WebP は、わずか 22%バイトの増加で透過性(アルファチャンネルとも呼ばれる)をサポートします。
非可逆な RGB 圧縮が許容できる場合、非可逆な WebP は透明度もサポートしており、PNG に比べてファイルサイズが 3 倍小さくなっています。
(A new image format for the Web を和訳)

何がしたいのか?

WebSite の軽量化のために WebP 形式の画像に対応したいと思っているが、既存の画像がたくさんある場合に特定のディレクトリ(images ディレクトリ等)内の画像を一括で WebP 形式に変換し、従来の画像と WebP 形式の画像の 2 種類を配信したい。

インストール

Mac の場合

1
:~ nandehu$ brew install webp

Linux の場合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// 必要なライブラリのインストール
> sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev

// libwebpのダウンロード
> curl -LO https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.1.0.tar.gz

// 解凍
> tar xvzf libwebp-1.1.0.tar.gz

// Build
> cd libwebp-1.1.0
> ./configure
> make
> sudo make install

特定ディレクトリ内の画像を再帰的に WebP 形式に変換

今回のディレクトリ構造

1
2
3
4
5
6
7
8
website
├── index.html
└── static
    └── images
        ├── 001.jpg
        ├── 002.png
        ├── 003.tiff
        └── 004.webp

コマンド

1
:website nandehu$ ls -d $(find -E `pwd`/static -iregex ".*\.(png|jpg|jpeg|tiff)" -type f) | xargs -L 1 -I {} cwebp {} -o {}.webp

コマンド結果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
website
├── index.html
└── static
    └── images
        ├── 001.jpg
        ├── 001.jpg.webp
        ├── 002.png
        ├── 002.png.webp
        ├── 003.tiff
        ├── 003.tiff.webp
        └── 004.webp

あとは html を書いてあげるだけなんですが、WebP 形式の画像は IE や Safari など一部のブラウザでは対応していないので、表示されません。

なので、WebP 対応しているブラウザでは WebP 形式の画像を、対応していないブラウザでは従来の形式の画像を表示させるようにしてあげます。

1
2
3
4
<picture>
  <source type="image/webp" srcset="static/images/001.jpg.webp" />
  <img src="static/images/001.jpg" />
</picture>

まとめ

Google の次世代の画像フォーマットで Web サイトのパフォーマンスを向上させていきましょう！！

では、恒例のここで一句・・・

WebP で

小さく鮮やか

みな HAPPY

お後がよろしいようで。