Web ページを速くする画像最適化チェックリスト
2026 年 7 月 28 日確認
Boltpic
現在の Boltpic ツールの動作を説明し、関連する技術資料へリンクしています。画像・ブラウザ・端末によって変わる結果は、固定値ではなく条件とともに示します。
画像はページの転送量と LCP に大きく影響します。とくにファーストビューの大きな画像が表示サイズより過大だったり、ブラウザから見つかるのが遅かったりすると、主要コンテンツが見えるまでの時間が延びます。
次の項目は一般的な作業順です。ページ構成によって効果が異なるため、変更前後の実測値を比較してください。
1. 表示サイズに合わせて書き出す
Web で最もよくある無駄は、400 ピクセルの枠に 4,000 ピクセルの写真を押し込むことです。ブラウザは表示できる量の 10 倍をダウンロードさせられます。ファイルは表示サイズの近く(高精細画面向けに2倍まで)に縮小し、レイアウトが可変なら複数サイズからブラウザに選ばせましょう。
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="夕暮れの港"
/>このマークアップなら、ブラウザが画面幅とピクセル密度に合う候補を選びます。小さな画面が不必要に大きなファイルを受け取らずに済み、実際の削減量は候補画像とレイアウトによって変わります。
2. すべての画像に width と height を
ブラウザが画像の寸法を事前に把握できないと、ファイルの読み込み時に周囲の内容が移動することがあります。この動きは Cumulative Layout Shift（CLS）に影響します。width・height 属性を指定するか、CSS で aspect-ratio を確保し、画像の読み込み前から必要な領域を予約してください。
3. 画面の下にある画像を遅延読み込みする
loading="lazy" は、表示領域から遠い画像の取得を遅らせるようブラウザに伝えます。長いページの初回リクエストを減らすのに役立ち、現在の主要ブラウザで利用できます。
ファーストビューの主要画像に遅延読み込みを一律で設定しないでください。その画像が LCP 要素なら、読み込みを遅らせることで指標が悪化する場合があります。LCP 画像と確認できた場合は即時読み込みにし、測定で必要性を確認したうえで fetchpriority="high" を検討します。
4. 容量の予算を決め、フォーマットで達成する
容量の予算は、ページの速度目標と画像の役割に合わせて決めます。最初の点検ではヒーロー 200KB、記事画像 100KB、サムネイル 30KB を出発点にできますが、普遍的な上限ではありません。写真は WebP または JPG、文字や透過が重要な画像は PNG で書き出し、実際のページ上で品質を確認してください。
5. キャッシュ方針を設定する
バージョン管理された画像には、配信方法に合うキャッシュ期間を設定します。photo.a1b2c3.webp のようにファイル名へ内容のハッシュを含めると、更新時に新しい URL を配信できます。CDN は静的画像の転送遅延を減らせますが、効果は利用者の地域、キャッシュヒット率、配信構成によって異なります。
開発者ツールで確認する手順
- 開発者ツール → Network で「Img」フィルタを有効にし、再読み込みして転送サイズ順に並べます。大きなファイルから表示サイズと形式を確認してください。
- 上位のファイルが表示サイズより大きすぎる場合はリサイズし、WebP または JPG で書き出して画質と容量を比べます。Boltpic のリサイズ・圧縮・変換ツールならブラウザ内で処理できます。
- モバイルで最大の画像を確認。誤って遅延読み込みになっていないか、width/height は付いているか。
- 修正後に Lighthouse の画像サイズ・形式に関する診断を確認します。診断名や表示される項目は Lighthouse のバージョンによって異なる場合があります。
公開後も同じ点検を繰り返してください。ネットワーク条件、レスポンシブ画像の候補、ページ構成によって各変更の効果は変わります。