AIは画像をどう理解する？レスポンシブ画像とWebPがAI時代のSNOで重要になる理由
AI- AI時代の画像最適化とは
- マルチモーダルAIは、テキストだけでなく画像内の物体や色、形、周囲との関係まで解析できる
- 画像をAIや検索エンジンに理解してもらうには、画像そのものだけでなくalt属性や周辺テキストなどの文脈も重要
- srcsetを利用すると、画面サイズに応じた適切な画像を配信し、不要な通信量を減らせる
- WebPによる軽量化は画質を維持しながらページ容量を抑え、PageSpeedやユーザー体験の改善につながる
- 画像の軽量化そのものがAIからの評価を直接高めるわけではなく、発見・理解・表示しやすいWeb環境を作ることがSNOの土台になる
検索や情報収集において、AIはテキストだけでなく画像そのものを理解するようになっています。これからのWebサイトでは、画像の内容だけでなく、画像を正しく発見できるHTML構造、周辺テキストやalt属性による文脈、端末に適した画像サイズ、表示速度まで含めた設計が重要です。srcsetによるレスポンシブ画像やWebPによる軽量化は、AIに直接評価されるための特殊な施策ではありませんが、人にも検索エンジンにも扱いやすいWebサイトを作る基盤になります。
AIはテキストだけを読んでいるわけではない
これまでWebサイトの検索対策では、文章が中心に考えられてきました。
タイトル、見出し、本文、内部リンク、構造化データなど、検索エンジンが文章の意味を理解しやすい状態を作ることが重要でした。
しかし、AIによる検索が広がる中で、画像の位置づけも変わりつつあります。
GoogleのAI Modeでは、GeminiとGoogle Lensを組み合わせ、画像全体だけでなく、その中にある個々の物体、素材、色、形、配置といった情報まで理解できると説明されています。2026年には、1枚の画像に写る複数の対象を同時に認識する検索機能も拡張されています。
つまり、Webサイトに掲載された画像は、単なる装飾ではなく、ページの内容を伝える情報のひとつになっています。
- 商品であれば形状や色
- 建築物であれば外観や構造
- 料理であれば盛り付けや食材
- 人物であれば服装や置かれている状況
テキストだけでは伝えきれない情報を、画像から補完できる時代になっています。
AIが画像を理解できるなら、画像だけ掲載すればよいのか
AIの画像認識能力が向上しても、画像そのものだけに任せればよいわけではありません。
Googleは画像検索について、画像が掲載されているページの文章、キャプション、タイトルなどからも画像の内容に関する情報を取得すると説明しています。
また、画像は関連する文章の近くに配置し、適切なalt属性を設定することも推奨されています。
例えば城の石垣を撮影した写真があったとします。画像だけを見れば、AIは「石垣」「城」「石」程度までは理解できるかもしれません。
しかし、その写真の近くに、「〇〇城本丸に残る打込接の石垣」という文章があれば、その画像が何を示しているのか、より具体的な文脈が生まれます。
画像と文章が結びつくことで、単なる「石垣の写真」から「〇〇城」「本丸」「打込接」という複数の情報とのつながりが形成されます。
SNOの観点でも重要なのは、このような情報同士の関係です。画像を置くこと自体ではなく、画像がページ全体の文脈の中でどのような意味を持っているかを明確にすることが重要になります。
重い画像はAIに理解されにくいのか
ここは慎重に考える必要があります。画像ファイルが重いからといって、AIが画像の内容を理解できなくなると確認されているわけではありません。
また、WebPにするとAIが画像を高く評価する、srcsetを使うと生成AIに引用されやすくなる、といった直接的な評価基準が公表されているわけでもありません。
「軽い画像ほどAIのトークン消費が少なく、評価されやすい」という考え方にも、現時点で明確な根拠はありません。
一方で、画像の重さがWebサイト全体に影響することは明確です。Googleも画像はページ容量の大きな割合を占めることが多く、品質を維持しながら画像を最適化し、レスポンシブ画像を利用することを推奨しています。
画像が必要以上に大きければ、ページの読み込みは遅くなります。その結果、人間のユーザー体験が悪化し、Core Web Vitalsにも影響します。
重要なのは「AIのために画像を軽くする」のではありません。人にもクローラーにも無駄の少ないWebサイトを作った結果として、AI時代にも扱いやすい情報基盤になるという順序です。
200pxで表示する画像に2000pxは必要ない
画像最適化で起きやすい問題のひとつが、表示サイズと実際に読み込む画像サイズの不一致です。
スマートフォン上では横幅300px程度で表示している画像に、横幅2000pxの画像を読み込ませても、ユーザーが得られる情報量はほとんど変わりません。
一方で、通信するデータ量は大きくなります。そこで利用するのがレスポンシブ画像です。
HTMLのsrcset属性を利用すると、同じ画像について複数のサイズを用意し、ブラウザが画面サイズや解像度に応じて適切な画像を選択できます。
Googleも画像SEOのベストプラクティスとしてsrcsetによるレスポンシブ画像に対応しており、互換性のためにsrcによる代替URLも指定することを推奨しています。
例えば、以下のように記述すれば端末や表示領域に応じて適切な画像を選択できます。
<img
src="sample-1200.webp"
srcset="
sample-480.webp 480w,
sample-800.webp 800w,
sample-1200.webp 1200w
"
sizes="(max-width: 752px) 100vw, 800px"
alt="〇〇城本丸の石垣"
width="1200"
height="800">
Googleのweb.devでも、srcsetとsizesを利用することで、小さな画面に不必要に大きな画像を送信することを避けられると説明されています。
これは単なるPageSpeedのテクニックではありません。必要な情報を、必要なサイズで届けるというWeb設計の基本です。
WebPは「AI用画像フォーマット」ではない
画像形式についても同様です。WebPはJPEGやPNGなどと比較して、画質を維持しながらファイルサイズを小さくできる画像形式です。Google SearchもWebPを画像検索でサポートしています。そのため、写真を多く使用するWebサイトでは、WebPを利用することで通信量を大きく削減できる場合があります。
ただし、WebPだからAIが内容を理解しやすくなるという意味ではありません。WebPを利用する目的は、あくまで画像を効率的に配信することです。
重要なのは、以下の複数の施策を組み合わせることです。
- 適切な画像形式を選ぶ。
- 必要以上に大きな画像を配信しない。
- 表示領域に合わせて画像サイズを切り替える。
- widthとheightを指定してレイアウトシフトを防ぐ。
- 必要に応じて遅延読み込みを行う。
画像形式だけ変更しても、2000pxの画像をスマートフォンに配信し続けていれば、本質的な改善にはなりません。
PageSpeedと画像の意味を分けて考える
AI時代の画像設計では、「画像の意味」と「画像の配信」を分けて考えると分かりやすくなります。画像の意味を伝えるために必要なのは、次の項目です。
- 画像そのものの内容
- alt属性
- ファイル名
- キャプション
- 周辺の文章
- ページ全体のテーマ
- 必要に応じた構造化データ
一方、画像を効率的に届けるために必要なのは、以下です。
- WebPなどによる軽量化
- srcsetによるレスポンシブ画像
- 適切なwidth・height
- 不要な高解像度画像の排除
- 読み込みタイミングの制御
この2つは目的が異なります。しかし、どちらか一方だけでは十分とは言えません。画像の意味が明確でも、ページが極端に重ければユーザー体験は悪くなります。
反対に、画像を軽くしてPageSpeedが高くても、IMG_1234.webpというファイルを説明もなく掲載しただけでは、その画像がページの中で何を意味しているのか伝わりにくくなります。
AI時代には、この両方を整えることが重要です。
GoogleもAI検索に特別な最適化を求めているわけではない
2026年5月、Googleは生成AI機能に向けたWebサイト最適化について新たなガイドを公開しました。そこで示されているのは、AI専用の特殊なマークアップや裏技ではありません。
Googleは、従来のSEOのベストプラクティスが生成AI検索でも引き続き基盤になると説明しており、画像や動画を含めた有用なコンテンツを提供することも推奨しています。
これは重要なポイントです。
AI時代になったから、Webサイトの作り方をすべて変える必要があるわけではありません。むしろ、次のような基本的な設計の重要性が増しています。
- 正しいHTMLを書く
- 画像をクローラーが発見できるようにする
- 画像の意味を文章と結びつける
- ページを高速に表示する
- ユーザーにとって有益な情報を提供する
画像も「情報のつながり」の一部になる
SNOでは、単独のキーワードではなく、サイト内外に存在する情報同士のつながりをどのように形成するかが重要になります。画像も、そのつながりを構成する情報のひとつです。
例えば商品の写真であれば、以下情報。
- 商品名
- メーカー
- 素材
- 色
- 使用方法
- 利用シーン
- レビュー
- 関連商品
こうした情報と画像が同じページ内で適切につながっていれば、その商品についてより立体的な情報が形成されます。
マルチモーダルAIが画像を理解できるようになったことで、これまでテキストとは別の存在として扱われがちだった画像も、Webサイトの文脈を構成する情報として考える必要があります。
ただし、SNOのために画像を増やせばよいわけではありません。画像と文章が同じ意味を補完し合い、ページ全体としてひとつの文脈を形成していることが重要です。
PageSpeed対策から「情報配信の最適化」へ
これまで画像の軽量化は、主にPageSpeed対策として語られてきました。
- WebPにする
- 画像サイズを小さくする
- srcsetを使う
- 遅延読み込みを行う
もちろん、現在もPageSpeed改善として重要です。しかし、AIがテキストだけでなく画像まで扱う時代には、もう少し広い視点で考えることができます。
- 必要な画像を
- 適切なHTMLで
- 正しい文脈とともに
- 必要なサイズで
- できるだけ無駄なく届ける
これは単なる高速化ではなく、Webサイトが持つ情報を適切な形で配信する設計です。画像をAIに理解させるための特殊なテクニックが必要なのではありません。人間にも検索エンジンにもAIにも理解しやすいWebサイトを作る。その基本を突き詰めた先に、AI時代のSNOがあります。
- 執筆・編集：西部俊宏
- 株式会社Webの間代表取締役。上場企業でのSEOやWebサイト構築実績多数。ECサイトのカスタマイズ経験も多数あり。
- 会社概要はこちら
私たちは、ECを業務に合わせて設計・構築します。
カスタマイズ前提だからこそ、これまで実現できなかった要件にも対応できます。
