こんにちは、ツバサです。
自社ECサイトをPageSpeed Insightsでチェックしたら「次世代フォーマットで画像を配信してください」と指摘された。さらにWeb制作会社からも「商品画像はWebPにしましょう」と提案されたのだけど、WebPって何なのかよくわかっていなかったので調べてみた。
WebPとは
ひとことで言うと、Googleが開発したWeb向けの画像フォーマットだ。読み方は「ウェッピー」。JPEGやPNGの代わりに使うことで、ページの表示速度を改善できる。
Google Developersの公式ページによると、WebPは2010年にリリースされた。JPEGと同等の画質でファイルサイズが25〜35%小さくなるのが最大の特徴だ。
JPEGにはできない「透過」（背景を透明にする）にも対応しているので、PNGの代わりとしても使える。さらにGIFのようなアニメーションにも対応していて、要はJPEG・PNG・GIFの機能を1つにまとめたような形式だと理解した。
LandingHubの比較記事でも他のフォーマットとの違いがわかりやすく整理されていた。整理するとこうなる。
| 項目 | JPEG | PNG | WebP |
|---|---|---|---|
| ファイルサイズ | 基準 | JPEGより大きい | JPEGより25〜35%小さい |
| 透過（背景透明） | 不可 | 対応 | 対応 |
| アニメーション | 不可 | 不可 | 対応 |
| 圧縮方式 | 非可逆のみ | 可逆のみ | 非可逆・可逆どちらも |
| ブラウザ対応 | 全対応 | 全対応 | 主要ブラウザ全対応 |
非可逆圧縮と可逆圧縮の違いについては非可逆圧縮・可逆圧縮のページにまとめてある。
EC実務で出てくる場面
EC担当をしていると、WebPに触れる機会が増えてきた。僕が実際に遭遇した場面を書いておく。
PageSpeed Insightsの指摘
GoogleのPageSpeed Insightsでサイトの表示速度をチェックすると、JPEG画像を使っているページで「次世代フォーマットで画像を配信してください」という指摘が出ることがある。ここで言う「次世代フォーマット」がWebPやAVIFのことだ。
DSマガジンのWebP解説記事にも書いてあったが、Googleは表示速度をSEOの評価指標に含めているので、ECサイトにとっては無視できない指摘になる。
CDNやプラットフォームの自動変換
ShopifyやCloudflareなどのサービスを使っている場合、JPEG画像をアップロードすると自動的にWebPに変換して配信してくれることがある。この場合、サイト運営者が意識しなくてもWebP配信が行われている。競合サイトの商品画像を右クリックで保存しようとしたら.webp形式だった、ということが最近増えたのはこれが理由だ。
Web制作会社からの提案
自社ECサイトのリニューアル時に、制作会社から「商品画像はWebPで配信しましょう」と提案されるケースも多い。PLAN-BのSEO記事にもWebPの対応状況が詳しく書かれていたが、2024年以降は主要ブラウザがすべて対応済みなので、導入のハードルはかなり下がっている。
覚えておきたいポイント
元画像はJPEGやPNGで保管しておく
WebPはあくまでWeb配信用のフォーマットだ。撮影した元データや編集用のデータは、JPEGやPNG、PSDなど従来の形式で保管しておくのが安全。WebPから他の形式に再変換すると画質が劣化する可能性がある。画像の圧縮や最適化については商品画像の圧縮・軽量化ガイドにまとめた。
変換は意外と簡単
Googleが無料で提供しているSquooshというツールを使えば、ブラウザ上でJPEGをWebPに変換できる。画質とファイルサイズをスライダーで比較しながら調整できるので、初心者でも使いやすい。大量に変換したい場合はコマンドラインのcwebpツール（Google公式）を使うこともできる。
AVIFという選択肢も出てきている
WebPよりさらにファイルサイズが小さいAVIFという次世代フォーマットも登場している。DAD UNIONの比較記事によると、同じ画質ならAVIFのほうがWebPよりファイルが小さくなるケースが多い。ただしAVIFはエンコード（変換処理）に時間がかかるという弱点がある。現時点ではWebPが無難な選択で、余裕があればAVIFも検討する、という順番でよさそうだ。
