内部改善ロードマップ Vol.4【前編】｜画像SEOの設計図：フォーマット・サイズ・ALT最適化でLCPを軽くする

画像って、ただ“貼るだけ”だと意外とトラブルの温床になります。
重い・遅い・伝わらない・レイアウトが崩れる… こんな悩み、思い当たりませんか？

実は、画像SEOには“型”があります。
そしてその型を押さえるだけで、LCPの悪化を防ぎつつ、検索にも読者にもやさしい画像設計ができてしまうんです。

本編では、

• WebP / AVIF / PNG / SVG のざっくりした使い分け

• 実寸での書き出しと、高密度端末との付き合い方

• 意味が伝わるALTの作り方（対象＋文脈）

• LCP画像（ヒーロー画像）を“遅くしない”基本ルール

といった要点を、悩まずに実装できるよう “設計図” としてまとめていきます。

難しい専門用語は最小限にしつつ、CMS初心者〜中級の人でもスッと理解できるように整理していますので、画像最適化の基礎を固めたい人にピッタリです。

「どのフォーマットで保存すればいい？」「ALTってどう書くのが正解？」
そんな疑問を、記事を読み切る頃にはひとつずつ解消できるはずです。

では、画像SEOの“土台”を一緒に固めていきましょう！

本ブログでわかること

• フォーマットの選び方
  写真は WebP/AVIF、図版・ロゴは PNG/SVG…という“ざっくり判断”ができるようになる。

• 実寸と密度の考え方
  掲載幅に対して無駄に大きい画像を配信しない“実寸主義”のコツがつかめる。

• ALTテキストの型
  「対象＋文脈」で書く意味づけが分かり、検索にもアクセシビリティにも強くなる。

• LCP画像（ヒーロー）の扱い方
  優先度の設定、非lazy、寸法指定…など、LCP悪化を防ぐために必須のポイントが整理できる。

フォーマット選択の作法

画像SEOの第一歩は、「どのフォーマットで保存するか」をざっくり決めるところから始まります。
フォーマット選びは「軽さ」「画質」「透過の有無」「線のシャープさ」など、性質がまったく違うので、ここを外すとあとで LCP 改善もしづらくなります。

とはいえ、細かい計測をしなくても、“写真系”と“図版・ロゴ系”を分けて考えるだけで一気に失敗しにくくなるので安心してください。

以下では、CMSやブログ運用でもそのまま使える “迷わない判断基準” をまとめました。

 写真系 — WebP（互換性重視）／AVIF（軽量寄り）

写真・スクリーンショット・背景画像など、情報量が多い画像は「どれだけ劣化を抑えて軽くできるか」が勝負です。

• WebP：まずはこれ。互換性が広く、軽量化もしやすい万能型。
  JPG からWebPにするだけで、ざっくり 20〜30% くらい軽くなるケースも多く、
  “まずはWebPで書き出す” は画像SEOの基本ルールと言ってOKです。

• AVIF：もっと軽くしたいときの選択肢。
  画質劣化が目立ちにくく、同じ画質なら WebP よりさらに軽いことが多いのが特徴。
  ただし、まだ WebP より互換性が広いとは言えないため、
  “AVIFが出せるなら出す → fallbackでWebP” の二段構えが無難です。

ポイント
写真は、読み込みが重いと LCP が即悪化します。
「高解像度だからとりあえず大きく書き出す」のはNGで、フォーマット選択とセットで“軽量化”を意識しましょう。

図版・ロゴ — PNG or SVG（透過 / シャープな線）

図解・UIパーツ・アイコン・ロゴなど、線がくっきりした画像は“写真”とは別の考え方になります。

• PNG：透過背景が必要なとき、階調が少ない図版に向く定番フォーマット。
  スクリーンショットもPNGが無難ですが、容量が跳ねやすいので後述の書き出し幅と合わせて調整すると吉。

• SVG：ロゴ・アイコン・線画に最適。
  ベクター形式なので、拡大縮小しても劣化しないのが強み。
  ファイルサイズも軽く、レスポンシブにも強いので、
  ロゴやシンプルな図版は「まずSVGにできないか？」を一度考えるのがおすすめです。

特にロゴ画像をPNGのまま巨大サイズで使っているサイトは多く、
LCP以前に“重いのにクオリティも落ちている”という残念な状態になりがち。
図版・ロゴこそフォーマット選択が効きます。

動画を画像化する是非 — ループGIFの置換判断（ぼかし）

意外と軽視されがちですが、「短い動きを見せたいからGIF」という選択は、2025年時点ではほぼNGです。

• GIFは重い・画質が荒れやすい・透明処理が弱い

• ループアニメーションに使うと、LCPだけでなくINPまで巻き込みやすい

そのため、迷ったら次のように考えると安全です。

• “動きが必要” → WebM / MP4 の短尺動画にする（容量が圧倒的に軽い）

• “動き不要で1枚で伝わる” → WebP/PNG に静止画化する

GIFは古い文化のまま残っていますが、
画像SEO・Webパフォーマンスの観点では、**「置き換えるべきフォーマット」**と覚えてOKです。

サイズ設計と書き出し

フォーマットを決めたら、つぎは 「どのサイズで書き出すか？」 のステップに入ります。
ここを曖昧にしてしまうと、せっかく軽いフォーマットを使っても “過大配信” が起き、ページ全体の読み込みがずるずる遅くなります。

画像SEOでは、「必要な幅 × 適度な密度」 に抑えるだけで、大半のケースでサイズが最適化されます。
この章では、その判断の“型”を身につけましょう。

実寸主義 — 掲載幅のおおよそ 1〜1.5倍 で書き出す発想

まず押さえておきたいのが 「実寸主義」 です。
これは、画像が実際に表示される幅を基準にして、それより大きすぎないサイズで書き出すという考え方。

例として、

• ブログ本文の最大幅 → だいたい 600〜800px

• それに対して書き出し幅 → 1倍〜1.5倍ほど（600〜1200px が目安）

という感じでコントロールします。

よくあるNGは、

• 「元データが4Kだからそのまま使う」

• 「とりあえず2,000pxで書き出しておけば綺麗でしょ？」

という発想。
これ、**実際の表示より数倍重い画像を配信し続ける“過大配信”**です。

実寸主義のメリットは、

• 画像が軽くなる（LCPに即効）

• ぼやけも発生しにくい

• srcsetを組むときの基準にもなる

という3つ。
“迷ったら表示幅に合わせる”が最も安全で確実です。

解像度の幅 — 高密度端末を意識しつつやり過ぎない

スマホやタブレットでは、高密度ディスプレイ（いわゆる2倍密度・3倍密度）が当たり前。
そのため、単純に「実寸＝書き出し幅」だと、拡大時に少し粗さが見えることがあります。

そこで、先ほどの実寸主義に対して、

• 1.5倍前後で書き出す

• 必要なら2倍も“上限”として選択肢にする

という柔らかいルールを足します。

ただし注意点はひとつ。

“2倍は必須ではない”

です。

3倍密度端末だからといって3倍画像を配信すると、一気に容量が跳ね上がり、LCP悪化に直結します。
そのため、基本は 1〜1.5倍、大きく見せたい写真だけ2倍までと割り切ると運用が安定します。

過密度よりも、過大配信のほうが痛い — 画像SEOではこの視点が重要です。

 連番命名とディレクトリ設計 — 後から差し替えやすい構造

画像最適化は “一度やって終わり”ではなく、後から差し替える機会が必ず来る作業です。
そこで、最初から差し替えしやすい構造にしておくと、運用のストレスが激減します。

おすすめの基本ルールはこんな感じ：

• 記事ごとにフォルダ（ディレクトリ）を分ける

• 画像名は「用途＋連番」で統一する（hero-01.webp など）

• 差し替えは同名 or バージョン付与のどちらかに統一

とくに、LCP画像（ヒーロー画像）を差し替えるときにURLが変わると、
キャッシュが効かなくなったり、検索側が「新しい画像だ」と毎回判断してしまうことがあります。

そのため、

• URLを固定するなら same-name で差し替える

• 更新を区別したいなら hero-01-v2.webp のようにバージョン付与

と“どちらかに統一”しておくことが大事です。

画像SEOは「軽く、速く、崩れず、差し替えやすい」が柱。
命名と構造はその土台になります。

ALTの設計（意味×意図）

ALT（代替テキスト）は、画像SEOの中でも“軽視されやすいのに最も効果が出る”パートです。
検索にも読者にもクローラーにも効きますし、アクセシビリティの観点でも必須の要素。

ただし ALT は「書くか／書かないか」だけでなく、
“何をどう書くか”で効果がまるで変わります。

この章では、迷わず書ける 『対象＋文脈』 の型 を紹介しつつ、
やりがちな NG ALT、手順記事ならではの ALT も、実例で理解できるように整理します。

 型 —「対象＋文脈」（例：INPの計測画面で紫バーを示す図）

ALTを書くときのベースは、これだけ覚えておけばOKです。

【対象】＋【文脈・意図】
例：
「INPの計測画面で、紫色バーが計測値を示している様子」

ALTはキャプションではないので、
「きれいな写真」「図：INP」などのざっくり表現だと意味が伝わりません。

“この画像は何を示していて、読者に何を理解させたいか？”
ここを短く書くのが最も正解に近い ALT です。

良い例：

• 「WebPとAVIFの容量差を比較した表」

• 「WordPressのメディア設定で、画像サイズを指定する画面」

• 「LCP画像（ヒーロー画像）が表示されるファーストビューの例」

ポイントは、

• 読者が『画像を見る前に何が写っているか』を把握できること

• 検索エンジンが『この画像が何の話題か』を理解できること

この2つが揃うと、SEO的にも評価されやすくなります。

 NG — “画像1” “装飾” など意味がないALT

やりがちな NG ALT も、ここで一気に潰しておきましょう。

NG例：

• 「画像1」

• 「図」

• 「装飾」

• 「スクリーンショット」

• 「説明図」

どれも「何を伝える画像なのか」が分かりませんよね。
Google は ALT を“画像の内容を補うテキスト”として理解するので、
このような ALT だと 検索にも読者にも何も伝わらない ＝ ほぼ無価値です。

さらに NG なのは、
ALT を空にする or コピペだけで埋める癖がつくこと。

ALTはページごとに“その画像が何のために存在するのか”が変わるため、
同じALTを全画像に使い回すのは逆に評価を落とすことがあります。

手順記事のALT — ステップ名＋結果が一目で分かる記述

特に需要が高いのが、“手順系コンテンツの ALT の書き方”です。

手順記事では、

「どのステップの、どんな操作結果なのか」が分かるALT

が最強です。

良い例：

• 「メディア設定で『大サイズ』の幅を変更している画面（Step2）」

• 「画像の書き出し設定でWebP形式を選択した直後の画面」

• 「LCP画像を非lazyに設定するチェックボックスの位置を示した図」

このように書いておくと、

• 読者が画像の“意味”をキャッチしやすい

• 画像検索にも拾われやすくなる

• アクセシビリティ（スクリーンリーダー）にも適切

と、三拍子そろった ALT になります。

特に WordPress やノーコード系 CMS の操作記事では、
ALTひとつで読者の理解度が大きく変わるので、
“操作名＋結果” のセットにするのがもっとも効果的です。

LCP画像の基本

Webパフォーマンスの評価で、もっとも重視される指標のひとつが LCP（Largest Contentful Paint）。
その中心にあるのが “ヒーロー画像（ファーストビューの主画像）” です。

LCP は「いちばん大きなコンテンツがいつ表示されたか」を測る指標なので、
ヒーロー画像が重かったり遅かったりすると、
ページ全体の評価がダイレクトに下がるのが最大のポイントです。

この章では、LCP画像に絶対必要な “優先度・非lazy・寸法・URLの扱い” を、
迷わず実装できるレベルで整理しています。

優先度 — ファーストビューの主画像は高優先度 / 非lazy

LCP画像でやってはいけない最も典型的なNGが、

ヒーロー画像を lazy にしてしまうこと。

lazy は便利ですが、
“ファーストビューに確実に表示される画像” に対しては 絶対に使わない のが鉄則です。

ヒーロー画像は次のように設定するのが最も安全です。

• loading="eager" もしくは loading を書かない（＝非lazy）

• fetchpriority="high" で優先して読み込む

• できれば HTML 内の上のほうに置く（レンダリング順を最適化）

とくに fetchpriority="high" は2025年時点でLCP改善に寄与しやすく、
“ヒーロー画像にだけ使う” のが正しい運用です。

寸法指定 — width / height を属性で明示（CLS予防）

LCP画像は、CLS（Cumulative Layout Shift） の原因にもなりがちです。
理由はシンプルで、

画像に width / height が指定されていないと、読み込み途中でレイアウトがズレる
→ 見た目がガタつき、ユーザー体験もスコアも悪化する

からです。

LCP画像に限らず、重要画像には必ず以下をセットで指定しましょう。

 

<img src="hero.webp" width="800" height="450" alt="〜〜〜">

この寸法指定によって、ブラウザは画像の縦横比（アスペクト比）を先に確保します。
これだけでレイアウトが安定し、CLS対策として非常に強力です。

さらに CSS で object-fit や max-width: 100% を使えば、
“崩れないけれど柔軟に縮む” レスポンシブなヒーロー画像が作れます。

上書き運用 — 画像を更新してもURLを安定させる工夫（またはバージョン付与）

LCP画像は“ページの顔”。
運用中に差し替えることもよくありますが、
差し替え時にやってはいけないのが URLがコロコロ変わる運用 です。

URLが変わると、

• キャッシュが効きにくくなる

• 検索エンジンが毎回「新しい画像か？」と判断し直す

• SNS OGP の表示が乱れやすい

• CDN も毎回新しいリソースとして扱う

と、細かい問題が積み重なります。

そこでおすすめの運用は次のどちらか：

① 同じファイル名で差し替える（ヒーロー画像を安定供給）
例：hero.webp をそのまま更新

② バージョン付与ルールで整理する（キャッシュ制御をしやすくする）
例：hero-v2.webp → hero-v3.webp

どちらを採用してもOKですが、
“両方混ざる” のだけは避けるのが画像SEOの鉄則です。

用語ミニ辞典

ここまで登場したキーワードを、サッと振り返れるようにまとめておきます。
細かすぎない “実務で使えるレベル” の説明に統一しています。

LCP（Largest Contentful Paint）

ページ内で もっとも大きく見える要素が表示されるまでの時間。
主にヒーロー画像やファーストビューの見出しが対象になりやすく、
重い画像や遅延設定ミスがあると一気にスコアが悪化する。

ALT（代替テキスト）

画像の内容と意図を文章で補うテキスト。
検索エンジンの理解を助け、スクリーンリーダーにも読まれる。
「対象＋文脈」 の型で書くともっとも伝わりやすい。

実寸配信

画像が表示される“実際の幅”（600px など）に合わせて、
必要以上に大きな画像を配信しない考え方。
1〜1.5倍程度の書き出しが基本で、LCP改善に直結する。

まとめ：画像SEOの設計図——フォーマット・サイズ・ALTとLCP画像の基本を固める

画像SEOは“特別なテクニック”に見えますが、
実は 「フォーマット・サイズ・ALT・LCP画像」 の4本柱を押さえるだけで
サイト全体のパフォーマンスと体験がガラッと変わります。

• フォーマット選択：WebP / AVIF / PNG / SVG をざっくり用途で使い分ける

• サイズ設計：表示幅の1〜1.5倍で書き出す“実寸主義”で過大配信を回避

• ALT設計：「対象＋文脈」で読者にも検索にも意図を明確化

• LCP画像：非lazy・高優先度・寸法指定・URL安定の4点セットが必須

これらは全部 “今日からすぐできるもの” ばかりです。
記事の画像が「なんとなく重い」「なんとなく分かりづらい」と感じている場合、
まずは今回のチェックリストをひとつずつ試してみてください。

次の後編では、
今回設計した画像を “どう高速に配信するか” にフォーカスします。
lazy / fetchpriority / srcset / sizes / キャッシュ戦略 など、
実際の読み込み制御をまとめて理解できる内容になっています。

別記事への導線（キーワード入り）

Vol.4【後編】｜画像配信の最適化：lazy・優先度・srcset・キャッシュでINPも守る

設計した画像を、実際に“どう速く読ませるか”を徹底解説。
LCP・INP・CLS の改善に直結する読み込み戦略をまとめています。

Vol.3【前後編】復習｜構造化データと画像の整合性

画像SEOと相性の良い“構造化データ”との関係をおさらい。
検索結果の見え方まで含めて整えるなら必読です。

今回はここで終わりにしたいと思います！

最後までお読みいただきありがとうございました！

このブログでは「ChatGPT×副業」をテーマに、AIをフル活用したリアルな副業チャレンジを発信しています🎶

むずかしい話はナシで、「ちょっとやってみたいかも」と思えるような内容を目指しています😁

私は現在、ChatGPTを使ってTシャツのデザインを作って販売したり、

LINEスタンプのキャラ制作に挑戦したりしています👍

デザインの知識ゼロでも、AIの画像生成機能を使えばかなりいい感じになりますよ！

ブログの内容やSEO対策も、ぜんぶChatGPTに相談しながら書いています。

アイデアが出ないときも、相棒みたいに助けてくれます🎶

さらに、楽天ルームのレビュー文章もChatGPTと一緒に考えたり、

X（旧Twitter）の投稿や運用方法も提案してもらったりと、あらゆる場面でAIに頼っています。😅

「AIって便利そうだけど、自分にも使えるのかな？」

と思っている人には、ぜひ読んでほしいです。

このブログは、AI初心者でも副業が始められるように、

体験ベースでわかりやすく書いています。

私の成功も失敗もまるごとシェアしていくので、よかったら気軽に読んでいってくださいね。

Xでも日々の活動をゆるっと更新しているので、ぜひのぞいてみてください！

明日のあなたがより豊かになりますように😌

それでは、おやすみなさい😴