安易にWebPしてはならないウェブ検索してみると、「WebPは既にあちこちの企業サイトでも使われている!」などという書き込みがあるのだが、しかし、2019/5時点でのすべての最新ブラウザがサポートしているわけではない。Appleは全滅らしい。したがって、安易にWebPにしてしまうと、MacやiPhoneで画像が見れないという事態に陥ってしまう。Insightsではしつこく「WebPに変更しろ」と言ってくる。当然のことだが、「あちこちの企業サイト」では、未対応ブラウザには従来のJPGやPNGを出力しているはずであり、対応ブラウザにのみWebPを出力しているはずだ。現時点でWebPを使うことは、切り替える「仕組み」が必要なのだが、それをきちんと説明するウェブサイトが少ないように思われる。当然だが、今までのimgタグと、そこに指定するjpg/pngといった画像はそのままで、何らかの自動的な方法(あるいは静的な方法)でWebPに対応することが必要になってくる。src="image.jpg">というタグと、image.jpgという画像のみを与え、あとは仕組みによってWebP画像を自動で生成し、WebP対応するということだ。三つの方法が考えられる。当然だが、これらは「仕組み」によって自動化することを考えた場合だ。方法1:画像のみすり替えるHTMLはそのまま以下のような記述にしておき、書き換えは行わない。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の内容を書き換えてしまう。src="image.webp">と書き換えて送り出す。メリット画像に関してはプロキシやCDNでのキャッシュが効く。タグ構造が変わらないのでCSSやJavaScriptの動作への影響無しデメリット出力されるHTMLが場合によって異なるため、wordpressのページキャッシュ等を利用する場合に都合が悪い。HTMLに関してプロキシやCDNでのキャッシュも同じ。方法3:HTML・画像を固定する全ブラウザに対して同じHTMLを出力し、画像すり替えも行わない方法になる。src="image.jpg">というHTMLを、以下に変更する。src="image.jpg"></picture>この方法では、すべてのブラウザに同じHTMLを配信できる。※当然だが、手作業でWebP対応しようと思うのであれば、この方法しかない。メリットどんなブラウザに対しても同じHTMLなので、wordpressのページキャッシュ等を利用する場合に都合が良い。デメリットタグの構造が変更されるのでCSSやJavaScriptの動作に影響があるかもしれない。企業サイトでは何らかの「仕組み」によって、こういった操作を単純化することができるからこそやっているのだろう。「これまでのPNGやJPGをWebPに置き換えてね」という単純な話では無いことは明らかだ。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。