🗜️
← ガイド一覧に戻る

Webパフォーマンスのための画像最適化方法

· タグ: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

Webパフォーマンスのための画像最適化方法

画像は、一般的なWebページの総ダウンロードバイト数の50〜60パーセントを占めます。最適化されていない画像は1枚ごとに読み込み時間を数秒追加し、直帰率を高め、検索エンジンのランキングを損なう可能性があります。GoogleのCore Web Vitals — 特にLargest Contentful Paint（LCP）— は画像の読み込みパフォーマンスを直接測定するため、画像最適化はWebサイトに施せる最も影響力の大きい変更の1つとなります。

このガイドでは、圧縮の基本から高度な配信テクニックまで、完全な画像最適化戦略を説明します。

1. 公開前にすべての画像を圧縮する

カメラ、スマートフォン、デザインツールから生の画像を直接アップロードしないでください。圧縮は公開ワークフローの最初のステップであるべきです。

主要な原則:

  • 写真は積極的な非可逆圧縮に耐えられます。JPEGとWebPでは品質80から始め、ファイルサイズの目標が必要ならば下方調整します。
  • スクリーンショット、ロゴ、グラフィックは可逆圧縮の恩恵を受けます。PNGと可逆WebPは、非可逆圧縮がぼかしてしまうシャープなエッジとテキストを保持します。
  • AVIFは最良の圧縮率を提供しますが、エンコードに時間がかかります。頻繁にダウンロードされ、まれに更新される画像に使用してください。
  • 不要なフォーマット変換による世代劣化を避けるため、元のフォーマットで圧縮します。

期待できる削減効果:

アップロード前に画像を圧縮する一般的なワークフローでは、知覚できる品質劣化を最小限に抑えながら、画像全体の重量を40〜80パーセント削減できます。

2. 適切な寸法で配信する

300ピクセル幅のコンテナに4000ピクセル幅の写真を配信することは、Web上で最も一般的なパフォーマンス上の誤りです。ブラウザは4000ピクセルすべてをダウンロードしてから縮小するため、帯域幅とメモリを浪費します。

複数のサイズバリアントを作成する:

  • モバイル画面用に幅320〜480ピクセル
  • タブレット用に幅768〜1024ピクセル
  • デスクトップディスプレイ用に幅1200〜1920ピクセル
  • 高密度Retinaディスプレイ（2x）用に幅2560ピクセル

最大のバリアントを、画像がレイアウトで表示される最大幅に合わせ、高DPI画面では2倍にします。

3. Srcsetでレスポンシブ画像を使用する

HTMLのsrcset属性とsizes属性は、ユーザーのビューポート幅とデバイスピクセル比に基づいて、ブラウザがダウンロードする画像サイズを指定します。

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

この単一のパターンだけで、目に見える品質の違いなしに、モバイルデバイスでの画像帯域幅を40〜60パーセント削減できます。

4. Largest Contentful Paint（LCP）を最適化する

LCPは、最大の表示要素 — 通常はヒーロー画像 — がレンダリングされるまでの時間を測定します。GoogleはLCPが2.5秒以下であることを良好と見なしています。

画像のLCPを最適化するには:

  • ブラウザが早期に発見できるよう、ヒーロー画像をプリロードします。ドキュメントのheadに<link rel="preload" as="image" href="hero.webp">を追加します。
  • ヒーロー画像を積極的に圧縮します — 通常、ブラウザがダウンロードする最初の、そして最大のアセットです。
  • ヒーロー画像にはJPEGフォールバック付きでWebPまたはAVIFを配信します。
  • ヒーロー画像のサイズを正しく設定します。1200ピクセルのヒーロースロットに4000ピクセルの画像を配信しないでください。
  • ヒーロー画像や、スクロールせずに見える範囲（above-the-fold）の画像は遅延読み込みしないでください。遅延読み込みはダウンロードを遅らせるため、LCPに悪影響を及ぼします。

5. スクロールして見える範囲（below-the-fold）の画像に遅延読み込みを有効にする

最初の画面で表示されない画像は、すぐに読み込む必要はありません。loading="lazy"属性は、画像がビューポートに近づくまで画像の読み込みを延期するようブラウザに指示します。

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

遅延読み込みは、画像の多いページで初期ページ重量を30〜50パーセント削減します。圧縮と組み合わせると、その効果は変革的です。

6. 画像メタデータを削除する

EXIFデータ — カメラ設定、GPS座標、タイムスタンプ — はすべての画像に不要なバイトを追加します。メタデータの削除により、視覚的な変化をまったく伴わずに、通常ファイルサイズの5〜15パーセントを節約できます。メタデータの削除を圧縮ワークフローの標準ステップにしてください。

7. コンテンツ配信ネットワーク（CDN）を使用する

CDNは画像を世界中のサーバーに分散配置し、ユーザーと画像の間の物理的な距離を短縮します。これにより、画像リクエストのTime to First Byteが改善されます。

一部のCDNはオンデマンドの画像変換も提供しています：

  • 自動フォーマットネゴシエーション（サポートされている場合はWebPまたはAVIFを配信）
  • デバイスとビューポートに基づく動的リサイズ
  • リアルタイムの圧縮調整

専用CDNが選択肢にない場合は、最低でもHTTP/2またはHTTP/3を使用して、単一の接続で複数の画像をダウンロードできるようにしてください。

8. 画像のデコードパフォーマンスを考慮する

大きな画像はダウンロードに時間がかかるだけでなく、デコードにも時間がかかります。ブラウザはレンダリング前にJPEG、PNG、WebP、AVIFデータを解凍する必要があります。JPEGとWebPはほとんどのデバイスで高速にデコードされますが、AVIFのデコードはより計算コストがかかります — 低スペックのモバイルデバイスでは考慮すべき点です。

重要でない画像にはdecoding="async"属性を使用して、他のコンテンツをブロックせずにデコードできるようにします：

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

最適化ワークフローの構築

エンドツーエンドの画像最適化パイプラインは次のようになります：

  1. 品質に適したツールを使用して、元のフォーマットで画像を圧縮します。
  2. 圧縮中にメタデータを削除します。
  3. 必要な表示寸法にリサイズし、複数のバリアントを作成します。
  4. HTMLテンプレートにsrcsetとsizesを実装します。
  5. ヒーロー画像をプリロードし、スクロールして見える範囲（below-the-fold）の画像はすべて遅延読み込みします。
  6. グローバルなパフォーマンスのためにCDNから配信します。
  7. LighthouseまたはPageSpeed Insightsを使用してLCPと画像全体の重量を測定します。
  8. パフォーマンス予算を満たすまで品質設定を繰り返し調整します。

今すぐ無料のオンライン画像圧縮ツールで画像の最適化を始めましょう。PNG、JPEG、WebP、AVIF形式の画像をアップロードして、本番環境で使用できる圧縮版をダウンロードできます — フォーマット変換なし、品質の妥協なしです。