こんにちは、なんぞーです！
今回はサイトの高速化のために画像をWebP形式で配信するようにしたいので、既にある画像を一括でWebP形式に変換したいと思います！
A「うちのおかんがね、好きな画像形式があるらしいんやけど」
B「そうなんや。」
A「その名前を忘れたらしいねん。いろいろ聞くんやけどな、全然わからへんねん。」
B「ほんだら俺がね、おかんの好きな画像形式一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ。」
A「なんかGoogleが開発しているオープンな静止画フォーマットやって言うてた。」
B「WebPやないかい？ その特徴はもう完全にWebPやがな。 すぐわかったよこんなもん。」
A「俺もWebPやと思てんけどな、おかんが言うには、SafariでもIEでも表示できるっていうねんな。」
B「ほなWebPと違うか！」
WebP（ウェッピー）は、Googleが開発しているオープンな静止画フォーマット。
WebPは、Web上で表示する画像に優れた可逆圧縮および非可逆圧縮を提供する最新の画像形式です。
WebPを使用すると、ウェブマスターとWeb開発者は、Webを高速化する、より小さくて鮮やかなイメージを作成できます。
WebPロスレスイメージは、PNGと比較してサイズが26%小さくなっています。
WebP非可逆画像は同等のSSIM品質インデックスで比較可能なJPEG画像より25~34%小さくなっています。
ロスレスWebPは、わずか22%バイトの増加で透過性(アルファチャンネルとも呼ばれる)をサポートします。
非可逆なRGB圧縮が許容できる場合、非可逆なWebPは透明度もサポートしており、PNGに比べてファイルサイズが3倍小さくなっています。
WebSiteの軽量化のためにWebP形式の画像に対応したいと思っているが、既存の画像がたくさんある場合に特定のディレクトリ(imagesディレクトリ等)内の画像を一括でWebP形式に変換し、従来の画像とWebP形式の画像の2種類を配信したい。
:~ nandehu$ brew install webp
// 必要なライブラリのインストール
> 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
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
お後がよろしいようで。