- サイトの表示が遅い
- PageSpeed Insightsのスコアが低い
- 検索順位が上がらない
こうした悩みの原因が「画像」にあるケース、実はかなり多いです。
その理由は、一般的なWebページの総容量のうち約半分を画像が占めているからです。
逆に言えば、画像をちゃんと最適化するだけで、サイトの速度もSEOも目に見えて改善する可能性があるということ。
しかも、画像SEOは特別な技術がいるわけではなく、やることは意外とシンプルなんです。
それでは、フォーマット選び、圧縮、alt属性、Core Web Vitals対策まで、画像に関するSEO対策を順番に見ていきましょう。
なぜ画像の最適化がSEOに効くのか
まず「そもそもなぜ画像を最適化するとSEOに良いのか」を整理しておきます。
①ページ速度はGoogleのランキング要因
2018年にモバイルの速度がランキングに影響すると公式に発表されて以降、Core Web Vitalsの導入でその比重はさらに大きくなっています。
②Google画像検索の存在
全Google検索の20%以上が画像検索経由だと言われています。
きちんと最適化された画像は、通常の検索結果の画像カルーセルやGoogle Discoverにも表示される可能性があるので無視できません。
③表示速度とユーザー行動の関係
ページの読み込みが1秒遅くなると、直帰率が11%増加するというデータがあります。
「読み込みが遅い → ユーザーが離脱する → SEO評価が下がる」という悪循環に陥りやすいのです。
④LCPへの影響
Core Web Vitalsの指標の1つである LCP（Largest Contentful Paint）は、多くの場合ヒーロー画像の読み込み時間で決まります。
画像が重ければ、それだけでLCPが不合格になることも珍しくありません。
画像フォーマットの選び方
最適化の第一歩は、適切なフォーマットを選ぶことです。用途によって最適なフォーマットが違います。
JPEG
写真や色数が多い画像に向いています。非可逆圧縮（ロッシー）なので多少のデータは失われますが、品質70〜85%の設定ならほとんど見分けがつかず、ファイルサイズは60〜80%削減できます。
ブログのアイキャッチ、商品写真、風景画像などはJPEGが定番。ただし、テキストのスクリーンショットやロゴなど、くっきりしたエッジが必要な画像には向きません。
PNG
透過が必要な画像、ロゴ、スクリーンショットなどに使います。可逆圧縮（ロスレス）なので画質は完璧に保たれますが、写真に使うとJPEGの5〜10倍のサイズになることも。
「この画像、透過いる？」「テキストのシャープさは重要？」→ Yesの場合だけPNGを選ぶ、くらいの意識で大丈夫です。
WebP
Googleが開発した、JPEGとPNGの「いいとこ取り」フォーマット。同じ見た目でJPEGより25〜35%小さく、PNGより26%小さくなり、透過やアニメーションにも対応。
2025年時点でブラウザの97%以上がサポートしており、もはや実用段階です。
基本的にすべての画像をWebPに変換して配信し、古いブラウザ向けにJPEG/PNGをフォールバックとして用意するのがベストプラクティスです。
SVG
ロゴ、アイコン、図解など、シンプルなベクターグラフィックによく使われます。
ピクセルではなく数式で描くので、どんなサイズでも劣化することなく、ファイルサイズも軽いことが特徴です。
ただし、写真には使えません。
圧縮の正しいやり方
使う画像を決めたら、画像を圧縮などしていきましょう。
まずリサイズしてから圧縮する
ありがちなミスが、4000×3000pxの画像をそのままサイズで圧縮して、サイト上では800pxの幅で表示すること。
ブラウザは元のサイズのファイルをまるごとダウンロードするので、帯域の大部分が無駄になります。
そのため、まずは表示サイズの2倍（Retina対応）程度にリサイズしてから圧縮するようにしましょう。
例えば、もしブログのコンテンツ幅が780pxなら、画像は1560px幅で十分です。
JPEGは品質70〜85%が最適
品質80%で圧縮すれば、ほとんどの写真で元画像と見分けがつかないまま、ファイルサイズを80%以上削減できます。
ブログのサムネイルなら、70〜75%圧縮してもまったく問題ありません。
WebPに変換するだけで25%軽くなる
すでにJPEGやPNGで運用しているサイトなら、WebPに変換するだけでさらに25〜35%削減が見込めます。
HTMLでは 要素を使って、WebP対応ブラウザにはWebPを、非対応ブラウザにはJPEG/PNGを出し分けるのが定石です。
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="画像の説明">
</picture>alt属性の書き方
alt属性（代替テキスト）は、画像SEOで最も手軽に改善できるポイントです。
alt属性の役割は、
- スクリーンリーダーでの読み上げ（アクセシビリティ）
- Googleへの画像内容の伝達（SEO）
- 画像が読み込めない場合の代替表示（フォールバック）
の3つです。
良いaltと悪いalt
NG： alt="画像" / alt="IMG_20250315.jpg" / alt=""（意味のある画像なのに空）
OK： alt="秋の落ち葉の中に座るゴールデンレトリバーの子犬"
OK： alt="2025年3月から9月のオーガニックトラフィック40%増加を示す折れ線グラフ"
ポイントは「その画像が見えない人に、何が写っているかを伝える」こと。そう考えると自然と具体的な記述になります。
alt属性のコツ
キーワードを自然に入れる。 ページのターゲットキーワードが「チョコチップクッキー レシピ」なら、alt="冷却ラックに並んだ焼きたてのチョコチップクッキー" のようにすると、SEOにも効きます。無理にキーワードを詰め込むのは逆効果。
「〜の画像」「〜の写真」で始めない。 スクリーンリーダーは「画像：」と前置きしてからaltを読み上げるので、「画像：画像の写真」と二重になってしまいます。
125文字以内に収める。 長すぎると一部のスクリーンリーダーで途切れます。
装飾的な画像はalt=””にする。 背景パターンや区切り線など、情報を持たない画像には空のaltを指定します。スクリーンリーダーがスキップしてくれるようになります。
ファイル名もSEOに影響する
意外と見落とされがちですが、画像のファイル名もGoogleは読んでいます。
NG： IMG_20250315_001.jpg / screenshot-2.png / photo.jpg
OK： chocolate-chip-cookie-recipe.jpg / tokyo-skyline-sunset.webp
半角英数、ハイフン区切り、内容がわかる名前。これだけです。アップロード前にファイル名を整えるだけで、地味にSEO効果があります。
レスポンシブ画像で転送量を削減
同じ画像を4Kモニターとスマホに同じファイルで配信するのは非効率です。srcset属性を使えば、デバイスに応じた最適なサイズを自動配信できます。
<img
src="hero-800.jpg"
srcset="
hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w,
hero-1600.jpg 1600w
"
sizes="(max-width: 768px) 100vw, 800px"
alt="モダンなオフィスの風景"
>ブラウザが画面サイズとピクセル密度に合わせて最適なファイルを選んでくれます。モバイルでの画像転送量を30〜50%減らせることもあります。
遅延読み込み（Lazy Loading）
ファーストビュー（画面に見えている範囲）以外の画像を、スクロールが近づくまで読み込まないようにする技術です。特に画像が多いページで初期表示が劇的に速くなります。
使い方は属性を1つ追加するだけ。
<img src="photo.jpg" alt="説明" loading="lazy">ただし注意点が1つ。ページの一番上にあるヒーロー画像は遅延読み込みしてはいけません。LCPに直結するため、最優先で読み込む必要があります。
<!-- ヒーロー画像：すぐ読み込む -->
<img src="hero.jpg" alt="メインビジュアル" loading="eager" fetchpriority="high">
<!-- スクロールしないと見えない画像：遅延読み込み -->
<img src="content-photo.jpg" alt="説明" loading="lazy">ただし、WordPressはバージョン5.5以降に関しては、遅延読み込みが標準で有効になっています。
Core Web Vitals対策
GoogleのCore Web Vitals（ページ体験の指標）のうち、画像が関係する2つの指標を見ておきましょう。
LCP（Largest Contentful Paint）
多くの場合はヒーロー画像（画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと）が影響してしまいますが、コンテンツが表示されるまでの時間は、
目標：2.5秒以内。
対策のポイントは、
- ヒーロー画像を200KB以下に圧縮する
fetchpriority="high"を指定する<link rel="preload" as="image" href="hero.webp">でプリロードする- CDNから配信する
- WebP/AVIFなどの軽量フォーマットを使う
の5つを行いましょう。
CLS（Cumulative Layout Shift）
画像の読み込みでレイアウトがガタッとずれたりすることはユーザーに嫌われるため、
目標：0.1以下。
原因のほとんどは、<img>タグにwidth/heightが指定されていないこと。ブラウザが画像の大きさを事前に把握できず、読み込み完了時にレイアウトがずれるのです。
<img src="photo.jpg" alt="説明" width="800" height="450">たったこれだけで解消できるので、出来るだけ全画像に指定しましょう。
チェックリスト
記事やページを公開する前に確認したい10項目をまとめました。
- 画像は表示サイズの2倍以下にリサイズしたか？
- JPEGは品質70〜85%で圧縮したか？
- WebP形式で配信しているか？（フォールバック付き）
- 意味のある画像すべてにalt属性を書いたか？
- ファイル名をハイフン区切りの説明的なものにしたか？
- ヒーロー画像にfetchpriority=”high”を指定したか？
- ファーストビュー外の画像にloading=”lazy”を入れたか？
- すべてのimgタグにwidth/height属性があるか？
- ページ全体の容量は1.5MB以下か？
- PageSpeed InsightsでCore Web Vitalsをクリアしているか？
まとめ
画像SEOでやるべきことは、実はシンプルです。
- 適切なフォーマットを選ぶ
- ちゃんと圧縮する
- alt属性をきちんと書く
- 遅延読み込みとレスポンシブ画像を設定する
- widthとheightを忘れない
1つひとつは小さな改善ですが、全部やると効果は驚くほど大きいです。
特に画像が多いサイトでは、PageSpeed Insightsのスコアが30〜40点改善するケースも珍しくありません。
まだ手を付けていない方は、まずはヒーロー画像の圧縮から始めてみてください。
それだけでも違いを実感できるはずです。