WebPのSEO効果と変換方法、置き換え前後の表示速度の測り方

「画像をWebPにすれば、ページが速くなって検索順位も上がりそう」。PageSpeed Insightsで測ると、画像をWebPやAVIFで配信するよう勧める指摘が出ることがあるため、変換さえ済めばSEOの評価も上がると考えられがちです。

ところが、WebPで縮むのは画像のダウンロードにかかる時間だけです。LCPの要素が文字のページや、画像が届いた後の表示待ちが長いページでは、置き換えてもLCPはほとんど変わりません。WebPの効果は、置き換え前後の表示速度を比べて確かめます。

本記事では、WebPの定義とSEOとの関係、メリットとデメリット、変換方法から置き換え前後の表示速度の測り方まで、SEO対策を手がける会社の視点で順を追ってお伝えします。

この記事でわかること

WebPは可逆圧縮と非可逆圧縮の両方に対応した画像形式で、主要なブラウザが表示できる
Googleが順位で考慮するのはCore Web Vitalsなどで、WebPはLCPを縮めた分だけ評価に関わる
WebPで縮むのはLCPの内訳のうちリソースの読み込み時間だけで、LCPの要素が画像のページから置き換えると効果が出やすい
変換はSquooshで1枚ずつ、cwebpでまとめて行え、置き換えでは古いブラウザへの代替画像と画像のURLの変化に気を付ける
置き換え前後は同じURLを同じ条件で測り、実際のユーザーの値は置き換えから28日後に比べる

WebPとは

WebPは、Webの画像向けに可逆圧縮と非可逆圧縮の両方を備えた画像形式で、Googleが仕様と変換ツールを公開しています。拡張子は「.webp」です。

写真のように多少の劣化を許せる画像は非可逆圧縮、ロゴのように細部を残したい画像は可逆圧縮と、1つの形式で使い分けられます。WebPは透過とアニメーションにも対応しているため、JPEG・PNG・GIFで分けていた画像を、WebPで置き換えられます。

JPEGやPNGとの細かな違いと、保存した画像が.webpになったときの開き方は、WebPとは？JPEG・PNGとの違いや開き方、変換方法を解説で扱っています。

※ 出典：Google for Developers「WebP」

WebPとSEOの関係

WebPは、画像を軽くしてLCPを縮めたときに、ページエクスペリエンスの評価を通じてSEOに関わります。WebPという形式そのものが、順位を上げるわけではありません。

検索順位への効き方

Googleは、Core Web Vitalsを、ほかのページエクスペリエンスの要素とともにコアランキングシステムが考慮する要素としています。Core Web Vitalsのうち画像の軽さが関わるのは読み込みの速さを測るLCPで、ページの読み込み開始から2.5秒以内が良好の目安です。

一方でGoogleは、ページエクスペリエンスに単一のシグナルは無く、Search Consoleのレポートで良い結果が出ても上位表示は保証されないと書いています。Google検索は、ページエクスペリエンスが平均を下回るページも含め、最も関連性の高いページを表示するように作られています。検索語句に合う中身が無ければ、順位は上がりません。

※ 出典：Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」

※ 出典：Google 検索セントラル「ページエクスペリエンスが Google 検索の検索結果に与える影響について」

画像検索での扱い

Google検索は、img要素のsrc属性で参照された画像を画像検索の対象にしています。JPEGやPNGに加え、WebPとAVIFを含む主要な形式が対象です。

見落とされがちなのが、CSSの背景に指定した画像です。GoogleはCSSの画像をインデックスに登録しないため、画像検索に出したい画像は、形式にかかわらずimg要素で置きます。Googleは、ファイル名の拡張子を実際の形式に合わせることも勧めています。

Web担当者

サイトの画像をすべてWebPに変えれば、検索順位は上がりますか？

Writers-hub
編集部

画像が軽くなる分、表示は速くなりやすいです。ただ、Googleが評価に使うのは画像の形式ではなく、実際のユーザーが体験した読み込みの速さです。まずLCPの要素が画像になっているページから置き換え、前後の値を比べてください。

※ 出典：Google 検索セントラル「Google 画像検索のベストプラクティス」

WebPのメリットとデメリット

WebPのメリットは、JPEGやPNGより小さいファイルで同じ画質を保てることと、透過やアニメーションを1つの形式で扱えることです。デメリットは、古い環境への備えと、置き換えの作業が要ることです。

WebPのメリット

PNGより小さい可逆圧縮
JPEGより小さい非可逆圧縮
透過とアニメーションへの対応
主要なブラウザでの表示

WebPのデメリット

macOS版の古いSafariでの非対応
変換と画像の差し替えの手間
非可逆圧縮による画質の低下

Googleの資料では、WebPの可逆圧縮の画像はPNGより26%小さく、非可逆圧縮の画像はSSIMという画質の指標が同じJPEGより25〜34%小さいとされています。透過を含む画像を非可逆圧縮にすると、ファイルは通常PNGの3分の1ほどになります。

2026年10月時点のCan I useの集計では、世界の利用者の約97%が使うブラウザがWebPに対応しています。ただし、macOS版のSafariでWebPを表示するには、Safari 14以降とmacOS Big Sur以降の両方が必要です。

非可逆圧縮は、画質の値を下げるほどファイルが小さくなり、画質も下がります。変換したWebPから元の画質には戻せないので、元の画像は消さずに残しておきます。

※ 出典：Google for Developers「WebP」

※ 出典：Can I use「WebP image format」

※ 出典：MDN「画像ファイルの種類と形式ガイド」

関連記事：h1タグとは？SEO効果と複数使用や画像設定の判断基準を解説

WebPで縮むLCPの内訳

WebPで縮むのは、LCPを4つに分けた内訳のうち、リソースの読み込み時間だけです。web.devは、LCPの時間を次の4つに重なりなく分けられると説明しています。

LCPの内訳	中身	WebPで縮むか
TTFB	ページを開いてからHTMLの最初の1バイトが届くまで	縮まない
リソース読み込みの遅延	TTFBの後、LCPの画像を読み込み始めるまで	縮まない
リソースの読み込み時間	LCPの画像そのものの読み込み	画像が軽くなった分だけ縮む
要素のレンダリングの遅延	画像の読み込み後、LCPの要素の表示が終わるまで	縮まない

web.devには、画像を圧縮したりWebPやAVIFに変えたりして読み込み時間を縮めても、LCPが改善しない例が載っています。縮めた時間が、そのまま要素のレンダリングの遅延に回るためです。

LCPの要素がシステムフォントで表示する文字のページでは、画像を読み込む区間がそもそも0です。WebPの効果が出るのは、LCPの要素が画像のページです。

※ 出典：web.dev「Largest Contentful Paint を最適化する」

※ 出典：Chrome for Developers「LCP の内訳」

置き換えを優先するページ

WebPへの置き換えを優先するのは、PageSpeed Insightsで次の3つがすべて当てはまるページです。

「LCP の内訳」で、LCPの要素が画像になっている
4つの区間のうち、リソースの読み込み時間が最も長い
「画像配信を改善する」に、LCPの画像が挙がっている

「画像配信を改善する」は、形式や圧縮、表示サイズに対して大きすぎる画像を、推定の削減量とともに挙げる項目です。以前のPageSpeed Insightsで画像の形式を指摘していた監査は、2025年10月公開のLighthouse 13で、この項目にまとめられました。

反対に、リソース読み込みの遅延や要素のレンダリングの遅延が長いページでは、WebPより先に遅延の原因を直します。Chromeのドキュメントも、LCPを縮めるには、特に遅延の区間を短くすることが重要だとしています。

※ 出典：Chrome for Developers「画像配信を改善する」

※ 出典：Chrome for Developers「Lighthouse 13.0 のリリース」

※ 出典：Chrome for Developers「LCP の内訳」

画像を軽くする前に、遅さの原因を特定しませんか

LCPの内訳を見て遅延の区間が長いと分かっても、表示速度とページの中身のどちらから直すかは、検索での見え方と合わせて決める必要があります。Writers-hubの滋賀のSEO対策では、1か月目に現状の分析と設計を行い、2か月目から実行に移ります。オンラインで全国に対応しています。

SEOの現状分析について相談する

画像をWebPに変換する3つの方法

画像をWebPに変換する方法は次の3つで、変換する枚数と使っているCMSで選びます。

方法	向いている場面
Squoosh	数枚の画像を、画質を見比べながら変換する
cwebp	フォルダの中の画像をまとめて変換する
WordPress	変換したWebPを、記事やページにそのまま使う

Squoosh

Squooshは、GoogleChromeLabsが公開している、ブラウザで画像を圧縮するWebアプリです。squoosh.appを開いて画像をドロップするか貼り付け、出力の形式にWebPを選んで画質を調整し、保存します。

変換前後の画像を並べて見比べられるので、画質を下げすぎていないかをその場で確かめられます。画像はサーバーに送られず、使っている端末の中で処理されます。

cwebp

cwebpは、Googleが配布するWebPのツール群に含まれる変換用のコマンドで、Linux、Windows、macOS向けのビルド済みのファイルが配られています。基本の書き方は次のとおりです。

BASH

cwebp -q 80 photo.jpg -o photo.webp

-qは0〜100で指定する画質の値で、指定しなければ75です。ロゴのように劣化させたくない画像には、-losslessを付けて可逆圧縮にします。フォルダの画像をまとめて変換するときは、web.devが示す次の書き方を使えます。

BASH

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

WordPress

WordPressは5.8から、WebPの画像をJPEGやPNGと同じようにアップロードして使えるようになりました。ただし、サーバーの画像処理ライブラリであるImagickかGDがWebPに対応していないと、アップロードの時点でエラーになります。

アップロード済みのJPEGをWebPに置き換えるときは、SquooshやcwebpでWebPに変換してからアップロードし直し、記事の画像を差し替えます。

※ 出典：Squoosh（GitHub）

※ 出典：Google for Developers「cwebp」

※ 出典：web.dev「WebP 画像を使用する」

※ 出典：Make WordPress Core「WordPress 5.8 adds WebP support」

WebPに置き換えるときの2つの注意点

WebPに置き換えるときに気を付けるのは、古いブラウザへの代替画像と、画像のURLが変わることの2つです。

古いブラウザ向けの代替画像の用意

WebPを表示できないブラウザからの訪問が残るサイトでは、picture要素でWebPとJPEGを並べて書きます。ブラウザは、対応している形式のうち最初に書かれたsourceを使います。

HTML

<picture>
  <source type="image/webp" srcset="flower.webp">
  <img src="flower.jpg" alt="赤い花の写真" width="800" height="600">
</picture>

Googleは、picture要素やsrcset属性を理解できないブラウザやクローラーもあるとして、img要素のsrc属性に代替のURLを必ず書くよう勧めています。上の書き方なら、WebPを表示できない環境ではimg要素のJPEGが表示されます。

picture要素で、ブラウザがWebPかJPEGのどちらかを選んで表示する流れの図

代替画像を省いてimg要素に直接WebPを書くかは、アクセス解析で、macOS版のSafari 13以前のような古い環境からの訪問がどれだけ残っているかで決めます。

画像のURLの変化への対応

JPEGをWebPに変えると拡張子が変わり、画像のURLも変わります。Googleは、大きなサイトで同じ画像を複数のページに使うときは、Googleが画像をキャッシュに保存して再利用できるよう、どのページからも同じURLで参照するよう勧めています。

画像検索からの訪問があるかは、Search Consoleの検索パフォーマンスのレポートで、検索タイプを「画像」に切り替えると確かめられます。訪問がある画像は、古い画像のURLから新しいURLへ301リダイレクトを設定します。Googleのサイト移転のガイドも、画像のURLをほかのページと同じように移すよう求めています。

※ 出典：web.dev「WebP 画像を使用する」

※ 出典：Google 検索セントラル「Google 画像検索のベストプラクティス」

※ 出典：Google 検索セントラル「URL の変更を伴うサイト移転」

※ 出典：Search Console ヘルプ「検索パフォーマンスレポート」

置き換え前後の表示速度の測り方

WebPに置き換えた効果は、置き換えた直後に測るラボの値と、実際のユーザーの値が置き換え後のアクセスの値に入れ替わる28日後の値の、2段階で確かめます。ラボの値は決まった端末と回線で読み込みを再現した値で、すぐに比べられます。

比べる手順は、次の5つです。

STEP

測るページの選定

置き換えを優先すると決めたページから、トップページ、記事、商品やサービスのページのように作りの違うページを、種類ごとに1〜2ページ選びます。Search ConsoleのCore Web Vitalsレポートは似たページをURLグループにまとめて表示するので、グループごとに1つ選ぶと、後でレポートと見比べられます。

STEP

置き換え前の値の記録

PageSpeed Insightsでモバイルの結果を開き、LCPと「LCP の内訳」の4つの区間を書き留めます。ラボの値はページを変えなくても実行ごとに変わるため、3回ほど測って真ん中の値を残します。上部の実際のユーザーのデータにある、過去28日間のLCPも控えておきます。

STEP

画像の転送量の記録

Chromeのデベロッパーツールのネットワークパネルで「キャッシュを無効にする」をオンにし、フィルタの「Img」で画像だけを表示して再読み込みします。Size列は、レスポンスのヘッダーと本文を合わせた転送量です。LCPの画像の行の値を控えておくと、置き換えで何KB減ったかを比べられます。

STEP

置き換え後の測定

置き換えたら、同じページで同じ手順を繰り返します。ネットワークパネルのType列には画像の種類が表示されるので、webpと出ていればWebPが届いています。古い画像がキャッシュから表示されないよう、「キャッシュを無効にする」はオンのまま測ります。

STEP

28日後の比較

実際のユーザーのデータは過去28日間の値なので、置き換えから28日たつと、すべて置き換え後のアクセスの値になります。Search ConsoleのCore Web VitalsレポートでLCPの問題が出ていた場合は、置き換えた後に問題の詳細ページで「トラッキングを開始」を押すと、28日間のモニタリングで問題が解消したかが判定されます。

置き換えてもLCPが縮まないときは、LCPの内訳を置き換え前と見比べます。リソースの読み込み時間が縮み、その分だけ要素のレンダリングの遅延が伸びていれば、次に直すのはレンダリングを遅らせている原因です。

※ 出典：PageSpeed Insights「PageSpeed Insights について」

※ 出典：Search Console ヘルプ「Core Web Vitals レポート」

※ 出典：Chrome for Developers「ネットワーク機能のリファレンス」

WebPのよくある質問

WebPへの置き換えでよくある3つの質問に答えます。

AVIFとWebPはどちらを使う？

AVIFもWebPと同じくGoogle検索の対応形式で、Chromeのドキュメントでは、同じ画質の設定ならほかの形式よりファイルが小さくなるとされています。一方で、macOS版のSafariはWebPには14から対応していますが、Can I useの集計では、AVIFに完全に対応したのは16.4からです。

古いSafariからの訪問が残るサイトや、使っているCMSや変換ツールがAVIFを書き出せないサイトでは、WebPを選びます。

PageSpeedのスコアは上がる？

PageSpeed Insightsのスコアが上がるのは、WebPへの置き換えでLCPなどの指標の値が良くなったときです。Lighthouse 13の発表では、パフォーマンスのスコアは指標の値から計算され、「画像配信を改善する」のような項目はスコアに数えないと説明されています。スコアより、LCPの値が縮んだかを見ます。