WebPのこと知っていますか？ メディア担当者が理解したいWeb用語
トレンド
WebPをご存じでしょうか？ WebPは、Webに特化した新しい画像フォーマットです。仕様自体は、2010年に公開されていますが、最近対応ブラウザも増え、導入するWebサイトも増えてきました。このタイミングで理解を深め、サイトリニューアル時に採用してみてはいかがでしょうか？
こちらもオススメ
- 不要な通信を削減！ 画像のLazy Load（遅延読み込み）でWebサイトを高速化しよう！
- Webサイトの表示速度を向上！ サムネイルを上手に使ってCV率をアップする
- インパクトで選んでない？アクセス数UPにつながるアイキャッチ画像の選び方
WebPとは？
WebPは、Webに特化した新しい画像フォーマットです。読み方はウェッピーです。初めて耳にする方も多いのではないでしょうか？ WebPは、米Googleが開発しているオープンな静止画フォーマットで、拡張子は「.webp」です。
- Google DevelopersのWebPの紹介ページ：A new image format for the Web
WebPの特長
WebPは、Webでよく利用されるJPEGやPNG、GIFと比較して、より高い圧縮率でデータを軽量化できるのが特長です。
- PNGと比較して、約26%画像データを軽量化
- JPEGと比較して、約25-34%画像データを軽量化
画質を保ったまま、より高い圧縮率で画像データを軽量化することが可能です。
画像データを軽量化するメリット
- ユーザがWebページにアクセスした際のページ読み込みが高速化（「UX/CX：ユーザエクスペリエンス/カスタマーエクスペリアンス」の向上）
- 配信サーバ上の画像データ容量の削減、通信トラフィックの削減（「AWS：Amazon Web Services」等の利用費用削減）
- Google Speed Insightにおけるスコア向上（検索順位に影響する？）
3は、Google Speed Insightsでの『次世代フォーマットでの画像の配信』に関するスコアが向上するという効果です。次世代の画像フォーマットは、WebPやJPEG 2000、JPEG XRがあり、これらを利用することでWebサイトのページ読み込み速度も向上するため、スコアが向上します。WebPを利用することで、Googleの検索順位にどこまで影響があるのかは不確かですが、Webサイト全体の軽量化という意味で今後導入するWebサイトが増えることが予想されます。
ブラウザの対応状況
WebPは新しい画像フォーマットのため、対応可能なブラウザの種類が気になるところです。2019年11月現在、Google Chrome・Mozilla Firefox・Microsoft Edge・Opera等が対応しており、Safari等では対応していません。そのため、Webサイトに導入する場合には、WebP対応ブラウザと非対応ブラウザでの表示の切り分けが必要になってきます。この辺りが、本格的普及の足かせになっています。今後、対応ブラウザが増えることを期待しましょう。
ブラウザの対応状況が気になるが魅力的な技術
今回は、WebPという次世代の画像フォーマットを紹介しました。WebPに対応した変換ツールやプラグインはいくつも存在するので、Webサイトに組み込むこと自体のハードルは低いと考えます。ただし、一部非対応ブラウザも存在するため、WebPを利用する際には、HTMLもしくは、サーバサイドでの表示切り分けの処理を考慮しなければなりません。Webサイト運営者にとっては、Webページの表示速度向上により画像データのトラフィックが減少し、UXの向上とコストダウンにつながる魅力的な技術のため、普及状況を継続的にウォッチしてみてはいかがでしょうか。
こちらもオススメ
