WebP対応の方法

2019年5月20日

WebPについての全投稿は/tag/WebPにあるので参照されたい

安易にWebPしてはならない

ウェブ検索してみると、「WebPは既にあちこちの企業サイトでも使われている!」などという書き込みがあるのだが、しかし、2019/5時点でのすべての最新ブラウザがサポートしているわけではない。特にAppleは全滅らしい。したがって、安易にWebPにしてしまうと、MacやiPhoneで画像が見れないという事態に陥ってしまう。

それに対して、WebPを解説するサイトではそのメリットばかりに焦点を当てており、GoogleのPageSpeed Insightsではしつこく「WebPに変更しろ」と言ってくる。

当然のことだが、「あちこちの企業サイト」では、未対応ブラウザには従来のJPGやPNGを出力しているはずであり、対応ブラウザにのみWebPを出力しているはずだ。

つまり、現時点でWebPを使うことは、切り替える「仕組み」が必要なのだが、それをきちんと説明するウェブサイトが少ないように思われる。

当然だが、今までのimgタグと、そこに指定するjpg/pngといった画像はそのままで、何らかの自動的な方法(あるいは静的な方法)でWebPに対応することが必要になってくる。

つまり、サイト製作側としては、これまでの

<img src="image.jpg">

というタグと、image.jpgという画像のみを与え、あとは仕組みによってWebP画像を自動で生成し、WebP対応するということだ。

WebP対応自動化の方法

三つの方法が考えられる。当然だが、これらは「仕組み」によって自動化することを考えた場合だ。

方法1:画像のみすり替える

HTMLはそのまま以下のような記述にしておき、書き換えは行わない。

<img src="image.jpg">

この状態で、webpバージョンの画像にすり替える。

image.jpgを要求してきたブラウザがwebp対応の場合には、送りだすコンテンツをwebpにし、mimeタイプをimage/webpに変更してやればよい。

※念の為だが、コンテンツ名称はimage.jpgのままで構わない。画像種類はmimeタイプによって決定される。

メリット

  • HTMLを一切書き換えないため、wordpressのページキャッシュ等を利用する場合には都合がよい。
  • 当然のことながら、タグ構造が変わらないのでCSSやJavaScriptの動作への影響無し。

デメリット

  • 同じURLの画像が異なるものになってしまうため、プロキシやCDNでのキャッシュパフォーマンスが悪くなる。
  • ユーザが画像をセーブすると、webpなのにimage.jpgという名前になっている。

方法2:imgタグのみ書き換える

ブラウザによってHTMLの内容を書き換えてしまう。webpサポートのブラウザに対しては、

<img src="image.jpg">

ではなく、

<img src="image.webp">

と書き換えて送り出す。

メリット

  • 画像に関してはプロキシやCDNでのキャッシュが効く。
  • タグ構造が変わらないのでCSSやJavaScriptの動作への影響無し

デメリット

  • 出力されるHTMLが場合によって異なるため、wordpressのページキャッシュ等を利用する場合に都合が悪い。
  • 当然、HTMLに関してプロキシやCDNでのキャッシュも同じ。

方法3:HTML・画像を固定する

全ブラウザに対して同じHTMLを出力し、画像すり替えも行わない方法になる。

<img src="image.jpg">

というHTMLを、以下に変更する。

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

この方法では、すべてのブラウザに同じHTMLを配信できる。

※当然だが、手作業でWebP対応しようと思うのであれば、この方法しかない。

メリット

  • どんなブラウザに対しても同じHTMLなので、wordpressのページキャッシュ等を利用する場合に都合が良い。

デメリット

  • タグの構造が変更されるのでCSSやJavaScriptの動作に影響があるかもしれない。

「仕組み」の必要性

企業サイトでは何らかの「仕組み」によって、こういった操作を単純化することができるからこそやっているのだろう。「これまでのPNGやJPGをWebPに置き換えてね」という単純な話では無いことは明らかだ。