More than 5 years have passed since last update.

WebPに関する10の誤解〜5分で学ぶWebP

Last updated at 2019-02-24Posted at 2019-02-10

「WebPって聞いたことはあるけど…」という方に向けてまとめてみました！

1. ウェブピーと読む → ✖️

標準的な発音は**ウェッピー (Weppy)**とされています。

BSDライセンスに基づくオープンソースプロジェクトです。
https://github.com/webmproject/libwebp

2018年の後半から2019年にかけてMicrosoft EdgeとFirefoxが新たに対応しました。

Androidももちろん対応済みです。4.2からの正式対応なので、いま出回っている端末はほぼすべてWebPを表示できます。

あとはSafari(iPhone含む)のみ対応待ちという状況です。
ちなみにIEは非対応で、Operaは以前から対応しています。

**世界的には約72%**のユーザーがWebPを閲覧できるとされています(2019年2月現在)。
一方、**日本国内では約35%**に留まっています。これは日本でのiPhoneシェアの高さによるものです。

https://caniuse.com/#feat=webp

ウェブサイト側として楽天市場やGAP、ディノスでWebPの利用が見られます。
まだ対応の必要なしと思うか、A/Bテストのチャンスと思うかはあなた次第！

WebP対応と検索順位との関係はわかりませんが、PageSpeed Insightsのスコアが高い確率で上がります。
自社のサイトは上がりました。

これはPageSpeed insightsの内部ロジックであるLighthouseにの**次世代画像フォーマットへの対応(Serve images in next-gen formats)**という監査項目があるためです。

例えばWebP対応済みのGAPはこの項目に合格しており、非対応のUNIQLOでは指摘を受けています。

ロスレス(可逆)圧縮モードがあり、PNGとGIFの代わりに利用することもできます。
256色のインデックスカラーやアルファチャンネル、アニメーションもサポートしているため、主流のWeb画像はすべてWebPに置き換え可能です。

PNGやGIFと比べても高い圧縮性能を持っています。

Webページ上の画像をWebPに変換するとどうなるか、拙作のシミュレータがあるのでお試しください。
ファイルサイズが半分以下になるケースも多いです。

圧縮性能はJpegより高いのですが、表現力には弱点もあります。

個人的に苦手な表現の例も見つけました。

Web以外にも広く使われているJpegに対し、Webでの配信に特化して軽量化されたフォーマットという理解がしっくりきます。
PNGとGIFのロスレス変換では、表現上の弱点はないという認識です。

従来のJpeg、PNG、GIFを基本的には用意しつつ、それらを対応ブラウザにはWebPで配信するプログレッシブ・エンハンスメントが可能です。

HTML5のコーディングや、Webサーバーの設定で対応ブラウザと非対応ブラウザへの正確な出し分けができます。
HTML5ではpictureタグ、Webサーバーの設定ではリクエストヘッダAcceptを利用します。

オープンソースのcwebpコマンドを使えば、お使いのPCやWebサーバー上でWebPへの変換を行うことができます。
WordPress向けのEWWW Image Optimizerのような無料プラグインもあります。

ApacheやNginxも簡単な設定でWebPの出し分けが可能です。

WebPファイルを手作業で作成するのはあまり現実的ではありません。
CDNの画像プロキシ、アセットパイプライン、バッチ処理、CMSのプラグインなどで自動変換することを強くお勧めします。

picture要素を手書きすることになったらそれは手間かもしれません。CMSなどで自動化しましょう。

以上です。

WebP対応は意外と簡単で安全、自動化して手離れがよく、着実な成果を期待できます。
ぜひ使ってみましょう！