はじめに
WebPはGoogleが開発した画像フォーマットです。
圧縮率の高い非可逆圧縮で、透過した画像も書き出せ、GIF同様にアニメーションにも対応しています。
今回は<picture>を使って手軽にレスポンシブ対応させる方法をご紹介します。
完成形はこんな感じ
See the Pen WebPをpictureタグでレスポンシブ by Iwahashi Aki (@iwahashi_a) on CodePen.
用意するもの
- WebP画像（pc.webp、sp.webp）
- WebP非対応ブラウザ用の画像（pc.jpg、sp.jpg）
- Picturefill.js
-
<picture>はIE11非対応なのでポリフィルを使いましょう！ - http://scottjehl.github.io/picturefill/
-
pictureタグの使い方
<picture>を使うことで、画像を出し分けることができます。
例えば以下のように記述すると、700px以上のときにはpc.jpgを表示し、700px未満のときにはsp.jpgを表示することができます。
<picture>
<source srcset="pc.jpg" media="(min-width:700px)" />
<img src="sp.jpg" alt="sp.jpg" />
</picture>
<picture>の中には0個以上の<source>と、1つの<img>を入れます。
<source>はいくつ使用してもOKですが、<img>より前に記述してください。
IE11への対応
<picture>はIE11非対応です。そこでPicturefill.jsというポリフィルを使いましょう。
Picturefill.js
http://scottjehl.github.io/picturefill/
WebPの使い方
WebPを表示させるときにも<picture>を使います。
WebPはまだ対応していないブラウザがあるため、非対応ブラウザ用に画像を出し分ける必要があるからです。
対応ブラウザ: Chrome, Edge, Firefox, Opera, Safari（iOS14）
以下のように記述すると、WebP対応のブラウザではpc.webpを表示し、WebP非対応のブラウザではpc.jpgが表示されます。
<picture>
<source srcset="pc.webp" type="image/webp" />
<img src="pc.jpg" alt="pc.jpg" />
</picture>
2つを合体！完成！
上記の2つのコードを組み合わせてWebpをレスポンシブ対応させます。
<picture>
<source srcset="pc.webp" media="(min-width:700px)" type="image/webp" />
<source srcset="pc.jpg" media="(min-width:700px)" />
<source srcset="sp.webp" type="image/webp" />
<img src="sp.jpg" alt="sp.jpg" />
</picture>
行なっている処理の内容は以下になります。
- ブラウザ幅700px以上で、WebP対応ブラウザならpc.webpを表示
- ブラウザ幅700px以上で、pc.jpgを表示
- ブラウザ幅700px未満で、WebP対応ブラウザならsp.webpを表示
- 上記のどれにも当てはまらなかったら、sp.jpgを表示
<picture>は上から順番に条件判定をしてマッチしたものがあれば、その後の条件は無視されます。
もし1と2を逆に記述した場合、pc.webpが表示されることは永遠にないので記述する順番にはくれぐれもご注意ください。
おわりに
WebP非対応ブラウザへの出し分けがあるため、少しコードの量が多くなってしまいます。
サーバーサイドで出し分ける方法もありますが、部分的に使用したいという際にはこの方法が1番手軽かと思います。
WebPが全てのブラウザに対応する日が楽しみです。
参考文献
次世代画像形式のWebP、そしてAVIFへ –変わり続ける技術に対応するweb制作の黄金解–
https://ics.media/entry/201001/
picture: 画像要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture
画像ファイルの種類と形式ガイド
https://developer.mozilla.org/ja/docs/Web/Media/Formats/Image_types