ウェブサイト画像最適化の方法：フォーマット、サイズ、配信のポイント
遅いウェブサイトは画像が多いことが多いです。大きすぎる写真や不適切なフォーマット、配信の問題が読み込み時間を遅くし、検索順位やサイトの印象を悪化させます。
解決策は単一の魔法のフォーマットではなく、適切なフォーマット選択、サイズの書き出し、最適な配信、メタデータと公開手順の管理を含む体系的なワークフローです。
目次
なぜウェブ画像最適化が重要か
画像はページの遅さの主な原因であることが多いです。 ページの大部分の容量が大きすぎる写真や不適切なフォーマット、弱いレスポンシブ配信による場合、ユーザー体験と検索パフォーマンスの両方が悪化します。
だからこそ画像最適化は体系的なシステムが必要で、単なる対処療法では不十分です。フォーマット、サイズ、配信、公開ワークフローの明確な計画が不可欠です。
高速なページ
適切なサイズの最新フォーマット画像は転送量を減らし、重要なビジュアルの早期表示を助けます。
パフォーマンス
検索での視認性向上
クリーンな画像配信、強化されたメタデータ、速いページ表示はクロール信号とページ品質の向上に寄与します。
検索への影響
公開作業の混乱軽減
体系的な画像ワークフローは、大きすぎる元画像の配信、メタデータ画像の欠落、不整合な書き出しを防ぎます。
運用の明確化
通常必要なウェブ画像の種類
多くのサイトは画像タイプの増加を必要としません。適切な役割を持ち、正しくサイズとラベル付けされた画像が必要です。無作為なアップロードではなく役割で考えましょう。
ヒーローまたはLCP画像
ページ上部の主要ビジュアルです。多くの場合Largest Contentful Paint要素となるため、サイズ調整が重要で、通常は遅延読み込みしません。
目的：第一印象とLCP
本文内画像
記事内容を補足する画像です。内容を説明し、適切なaltテキストを使い、デスクトップとモバイルで適切に拡大縮小されるべきです。
目的：読みやすさの支援
カード、サムネイル、ハブ画像
カテゴリーページや関連記事モジュール、ナビゲーションに表示される小さな画像です。ページのヒーロー画像より小さいバリアントを使うべきです。
目的：プレビューとナビゲーション
Open Graphおよびソーシャルプレビュー画像
チャットアプリやSNSで共有された際のページ見え方を決める画像です。表示されるヒーロー画像のコピーではなくメタデータ用の資産です。
目的：共有プレビューとクリック誘導
JSON-LD用構造化データ画像
記事や商品スキーマは主要画像を参照し、検索エンジンがページに紐づく主要ビジュアルを理解できるようにします。
目的：スキーマの完全性とエンティティの明確化
フォーマット：用途に合ったファイル形式を選ぶ
最適なフォーマットは画像の役割によります。多くのサイトは単一の形式ではなく複数を使い分けます。
| フォーマット | 最適用途 | 重要な理由 |
|---|---|---|
| WebP | 日常的なウェブ画像、カード、プレビュー、一般的なコンテンツビジュアル | WebPは品質、圧縮率、繰り返し利用のバランスが良く、実用的なデフォルトです。 |
| AVIF | 選ばれた大きな写真ヒーロー画像や高価値ビジュアルで、追加圧縮が効果的な場合 | AVIFはより小さいファイルを実現しますが、エンコードが遅く、全体のデフォルトではなく選択的な最適化に向いています。 |
| JPEG | レガシー互換性とモダン書き出し前の元ファイル | JPEGは入力形式として一般的ですが、重要なウェブ画像の最終形式としては稀にしか使うべきではありません。 |
| PNG | スクリーンショット、透過、ロスレスエッジが必要なUI資産 | PNGはインターフェースグラフィックに有用ですが、通常の写真コンテンツには重すぎることが多いです。 |
| SVG | アイコン、図解、ロゴ、シンプルなイラスト | SVGは拡大縮小が滑らかで、シャープな線画ではラスタ形式より優れます。 |
WebPを日常的な主力にし、最大圧縮効果が重要な一部の写真画像にAVIFを使い分けましょう。
日常的なWebP処理については、 JPGからWebPへのワークフローガイド 。選択的なヒーロー画像圧縮には、 JPEGからAVIFへのガイド 。
サイズ調整：レスポンシブ画像、寸法、レイアウトの安定性
遅いサイトは単にフォーマットの問題だけでなく、全画面サイズに対して大きすぎる画像を配信しがちです。レスポンシブサイズで解決します。
- 複数の幅を生成し、スマホ、タブレット、デスクトップに適切な画像を届けましょう。
- 幅と高さを設定してスペースを確保し、レイアウトのズレを減らします。
- カードや関連コンテンツには小さいバリアントを使い、ヒーロー画像の使い回しは避けましょう。
- ズームやダウンロード、ライトボックスが必要な場合のみ大きな元画像を保持します。
配信マークアップ例
コンテンツ画像には小さく明示的な設定を使い、本当のヒーロー画像だけを優先的に読み込みます。これがブラウザ挙動やLighthouse結果を理解しやすくします。
<picture>
<source
type="image/avif"
srcset="/images/articles/hero-640.avif 640w,
/images/articles/hero-1024.avif 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<source
type="image/webp"
srcset="/images/articles/hero-640.webp 640w,
/images/articles/hero-1024.webp 1024w"
sizes="(max-width: 768px) 100vw, 720px" />
<img
src="/images/articles/hero-1024.jpg"
alt="Product dashboard preview"
width="1024"
height="576"
loading="lazy"
decoding="async" />
</picture>配信優先度：遅延読み込み、LCP、Core Web Vitals
フォーマットとサイズが適切になれば、配信が次の重要なポイントです。基本はファーストビュー画像を優先資産として扱うことです。
ヒーロー画像に対して行うこと
ヒーロー画像は実際のレイアウトに合わせて圧縮・サイズ調整し、LCP要素の可能性が高い場合は積極的に読み込みます。
最新フォーマットと明示的なサイズ指定を使い、ファーストビューに巨大バナーを重ねすぎないようにします。
配信を妨げる要因
主要ヒーロー画像の遅延読み込み、スマホにデスクトップサイズの画像配信、写真に大きすぎるPNG使用は依然よくある誤りです。
これらの問題はLighthouse評価と実際のユーザー体験の両方を悪化させます。
コンテキスト：ファイル名、altテキスト、周囲の文章
画像最適化は容量だけでなく、検索エンジンやユーザーに画像の内容やページ上の意味を伝えることも重要です。
- カメラの出力名や仮名ではなく、被写体を説明するファイル名を使いましょう。
- 画像が意味を持つ場合にaltテキストを書き、キーワードの詰め込み場にしないでください。
- 画像の内容に沿った見出しやキャプション、本文を近くに配置しましょう。
- 画像の役割がページのテーマを支えるようにし、無関係に感じさせないようにしましょう。
メタデータ：Open GraphとJSON-LD画像の重要性
ブラウザ上は問題なく見えても、メタデータ画像がないと発見性が低下します。これは簡単に改善できる品質ギャップです。
Open Graph画像
外部共有時の見え方を制御します。強力なOpen Graph画像はSNSやチャットでの印象とクリック率を高めます。
JSON-LD画像プロパティ
構造化データは検索エンジンにより明確なコンテンツ情報を提供し、関連画像を含めることで見出しや説明と主要ビジュアルの関連性を強化します。
Blazorで開発する場合は、このガイドと合わせてご利用ください。 Blazorメタデータコンポーネントガイド そうすることで、ページタイトル、説明文、正規リンク、Open Graph画像、構造化データがすべて連動します。
ワークフロー：ウェブ画像の体系的な処理手順
- 書き出し前に画像の役割を定義します：ヒーロー、インライン、カード、Open Graph、スキーマ画像など。
- 用途に応じてフォーマットを選びます。日常はWebP、大きな写真はAVIF、ベクターはSVG、透過が必要な場合のみPNG。
- 全てに大きすぎる元画像を配信せず、レイアウトに合った適切なサイズを出力しましょう。
- ヒーロー画像を優先資産として扱い、二次的な画像は効率的に配信されるよう優先度を設定します。
- 公開前にメタデータ画像、altテキスト、ファイル名を確認しましょう。
そのワークフロー用のツールを選ぶなら、 ウェブ向け最適画像変換ガイド はローカルとオンラインの選択を解説しています。
ウェブ画像最適化チェックリスト
- 重要なページは書き出し前に明確な画像役割計画があります。
- 強力な選択的フォーマットが必要な場合を除き、WebPが日常的なウェブ画像を担当します。
- 大きな写真画像は追加圧縮効果が見込める場合のみAVIFを使います。
- ヒーロー画像はレイアウトに合わせてサイズ調整され、LCP要素の場合は遅延読み込みしません。
- カードやハブ画像はページのヒーローより小さいバリアントを使います。
- Open Graph画像は共有やプレビュー用に存在します。
- 構造化データには関連する主要画像が含まれます。
- レイアウトシフト防止のため幅と高さが指定されています。
- altテキストとファイル名は画像の役割を明確に説明します。
- ワークフローは一貫しており、同じミスが次回公開時に繰り返されません。