次世代フォーマットの画像の1つであるWebP（ウェッピー）をサイトで表示させ、SafariやIEなどの非対応ブラウザでは代替画像を表示させる方法をまとめました。
現在主流の書き方は、大きく分けて2つあります。
方法1 pictureタグで柔軟に切り替える
<picture>
<source type="image/webp" media="(max-width: 599px)" srcset="./images/img_sp.webp">
<source type="image/webp" media="(min-width: 600px)" srcset="./images/img_pc.webp">
<source media="(max-width: 599px)" srcset="./images/img_sp.jpg">
<source media="(min-width: 600px)" srcset="./images/img_pc.jpg">
<img src="./images/img_pc.jpg" alt="">
</picture>picture要素内では、上から順に条件に合ったsource要素を判別していきます。
例えば上記の書き方だと、
- 画面幅599px以下、かつWebP対応ブラウザなら「img_sp.webp」を表示。違うなら②へ
- 画面幅600px以上、かつWebP対応ブラウザなら「img_pc.webp」を表示。違うなら③へ
- 画面幅599px以下なら「img_sp.jpg」を表示。違うなら④へ
- 画面幅600px以上なら「img_pc.jpg」を表示。違うなら⑤へ
- ①～④すべての条件に当てはまらなかったら「img_pc.jpg」を表示
となります。
WebP非対応ブラウザなら③～⑤の条件に当てはまったファイル、IE11などpicture要素も非対応のブラウザなら最後の⑤imgタグのファイルが読み込まれるので、WebP非対応ブラウザだと画面が真っ白！なんてことにもなりません。
※書く順番だけは間違えないようにしましょう。
条件に当てはまらなかったファイルが読み込まれることはないので、ページ読み込み速度に悪影響もありません。
pictureタグを使うメリット
JPEGやPNG画像をWebPに変換する時に、画面幅による表示の切り替えも一緒にしたい場合、pictureタグを使うのがオススメです。
pictureタグを使うデメリット
画像がたくさんあるページだと、pictureタグでいちいち書くのが手間になる場合も。「全部一括で処理したい！」そんな場合は、下記の「方法2 .htaccessファイルで振り分け」を選択しましょう。
方法2 .htaccessファイルでらくらく振り分け
画像を挿入するたびにpictureタグで書くのは面倒…。
手軽さを求めるなら、.htaccessファイルに下記の記述をすればpictureタグを使わずにJPEGやPNGではなくWebPを読み込んでくれます。
ただし、
・対応ブラウザである
かつ
・拡張子も含んだ同じ名前のWebPのファイルが同階層（同じフォルダ）にある
必要があります。
〈ファイルの名前例〉
images/img.jpg ⇒ images/img.jpg.webp
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp上記はWordPressの「EWWW Image Optimizer」プラグインで使われている設定で、この書き方を参考にする人が多いんじゃないかと思います。
.htaccessファイルを使うメリット
手軽さを求めるならこの方法が一番だと思います。
WebPファイルが無ければ画像の切り替えは行われないので、一部の画像だけWebPで表示して、残りは通常通りJPEGやPNGファイルで表示したい場合にも対応できます。
.htaccessファイルを使うデメリット
方法1のpictureタグを使えば、好きな画面幅でさらに表示画像を切り替えることもできますが、.htaccessファイルでそこまで柔軟に対応させることは難しいです。
できなくはないと思いますが、記述が複雑になる上、専門的な知識を持った人しか修正できなくなります。
最後に
サイズ容量がかなり小さく、サイトの読み込み速度、ひいてはSEOにも好影響を与えるWebPは魅力いっぱいですが、そのままのJPEGやPNGより画質は落ちます。
画質に対する許容範囲は人それぞれ。
「ここの画像は綺麗に見せたい」など希望があれば、画質とファイル容量のバランスを見ながら、WebPで表示する画像は一部だけにしたりしましょう。
また、制作時の作業効率やその後のメンテナンス性を考えて、上記の2つの方法から適切な方で対応していきたいですね。
（iOSが対応してくれてIE11のサポートも終了すれば、こんな手間も無くなるんですが…）