しばらくかまってちゃんと直接関係ない話題が続く…。

勤めている会社での実案件でサイトの高速化・軽量化のために画像のWebP化を順次進めていた。
この記事ではWebPとは何か、WebP画像を作る方法、WebPをサイトで表示する方法について簡単に紹介する。

WebPとは

WebP(ウェッピー)とは米Googleが開発している画像フォーマット。初版は2010年9月30日とのことで、最初に公開されてからもう6年も経つが割りと知らない方も多いのではないかと思う*1。
ざっくり特徴を書くと

軽い(公式サイトで25〜34%くらいJPG画像を圧縮できると記載あり)
アルファチャンネルが扱える(PNGのように透過画像にできる)
アニメーションにも対応(アニメーションGIFからの変換可能)
可逆圧縮モード、非可逆圧縮モードが選べる

ただしWebPを扱えるブラウザはまだ数が限られていて Which web browsers natively support WebP? にまとめられている。このため画像をWebPで圧縮しても、その画像が全ブラウザで利用できるわけではないため、WebP対応ブラウザと非対応ブラウザで出し分けを行えるようにする必要がある。

WebPを作ってみる

対応・非対応ブラウザへの出し分けについては後の項目で記載するとして、まずはWebP画像を作ってみる。 https://developers.google.com/speed/webp/download から cwebp をダウンロードする。macでhomebrewを利用している人は brew install webpでも良い。
そしておもむろに

cwebp hoge.jpg -o hoge.webp

これだけでできる。作成されたWebP画像は利用しているデバイスのプレビューソフトでは見れない可能性もあるので、chromeブラウザで開いて見るのが早い。

またPHP5.5以上でGDのサポートをしているなら PHP: imagewebp - Manual という読んだままの関数があったりして胸が熱くなった。もう本当になんでもできるな！できる子すぎて逆に困る！

css-tricks.com

にはPhotoShopのプラグインやNode.jsでの変換方法なども紹介されている。自分の環境にあった一番いいやり方を探してみると良い。

WebPを表示するいくつかの方法

単純にimgタグのsrcに入れる

<img src="hoge.webp">

上記のようにimgタグのsrcに入れるだけで良い。WebP非対応ブラウザを利用しているユーザーには、その部分だけNot Foundになったように見えるようになる。このため単純にimgタグに入れるやり方を取る場合にはサーバーサイドで画像を切り替えて表示するかJavaScriptで置き換えるかの方法を取ることになる。

例えばサーバーサイドで判定してユーザーに該当画像を返す場合 Accept ヘッダーの中に "image/webp" が含まれているか、で判定することが可能。

pictureタグを使う

<picture>
    <source type="image/webp" srcset="hoge.webp">
    <img src="hoge.jpg">
</picture>

これでWebPに対応しているブラウザでは hoge.webp が、対応していないブラウザでは hoge.jpg が読み込まれるようになる。pictureタグに対応しているブラウザであれば、どちらを読み込むのかをブラウザが解釈してくれるので上記で記載したサーバーサイドでの判定も不要になる。

ただしpictureタグ自体に対応していないブラウザがある (Can I useでまとまっているpictureタグの対応状況) ので、そういった場合は

https://scottjehl.github.io/picturefill/scottjehl.github.io

というpollyfillを試してみるとよいかもしれない。

おわりに

高速化のためにいろんなボトルネックを探して日々対応しているが、例えばWebP画像を作って表示するだけでサイトを少しでも軽くできるなら割とお手頃な方法な気がする。確かにすべてのブラウザに対応しているわけではないが、自分のサイトに訪問されるユーザーの方々の利用ブラウザがもしWebPに対応している場合が多いなら、それなりに効果が表れてくれることと思う。もちろん画像を出し分けるために単純にJPGなどの通常画像とWebPの2種類を保存するほうがリソースが取られるので大変だと考える方もいるかと思うので、コストとの兼ね合いはあると思う。

とはいえ一つの手段として考慮に入れてみるのもいいかも。