前提として、ここでいうIEはIE11をさす。IE10以下は確認していない。
WebPとPictureタグは対応していないブラウザが存在する
- WebPはIEとSafariが対応していない（iOS14から対応、macOS版はmacOS Big Surから対応した模様）
- PictureタグはIEが対応していない。
https://caniuse.com/picture
https://caniuse.com/webp
https://www.suzukikenichi.com/blog/safari-on-big-sur-now-supports-webp/
先に結論
- Pictureタグの場合はPicturefillポリフィルを使ってIE対応。
- CSSの場合はModernizrを使ってIEとSafariに対応。
Pictureタグの場合
設置
npm i picturefillかCDN経由で読み込む。
基本的には読み込むだけでOK。
IEのためだけに使っているので不要な他のブラウザでは読み込まないように条件式で読み込むと尚良い。
https://cdnjs.com/libraries/picturefill
http://scottjehl.github.io/picturefill/
注意点
- 上から順番に条件にあうものが表示されるので、WebPはjpgよりも先に書く。
- WebPは
type="image/webp"を指定する。
Safariは自動的にWebPをスキップしてjpgを読み込む。
IEはPictureタグのルールに従ってPicturefillが処理してくれる（ありがたい）
サンプルはモバイルファーストの書き方だが、PCファーストの場合はSP・PC画像の順番を逆にしてmax-widthを使えば良い。
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
<picture>
<source srcset="pc.webp" media="(min-width: 1000px)" type="image/webp"><!-- 幅1000px以上でWebP対応なら表示 -->
<source srcset="pc.jpg" media="(min-width: 1000px)"><!-- 幅1000px以上でWebP非対応なら表示 -->
<source srcset="sp.webp" type="image/webp"><!-- 上記に当てはまらずWebP対応なら表示 -->
<img src="sp.jpg"><!-- 上記に当てはまらずWebP非対応なら表示 -->
</picture>
CSSの場合
Modernizrで振り分けする。
Modernizr注意点
デフォルトのままではWebPの判定は入っていないのでCDN経由では使えない。
１） https://modernizr.com/ にアクセスして「Add your detects」をクリック。
２） 「Webp」を選択して「BUILD」クリック。
３） ダウンロードするか、コードをコピー。
設置すると、WebP対応していないブラウザの<html>タグに.no-webpが付与されるようになる。
なのでWebP対応のブラウザはそのままWebP画像を読み込み、非対応のブラウザは別の画像を読むという指定ができるようになる。
.sample {
background: url(sp.webp);
}
.no-webp .sample {
background: url(sp.jpg);
}
WebPとPictureを使うメリット
- WebPはjpgやpngと比べて容量が軽い。
- 特にpngはWebPにすることで圧倒的に軽くなる。
- Pictureタグは条件に合致した画像だけ読み込むため、無駄な画像を読み込まない。
結果、ページ高速化。
Webサイトの容量は画像の割合が大きいので、これを軽くできるのは効果が大きい。
デメリット・注意点
- Next.jsやNuxt.jsを使う場合、プリフェッチが効かないかもしれない。
- 別途WebP画像を用意する必要がある。
WebPもPictureタグもなんとなく敬遠してきたが、設置は意外と簡単でページの高速化に大きく寄与することがわかった。これからは積極的に使っていきたい。
記事修正しました
IEの条件付きコメントはIE10以降廃止されたので記述を訂正しました。