画像最適化とは？lazy load（遅延読み込み）とWebPの使い方

この記事の要点：

• 画像最適化は「軽くする（形式・圧縮・サイズ）」「読み込む順番を決める（lazy load・優先度）」「場所を確保する（width・height）」「検索に伝える（img要素・alt）」の4つに分けると、抜けなく進められます。
• lazy load（遅延読み込み）は、画面の外にある画像に loading=”lazy” を付けるのが基本です。最初の画面に見える大きな画像（LCPの候補）には付けません。
• Googleは、クリックやスクロールなどの操作をしないと読み込まれない内容を見落とすことがあると説明しています。画面に入ったら読み込む作りにします。
• Google検索が対応する画像形式は BMP・GIF・JPEG・PNG・WebP・SVG・AVIF です。新しい形式を使うときも、img要素の src で代わりの画像を指定します。
• 効果は、PageSpeed Insights などのラボ値と、実際の利用者のデータ（フィールド値）を分けて確かめます。

画像最適化とは：4つの作業と優先順位

画像最適化とは、画質を保ちながら画像を軽くし、必要な画像から順に読み込ませ、表示の場所を先に確保し、画像の内容を検索エンジンにも伝える一連の作業です。ページの表示速度、見た目の安定、画像検索での見つけやすさに関わります。

作業は次の4つに分けられます。どれか1つだけでは足りず、例えば画像を軽くしても、最初に見える画像を遅延読み込みにすると表示はかえって遅くなります。

どこから手を付けるか迷ったら、次の順で確かめると、効果の大きい作業から進められます。

1. 最初の画面で一番大きく表示される画像（LCPの候補）を特定し、遅延読み込みになっていないか確かめる。
2. その画像が、表示サイズより極端に大きくないか、重い形式のままでないかを確かめる。
3. すべての img に width と height があるかを確かめる。
4. 画面の下の方にある画像に loading=”lazy” を付ける。
5. 検索で見つけてほしい画像に alt を書き、img要素で置かれているかを確かめる。

lazy load（遅延読み込み）とは：仕組みとメリット・デメリット

lazy load（レイジーロード、遅延読み込み）とは、ページを開いた時点ではすぐに必要のない画像の読み込みを後回しにし、利用者がその位置に近づいたときに読み込む仕組みです。今はHTMLの loading 属性で、ブラウザに任せる形で使えます。

ブラウザは、画像がまだ画面から離れているうちは読み込みを待ち、スクロールで近づくと読み込みを始めます。どのくらい手前で読み込み始めるかはブラウザが決めるため、ページ側で細かく指定するものではありません。

メリット

• 最初の表示に通信を集中できる：画面の外の画像を後回しにすると、最初に見える部分の読み込みが他の画像と通信を取り合いにくくなります。
• 通信量を節約できる：ページの最後まで読まずに離れた人は、下の方の画像を読み込まずに済みます。モバイル回線の利用者に向いています。
• サーバーの負担を減らせる：読まれない画像の配信が減ります。

デメリットと注意点

• 最初に見える画像に付けると遅くなる：ブラウザは、画像が画面内にあると分かるまで読み込みを待つため、主役の画像の表示が遅れます。
• 速くスクロールすると一瞬空白が見える：読み込みが追いつかないと、画像の場所が空いて見えることがあります。width と height で場所を確保しておくと、ずれは起きにくくなります。
• 作り方によっては検索エンジンに見落とされる：スクロールやクリックをきっかけに読み込むJavaScriptの作りだと、Googleが画像を見つけられないことがあります。

つまり、lazy loadは「付けるほど速くなる」ものではなく、「どの画像に付けるか」を決めて初めて効果が出る仕組みです。

どの画像に lazy load を付けるか：判断の表

判断の基準は「その画像が、ページを開いた直後の画面（スクロール前の範囲）に入るかどうか」です。web.dev（Chromeチームの解説サイト）は、LCPの画像を遅延読み込みにしないこと、最初の画面に入りそうな画像には loading=”lazy” を付けないことを勧めています。

同じ画像でも、パソコンでは最初の画面に入り、スマートフォンでは入らないことがあります。迷ったときは、スマートフォンの縦画面でページを開き、スクロールせずに見える範囲を基準にします。Googleは主にスマートフォン版のページを使って評価するため（モバイルファーストインデックス）、スマートフォンの表示を優先して決めるのが現実的です。

fetchpriority で主役の画像を先に読み込ませる

fetchpriority 属性は、ブラウザに読み込みの優先度を伝える属性です。loading 属性は「読み込みを後回しにするか」を決めるもので、優先度そのものは変えません。web.devは、LCPになりそうな画像に fetchpriority=”high” を付けることを勧める一方、多くの画像に high を付けると効果がなくなると注意しています。high は、ページに1〜2枚までにとどめます。

<!-- 最初の画面の主役の画像：遅延読み込みにせず、優先度を上げる -->
<img src="hero-800.webp" width="800" height="450"
  fetchpriority="high" alt="例：手入れ中のコーヒーメーカー">

<!-- 本文の下の方の画像：遅延読み込み -->
<img src="step3-800.webp" width="800" height="600"
  loading="lazy" alt="例：フィルターを外す手順">

lazy load の実装方法と、検索エンジンに見落とされない書き方

実装の方法は大きく3つです。新しく作るなら、まずブラウザの標準機能（loading 属性）を検討します。

WordPress の場合

WordPressは画像に loading=”lazy” を自動で付けます。WordPress 6.3では、LCPになりそうな画像に fetchpriority=”high” を自動で付け、ページ上部の画像からは loading=”lazy” を外す改善が入りました（WordPressの開発者向けの告知による）。ただし、テーマの作りによっては判定が外れることもあるため、プラグインを追加する前に、ページのHTMLで実際に付いている属性を確かめます。同じ働きのプラグインを重ねると、二重に処理されることもあります。WordPress でプラグインを 1 つずつ止めて原因を確かめる方法は「WordPressの表示速度の記事」にまとめています。

Googleに画像を見つけてもらうための条件

Google 検索セントラルの「遅延読み込みされたコンテンツの修正」では、次の点が説明されています。

• 内容は、画面（ビューポート）に表示されたときに読み込むようにする。方法として、ブラウザ標準の遅延読み込み、IntersectionObserver、画面に入ったら読み込むJavaScriptライブラリが挙げられています。
• Googlebotはクリックやスワイプなどの操作をしないため、操作をきっかけに主要な内容を読み込む作りは避ける。

また、画像SEOのガイドでは、Googleは img要素の src 属性の画像を見つけ、CSSの背景画像はインデックスに登録しないと説明しています。古いJavaScriptライブラリには、本当の画像のURLを data-src などの別の属性に入れ、src を空や仮の画像にしておく作りがあります。この場合、検索で見つけてほしい画像は、読み込み後の src に本当のURLが入ることを確かめます。

確かめ方の例として、Search Consoleの URL 検査ツールで公開URLをテストし、レンダリング後のHTMLに画像のURLが入っているかを見る方法があります。JavaScriptで内容を表示するページ全般の注意点は「JavaScript SEOの基本」で説明しています。

画像形式とファイルサイズ：WebP・AVIF・圧縮・srcset

画像を軽くする作業は、「表示サイズに合わせる」「形式を選ぶ」「圧縮する」の順で進めると、無駄がありません。大きすぎる画像は、形式を変えるより先にサイズを合わせる方が効きます。

形式の選び方

Google検索は、img要素の src で指定された BMP・GIF・JPEG・PNG・WebP・SVG・AVIF の画像に対応しています（Google 検索セントラル「画像 SEO のベスト プラクティス」）。ファイルの拡張子は、実際の形式と合わせます。

どの程度軽くなるかは、画像の内容や圧縮の設定によって異なります。形式を変えたら、変える前と後のファイルサイズを自分のサイトの画像で比べ、見た目に問題がないかも確かめます。

picture要素では複数の形式を用意してブラウザに選ばせ、最後の img の src に代わりの画像を指定します。

<picture>
  <source type="image/avif" srcset="photo-800.avif">
  <source type="image/webp" srcset="photo-800.webp">
  <img src="photo-800.jpg" width="800" height="600"
    loading="lazy" alt="例：分解したコーヒーメーカーの部品">
</picture>

WebPとは：特徴と対応状況

WebP（ウェッピー）とは、Google が開発した Web 向けの画像形式で、写真向けの非可逆圧縮と劣化の無い可逆圧縮の両方に対応し、透過とアニメーションも扱えます。Google の WebP のページは、非可逆の WebP は SSIM という画質の指標で同じ程度の JPEG より 25〜34% 小さいと説明し、Chrome・Safari・Firefox・Edge・Opera が対応しているとしています（2026 年 10 月 14 日に確認）。WordPress はバージョン 5.8 から、サーバーが対応していれば WebP をアップロードして使えます。古いブラウザも考えるなら、picture 要素で JPEG などの代わりの画像を用意します。

端末に合う大きさを選ばせる（srcset と sizes）

srcset は、同じ画像の大きさ違いを並べてブラウザに選ばせる属性で、sizes は「画面上でどの幅で表示するか」を伝える属性です。Googleは、srcset や picture要素を使う場合も、一部のブラウザやクローラーがこれらを理解しないため、src 属性で代わりのURLを必ず指定するよう勧めています。

<img src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="600" loading="lazy"
  alt="例：手入れ中のコーヒーメーカー">

圧縮とファイル名

• 表示サイズに合わせる：例：横幅800pxで表示する場所に、横幅4000pxの写真をそのまま置かない。
• 圧縮する：見た目に差が出にくい範囲で画質の設定を下げ、撮影情報など表示に不要なデータを除く。
• ファイル名を内容が分かる名前にする：例：IMG00023.jpg より coffee-maker-cleaning.jpg。Googleは、ファイル名が画像の内容の手がかりになると説明しています。

width と height でレイアウトのずれを防ぐ

img に width と height が書かれていないと、ブラウザは画像を読み込むまで高さが分からず、読み込みが終わった瞬間に下の文章が押し下げられます。このずれは CLS（Cumulative Layout Shift）という指標で測られます。

width と height に画像の元の縦横の大きさを書くと、ブラウザは縦横の比率から場所を先に確保できます。画面に合わせて画像を伸び縮みさせたい場合も、CSSで幅を指定し高さを自動にすれば、比率は保たれたまま場所が確保されます。

img {
  max-width: 100%;
  height: auto;
}

lazy load と組み合わせるときは特に大切です。遅延読み込みの画像は、スクロールの途中で読み込まれるため、場所が確保されていないと読んでいる文章が急に動きます。

検索で画像を見つけてもらう：img要素・alt・画像サイトマップ

画像検索から訪問してもらいたい画像や、記事の説明に欠かせない画像は、表示を速くするだけでなく、内容を検索エンジンに伝えます。Googleの画像SEOのガイドに沿うと、確認する点は次のとおりです。

alt にはキーワードを詰め込まず、画像を見られない人にも内容が伝わる短い説明を書きます。

JavaScriptで読み込む画像など、ほかの方法では見つけにくい画像は、画像サイトマップで知らせることもできます。Googleは2022年に、画像サイトマップの caption・title・geo_location・license のタグを使わなくなったと告知しています。今の画像サイトマップでは、主に画像のURL（image:loc）を伝えます。

効果の確かめ方：ラボ値とフィールド値を分けて見る

画像を直したら、直す前と後を同じ方法で比べます。表示速度の数字には、測り方の違う2種類があります。

画像に関する指摘は、Lighthouse 13 以降では「Improve image delivery（画像の配信の改善）」という1つの項目にまとめられ、大きすぎる画像、新しい形式への変換、圧縮の余地が示されます（Chrome for Developers の説明による）。それより前の版では「適切なサイズの画像」「次世代フォーマットでの画像の配信」などの別々の項目として表示されます。表示される項目名は、使うツールの版によって異なります。

当サイトでの例

当サイト（seoagent.jp）では、モバイルの Lighthouse の点数が 85、LCP が 4.1 秒でした。モバイルではヒーロー画像を読み込まないようにし、800px 幅の画像を追加し、画像のキャッシュ期間を延ばしたところ、Lighthouse のモバイルの点数は 100（LCP 約 1.5 秒）になりました。いずれも Lighthouse のラボ値で、実際の利用者のデータや検索順位の変化を示すものではありません。

この例のように、「最初の画面の画像をどう扱うか」と「表示サイズに合った画像を用意するか」は、ラボ値に表れやすい作業です。一方で、検索順位への影響は他の多くの要因と重なるため、表示速度の改善だけで順位の変化を判断しないようにします。表示速度と検索順位の関係についての Google の説明は表示速度とSEOで紹介しています。

よくある質問

lazy load を使うと SEO に悪い影響はありますか？

ブラウザ標準の loading=”lazy” や、画面に入ったら読み込む作りであれば、Googleは画像を見つけられると説明しています。問題になりやすいのは、クリックやスクロール操作をきっかけに読み込む作りと、最初の画面の主役の画像に付けて LCP を遅くする使い方です。

すべての画像を WebP や AVIF に変える必要がありますか？

必須ではありません。Google検索は JPEG や PNG にも対応しています。まず表示サイズに合わせることを優先し、重い写真から順に形式の変更を検討します。ロゴや単純な図は SVG の方が向く場合もあります。

iframe（埋め込み動画や地図）にも loading=”lazy” は使えますか？

使えます。loading 属性は iframe にも付けられます。画面の下の方にある埋め込みは、遅延読み込みにすると最初の表示に使う通信を減らせます。最初の画面に入る埋め込みには付けません。

背景画像（CSS）で置いた画像は検索に出ますか？

Googleは、CSSの背景画像をインデックスに登録しないと説明しています。飾りの画像なら背景のままで構いませんが、画像検索で見つけてほしい画像や内容の説明に必要な画像は img要素で置きます。

SEOAGENTでできること

SEOAGENTでは、実際の利用者のデータ（CrUX）の判定と計測ツールの点数を分けて表示し、表示速度の状態を確認できます。診断の機能のため、画像の圧縮や形式の変換、テーマの設定は自動では変更しません。サイト側の対応を判断する材料として使います。記事のアイキャッチや見出しごとの画像の生成にも対応しています。

• AI検索・表示速度の診断
• AI記事作成・画像生成

サイトの土台を整える記事は「テクニカルSEOの記事一覧」にまとめています。全体の進め方はSEO内部対策の全体像も参考にしてください。

参考情報

• Google 検索セントラル：画像 SEO のベスト プラクティス
• Google 検索セントラル：遅延読み込みされたコンテンツの修正
• Google 検索セントラル：画像サイトマップ
• web.dev：Largest Contentful Paint を最適化する
• web.dev：Fetch Priority API でリソースの読み込みを最適化する