Zenn
🏞️

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

2023/03/29に公開
shell
WebP
画像変換
tech

※ 2020年時点の記事なので、情報がところどころ古い可能性があります、ご承知おき下さい。

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

今回はサイトの高速化のために画像を WebP 形式で配信するようにしたいので、既にある画像を一括で 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 の場合

:~ nandehu$ brew install webp

Linux の場合

// 必要なライブラリのインストール
> 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 形式に変換

今回のディレクトリ構造

website
├── index.html
└── static
    └── images
        ├── 001.jpg
        ├── 002.png
        ├── 003.tiff
        └── 004.webp

コマンド

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

コマンド結果

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 形式の画像を、対応していないブラウザでは従来の形式の画像を表示させるようにしてあげます。

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

まとめ

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

では、ここで一句・・・

WebP で

小さく鮮やか

みな HAPPY

お後がよろしいようで。

Discussion