ウェブサイト画像を最適化：公開前にページをチェック

まずチェック

ブラウザが読み込むものから始める

デザインファイルやメディアフォルダは実際のユーザー体験を示しません。ブラウザは読み込む画像URL、表示サイズ、スペース確保の有無、大きなファイルが小さいファイルの代わりに使われているかを示します。

画像プラン

変換前に重要な画像ごとに計画を立てる

画像プランはこのガイドを変換ツールの記事と分けます。各画像領域に必要なサイズ、読み込み順、フォールバック、メタデータの役割、最終チェックを明確にします。

プランでファイルの新バージョンが必要なら画像変換ガイドで次のステップを選びます。通常のWebP変換はJPGからWebPへのガイドを使い、AVIFガイドはさらに圧縮が必要な大きな写真だけに使いましょう。

画像サイズ

各画像領域に明確なサイズを設定

レスポンシブ画像はHTMLがレイアウトに合っている場合のみ機能します。領域を測り、有用な幅を選び、アスペクト比を確保し、存在するからといって大きな元画像を送らないようにしましょう。

簡単なチェック：360pxのカードが2400pxのファイルを読み込むなら、圧縮が問題ではありません。小さい画像版が必要か、HTMLが誤ったファイルを指しています。

読み込み順

最初の画像は意図的に読み込む

最初の画面を形作る画像は、ページ下部の画像とは異なるルールが必要です。LCPになりそうな画像を特定し、誤って遅延読み込みしないようにし、下部の画像は必要になるまで控えめにしましょう。

1. 1

   LCP画像に名前を付ける

   最初の重要な画像がLargest Contentful Paintになる可能性がある場合、誤って遅延読み込みしないようにしましょう。

2. 2

   下部の画像は控えめに

   最初のビューポート外の画像は通常、遅延読み込みと非同期デコードを使います。

3. 3

   CSS背景の確認

   トリミングされた背景でも大きなファイルをダウンロードすることがあります。表示領域に合ったサイズのファイルを使いましょう。

4. 4

   繰り返しリクエストの確認

   同じ大きすぎるファイルが何十回も繰り返されると、小さなカード画像でも負荷が高くなります。

HTML

測定した領域にレスポンシブHTMLを使う

重要な画像はブラウザの選択を明確にします。以下の例は幅の選択肢、サイズ、固定寸法、フォールバックを示します。習慣ではなく領域に応じて読み込み挙動を変えましょう。

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="アップロードの流れを示すダッシュボードのスクリーンショット"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

検索と共有

画像、altテキスト、メタデータで一貫した内容を伝える

画像SEOは単なるキーワード追加ではありません。表示画像、近くのテキスト、有用なaltテキスト、Open Graphタグ、JSON-LD画像リンクは同じページを明確に表現すべきです。装飾画像は装飾のままに。

チェックでソーシャルプレビューが弱い場合はオープングラフのイメージガイドを使い、スキーマやメタタグが問題ならBlazorのメタデータガイドでJSON-LDとページメタデータの整合性を保ちます。

手順

各ページの簡単な画像チェック

1. 1

   実際のページを開く

   アセットフォルダではなく現在のURLから始め、実際に読み込まれる画像を記録しましょう。

2. 2

   画像プランを作成

   重要な画像ごとに目標幅、アスペクト比、読み込み順、フォールバック、メタデータの役割を記録します。

3. 3

   変更部分だけ変換

   メディアフォルダ全体を再エクスポートせず、チェックで見つかったファイルだけ変換ツールを使いましょう。

4. 4

   HTMLとメタデータを更新

   srcset、sizes、寸法、Open Graph、JSON-LDの画像リンクを準備したファイルに向けましょう。

5. 5

   ブラウザ出力を検証

   ページ、ネットワークリクエスト、ソーシャルメタデータ、構造化データ、モバイルレイアウトを確認します。

6. 6

   次回のためにルールを残す

   画像の決定事項を記録し、将来の更新時に推測から始めないようにします。

チェックリスト

公開前の画像チェックリスト

記事、ランディングページ、商品ページ公開前にこのリストを使いましょう。変換だけでは見逃す問題を検出します。