新人にもわかる!WebPのブラウザ振り分けの仕組みを図解。新人にもわかる!WebPのブラウザ振り分けの仕組みを図解。18:15新人にもわかる!WebPのブラウザ振り分けの仕組みを図解。みなさんが初出社を迎えた会社も多いでしょう。今日はWebP対応/非対応ブラウザに向けた適切な振り分けについて、新人さん(...が今WebPなどを使うかどうかは置いといて...)にもわかりやすく解説します。過渡期のWebPはブラウザ振り分けが必須2019年4月現在、WebPに非対応のブラウザもまだまだ多いので、WebPを使う場合はブラウザの種類やバージョンによる振り分けが必要です。ひとつの画像について、WebPに対応したブラウザでは軽いWebPフォーマットで、対応していないブラウザでは従来のJpegやPNGフォーマットで表示する仕組みを用意しなければなりません。振り分けの方法には、ブラウザ側(HTML)で行う方法と、Webサーバー側で行う方法があります。結論「理由がなければWebサーバーで振り分けをおすすめ」Webサーバー上で振り分けしましょう。その方が安全で楽ちんです。HTMLでの振り分けは(手作業では)かなり無理ゲーだと思います。ブラウザ上(HTML)での振り分けHTMLでは次のようにpicture要素、source要素で「ひとつの画像について選べるふたつのフォーマット」を指定します。元の画像がsample.png、そのWebP版がsample.png.webpです。/></picture>WebPに対応したブラウザは、「sample.pngではなくもっと軽いsample.png.webpがあるんだな。それを使おう」と判断します。非対応のブラウザはimage/webpを知らないので、最後の手段であるimg要素が指すsample.pngを表示します。図に表すと次の通りです。拡張子がふたつ続いても大丈夫なの?sample.png.webpという名称が気になった方がいるかもしれません。この記法は確かに珍しいものではありますが、利用上はまったく問題ありません。sample.pngでないの?sample.pngのWebP版をsample.webpとして記述する例も見かけます。私はsample.png.webpとオリジナル画像の拡張子に更に追加.webpを重ねることをおすすめします。将来もしWebPが主流になったときには、オリジナル画像をWebPとして作ることになるでしょう。そのとき、次のように区別が付きやすくなります。sample.png.webpはsample.pngを元に作られたコピーのWebPファイルsample.webpは元々WebPとして作られた画像ファイルもう一点、Webサーバー上で振り分け設定を行う場合にも拡張子を重ねた方が記述がスッキリする利点があります。Webサーバー上での振り分けブラウザは、サーバーにデータをリクエストするとき、ユーザーには見えないリクエストヘッダーという情報を付加しています。有名なのはUser-Agentです。ブラウザやOS、バージョンごとに固有な情報となっているので、ユーザーの環境を判断するためによく用いられます。Safari/537.36このUser-Agentと同様にAcceptというリクエストヘッダーも、裏でブラウザからサーバーに渡されています。Acceptは、対応するデータフォーマットをサーバーに知らせる役割を持ちます。これがWebP対応ブラウザを判定する鍵となります。Edgeは現在のところ例外...)。sample.pngというファイルを要求されたとき、相手がWebP対応ブラウザであればこっそりその中身をWebPに差し替えてしまえばよいのです。これを図にすると次の通りです。拡張子.pngでWebPを返していいの?これも気持ち悪いかもしれませんが、実際はまったく支障ありません。Webサーバーは、これもユーザーの目に見えないHTTPレスポンスヘッダーを使ってそのファイルがどんなファイルフォーマットになっているか返しています(Content-Type)。image/jpegしかし実際のところは、画像データはこのContent-Typeも無視して実際のファイルのフォーマットで判断されます。拡張子、Content-Type、実際のデータフォーマットが「ちぐはぐ」でもブラウザはちゃんと表示します。これについては実際に検証した結果があります。具体的にはどのように設定するのかApacheであれば.htaccessファイルで簡単にできます。nginxはもっと簡単です。具体的な方法はここでは割愛します。次の記事を参考ください。Insightsスコアを今すぐ改善するチュートリアル.htaccessによるWebPの選択的レスポンスとその問題点と改善案nginxにおけるWebP画像の選択的レスポンスの設定方法CloudFrontにおけるWebPの選択的レスポンス結局どっちがいいの?冒頭で結論を述べましたが、多くのWeb制作の現場にとっては、Webサーバー側での振り分けが現実的です。タスクランナーやアセットパイプラインをしっかり導入・運用できているような技術的に高度なチームでなければ、ブラウザ側(HTML)での対応はおすすめしません。手軽さは?確かにブラウザ側(HTML)での振り分けは手軽です。Webサーバー側の設定変更は慣れた人でなければ少し気後れするでしょう。作業量は?ブラウザ側(HTML)での振り分けは、WebP対応する画像についてひとつずつ、picture要素に置き換える必要があります。これは数が多いと大変で、間違いも出やすくなります。Webサーバー側での振り分けは、ほとんどの場合、一箇所の修正のみで完了します。全体としては圧倒的に手間が少ないと言えます。表現力は?WebP対応という点についてはどちらも同じですが、ブラウザ側(HTML)での振り分け方法は、高解像度Retinaディスプレイへの最適化やアートディレクションにも拡張できます。picture要素、source要素は手軽であると同時に、玄人向けのアプローチです。CSS背景は?HTMLでimg要素が参照する画像を振り分ける方法はありますが、CSSで背景画像などとして参照する画像を振り分ける合理的な方法は現在のところありません。Webサーバー側での振り分けであれば、img要素だろうと背景画像だろうと、WebPを適切に振り分けます。/></picture>存在しない場合は代わりにsample.pngを読み込んで欲しいところですが、あいにく画像のリンク切れとなってしまいます(Chrome、Firefoxで確認)。Webサーバー側での振り分けであれば、sample.png.webpというファイルがない場合はsample.pngを返すことができるので画像リンク切れにはなりません。万が一に備えたフォールバックが機能するので安全です。WebP対応において、ファイル変換処理と同じくらい大事な振り分け処理。判断基準のひとつになれば幸いです。プログラマーの宮永です。趣味は投資と打撃系格闘技とドローンとブロックチェーンです。12.1でも残念ながらWebPサポートなし。12.1でも残念ながらWebPサポートなし。12.1でも残念ながらWebPサポートなし。ついでに見出しを斜め読み新人にもわかる!WebPのブラウザ振り分けの仕組みを図解。Insignts/表示高速化5スマホ表示高速化73画像最適化132WebP23WebP利用事例6Lighthouse19プロダクトLightFile104Ranklet18MTプラグイン4事例紹介5調査データランキングツール14技術系小ネタ1会社2広報27イベント14セミナーその他5月別アーカイブ2020年1月12019年11月22019年10月42019年9月12019年8月22019年7月22019年6月12019年5月22019年4月62019年3月102019年2月152019年1月52018年12月72018年11月72018年10月132018年9月132018年8月212018年7月162018年6月192018年5月152018年4月142018年3月102018年2月142018年1月92017年12月92017年11月142017年10月32017年8月52017年7月1運営会社についてアイデアマンズは、インターネット技術でオドロキを!提供することを目指しています。