WebP形式とは？SEO効果を高める画像最適化の仕組みと導入メリット

WebP... 最近よく聞く。Googleが作った、ウェブ向けの画像フォーマット。表示が速くなるから、SEOにも良い、と。でも、本当のところはどうなんだろう。ただ変換すればいい、ってものでもないはず。

今日はそのあたりを、ちょっと整理してみる。自分用のメモに近いかもしれない。

まず結論から言うと

WebPは、SEOに「間接的に」効く。これが今のところの感触。直接、順位が上がる魔法じゃない。

要するに、こういうこと。

WebPは画像が軽い。JPEGに比べて25～34%くらい軽くなるらしい。
軽いと、ページの表示が速くなる。特にスマホ。
表示が速いサイトは、ユーザーが離脱しにくい。体験が良い。
Googleは、ユーザー体験が良いサイトを評価する。 Core Web Vitalsとか、そういう話。

だから、結果的にSEOにプラスに働く。でも、導入の手間とか、いくつか考えないといけない点もある。そこが大事。

じゃあ、どうやって導入するのか

やり方はいくつかある。単純に画像を変換するだけじゃ、古いブラウザで表示されない問題があった。今はもう、ほとんどのブラウザが対応してるけど。 2024年時点で、全体の97%が対応済み、みたいなデータもある。

それでも、念のため、非対応ブラウザへの配慮は必要。その方法としては...

変換ツールを使う。 Google自身が「Squoosh」っていうWebツールを出してる。画像をドラッグ＆ドロップして、画質を調整して、ダウンロード。簡単。
WordPressなら、プラグインがある。 アップロードした画像を自動でWebPに変換してくれるやつ。これが一番楽かもしれない。いちいち手作業しなくていいから。
HTMLで書き分ける。 タグを使うのが今の主流。こんな感じのコードになる。
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="代替テキスト">
</picture>
```
この書き方なら、WebP対応ブラウザはWebPを、非対応ブラウザはJPEGを読んでくれる。これが一番丁寧な方法。

日本のサイトだと、まだ古い環境をサポートしてる会社もあるから、このタグの対応は意外と大事。Googleの公式ドキュメントは「もうほとんど対応してるよ」というスタンスだけど、実際の現場、特にPowerCMSみたいな特定のCMSを使っている環境では、専用の変換タグがあったりする。この辺の温度差は、グローバルな情報だけ見てると見落としがち。

知っておくべきデメリットとか、注意点

良いことばかりじゃない。少し立ち止まって考えるべき点。

変換の手間。 結局、これが一番大きい。既存の画像を全部WebPにするのは、かなりの作業。自動化の仕組みがないと、現実的じゃない。
画質は本当に同じか？ 「画質を保ったまま」ってよく言うけど、非可逆圧縮である以上、厳密にはデータは失われてる。写真家とか、デザインにすごくこだわるサイトだと、圧縮率を上げすぎると、違いが気になるかもしれない。この辺は、自分の目で見て判断する必要がある。
画像を保存したいユーザー。 サイト上の画像を右クリックで保存するユーザーもいる。その時、.webpファイルだと、PCの古いビューワーで開けないことがある。これで「うざい」って感じる人もいるらしい。ターゲットユーザーによるけど、一応頭に入れておくべき。

JPEG、PNG、WebP…結局どれがいいの？

まあ、ケースバイケースなんだけど。僕なりの使い分けはこんな感じ。

	JPEG	PNG	WebP
ファイルサイズ	まあまあ。でも高画質にするとすぐ重くなる。	重い。特に写真だとファイルサイズがすごいことに…	軽い。これが最大の取り柄。JPEGより25-34%軽いとか。
背景透過	できない。背景は白か黒か、何か色で埋めるしかない。	これが得意技だった。昔は。	できる。PNGの代わりになれる。
アニメーション	無理。	APNGっていうのもあるけど、主流じゃない。	できる。GIFの代わりにもなる。
個人的な使い方	もうあまり積極的には使わないかな…。過去の遺産。	どうしてもPNGじゃないとダメ、って場面は減った。	基本、これ。写真もロゴも、まずWebPを検討する。
気になる点	とにかく表示速度がボトルネックになりがち。	ファイルサイズ。本当に、すぐ大きくなる。	変換の手間。あとはAVIFっていう、さらに新しいのが出てきてるのが気になる。