最近仕事でWebPを扱うことが増えてきたので、<picture>タグを使ったお手軽なWebP対応の方法について軽くまとめました。

そもそもWebPって何？

「WebP」はGoogleが開発している画像フォーマットで、拡張子は「.webp」です。仕様が公表されたのは10年以上前ですが、実際のサイト制作の現場で使われ始めたのはここ数年かな？

WebPのメリット

WebPの一番の強みは、その万能さにあります。

圧縮率が高い

現在主流なJPEGと比べると、WebPは20～30%ほど圧縮率が高いです（同レベルの画質にして比較した場合）。

大抵の場合、Webページのサイズ（転送量）の大部分を占めるのは画像ファイルなので、画像のファイルサイズを小さくするというのはページ表示速度の高速化に直結します。

アルファチャンネルに対応している

アルファチャンネルに対応しているので、透過PNGをWebPに置き換えることが可能です。しかも、JPEGと同じく20～30％ほどファイルサイズが小さくなります。

アニメーションに対応している

アニメーションに対応しているので、GIFをWebPに置き換えることが可能です。もちろん、256色しか表現できないGIFと違ってフルカラーに対応しています。

まぁアニメーション画像に関してはAPNGも優秀なので、お好みでどうぞ。

WebPのデメリット

万能なWebPにも弱点はあります。

非対応なソフトが多い

WebPが普及してきたのは割と最近なので、画像編集ソフトなどが対応していない場合があります。あの最強の画像編集ソフトのPhotoshopですら、プラグインを入れないとWebPを開くことすら出来ません。

変換に手間が掛かる

スマホで撮影した写真やネットから拾った画像はほぼ確実にJPEGやPNGなので、WebP画像を使いたい場合はアップロードする前にWebPに変換する必要があります。ちょっと面倒くさいですよね…

まぁ、サーバーに自動処理させたり、WordPressならプラグインに任せたりすることも出来ますが、一旦それは置いておきましょう。

一部非対応ブラウザがある

最近のブラウザはほぼWebPの表示に対応していますが、訪れるユーザー全てが最新のブラウザを使用しているわけではありません。

単純に<img src="XXX.webp">という記述をすると、これらの古い環境から閲覧しているユーザーには画像が表示されません。

IEはもうサポートが切られていますし、正直無視してもいいレベルのシェア率なんですが、案件によっては「IEで画像が表示されないんですけど…」っていう指摘が来る可能性もあります。

その対策として使うのが、今回紹介する<picture>タグを使ってWebPとJPEG（PNG,GIF）を切り替えるという手法です。

pictureタグで画像を切り替える

まずは<picture>タグの記述方法から見てみましょう。

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

<picture> タグは読み込めない<source>を飛ばすので、WebPが読み込めないブラウザでは<img>タグで指定したJPEGが表示されるようになります。

ちなみにレスポンシブ対応までするならこんな感じ。

<picture>
    <source media="(max-width: 767px)" srcset="XXX_SP.webp" type="image/webp">
    <source media="(max-width: 767px)" srcset="XXX_SP.jpg">
    <source srcset="XXX_PC.webp" type="image/webp">
    <img src="XXX_PC.jpg">
</picture>

767pxまでは「XXX_SP」を、768pxからは「XXX_PC」を読み込むっていう記述ですね。

これでWebP対応は完璧！…と言いたいところなんですが、困ったことにIEは<picture>タグに対応していません。なのでIEでも<picture>タグを使えるようにするために、picturefill.jsというライブラリを導入しましょう。

Picturefill

下記リンクから「picturefill.min.js」をダウンロードして、<picture>タグを使用したいページで読み込んでおきましょう。

特に何も設定しなくても、これだけでIEが<picture>タグを正常に解釈するようになります。

動作しないときはこれが原因？

以前Picturefillが動作しなくて困ったことがあるんですが、WebP画像のMIMEタイプ指定忘れが原因でした。

○ <source srcset="XXX.webp" type="image/webp>
✕ <source srcset="XXX.webp">

しっかりMIMEタイプを指定したら解決したので、忘れないように！

まとめ

画像のWebP化はページの高速化において非常に有効ですが、レガシーブラウザまで対応するとなると少し手間が掛かります。あと、画像編集ソフトなどもまだWebPに非対応なものが多いです。

ページ内全ての画像をWebPに対応させるのが大変なら、WebP化することによって得られる効果の大きい、ファイルサイズの大きい画像だけWebP化するという手もあるので、そこらへんは柔軟に対応しましょう。

補足

ここまで<picture>タグの話をしてきてアレなんですが、「.htaccess」をいじればサーバーで自動的に「XXX.jpgというリクエストだけど、同名のWebP画像が用意されてる場合はXXX.webpを返す」なんていう動作をさせることも可能です。というかそっちのほうがタグの書き換えが必要ないので楽だったり…その方法もいつか記事にします。

あと、AVIFとかいうさらに圧縮率の高いフォーマットも登場したとかなんとか。Webの世界ってほんと勉強を怠ったら一瞬で取り残されますね…