Webサイトの画像を速く読み込ませる方法（ぼやけさせずに）

画像の重さが重要な理由

ページで最も遅いのは、通常はその最大の画像であり、ブラウザがLargest Contentful Paint（LCP）として測定するのはそれであることが多いです。GoogleのCore Web Vitalsでは、LCPが2.5秒未満なら良好とされます。モバイル回線では、3 MBのヒーロー写真1枚だけで、その予算をすべて使い果たすことがあります。

1. 画像は表示されるサイズで配信する

幅800ピクセルで表示する場所に4000ピクセルの写真を送っても意味がありません。実用的な目安として、画像は表示幅のせいぜい約2倍にとどめます。それで高密度ディスプレイでもシャープに保てます。一般的な幅：全幅のヒーローには1600〜2000 px、記事内の画像には800〜1200 px、サムネイルには300〜400 px。

2. 最新のフォーマットを使う

WebPファイルは、同程度の画質でJPGより通常25〜35%小さく、現在のすべてのブラウザが対応しています。PNGは、可逆のグラフィックや透過が必要な場所にだけ使います。古いソフトウェアに対応する必要があるなら、フォールバックとしてJPGを用意します。詳細はJPG・PNG・WebPの比較を参照してください。

3. 妥当な容量に圧縮する

これらはおおよその目標であって、ルールではありません：ヒーロー画像は約200 KB未満、記事内の画像は約100 KB未満、サムネイルは約30 KB未満。スライダーを勘でいじるのではなく、目標を設定して、それを満たす最高の画質をツールに探させましょう。

4. ファーストビューより下の画像は遅延読み込みする

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

遅延読み込み（lazy loading）は、訪問者がその近くまでスクロールするまで画像の読み込みを延期します。ページ最上部のヒーロー画像には適用しないでください — それはすぐに読み込まれるべきです。通常、それがLCP要素だからです。

5. 常に幅と高さを指定する

HTMLに寸法があれば、ブラウザは画像が届く前に適切な量のスペースを確保するため、読み込み中にページがジャンプしません（このジャンプはCumulative Layout Shiftとして測定されます）。説明的なalt属性は、アクセシビリティと画像検索の助けになります。

6. srcsetで複数のサイズを用意する

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

ブラウザは、訪問者の画面に十分シャープな最小のファイルを選ぶので、スマートフォンがデスクトップ版をダウンロードすることはありません。

作業の確認方法

ページをPageSpeed Insights、またはChrome DevToolsのLighthouseにかけてください。どちらも、大きすぎる画像や最適化されていない画像を指摘し、削減できる正確なバイト数を見積もります。

ファイルの準備

1. 画像をWebPに変換します。
2. 必要な幅をリサイズツールで設定します — 比率はロックしたまま。
3. 最大ファイルサイズを設定し、結果をビフォー/アフタースライダーで確認します。
4. srcsetで使いたい幅ごとに1ファイルずつ書き出します。

書き出しのたびに、元のファイルから作業してください。すでに圧縮されたコピーを再圧縮すると、元を一度圧縮するより多くの画質が失われます。

よくある質問