画像は『最も簡単に削れる転送量』
多くのサイトで転送量の半分以上が画像です。本記事では編集部の視点で、画像最適化の実務を公開情報をもとに整理します。Web Vitals 最適化 もご参考に。
画像フォーマットの選択
(1) WebP：旧JPEG/PNG の置換。広くサポート。(2) AVIF：さらに高効率・Safari は新しめのみ対応。(3) JPEG XL：高品質・サポート限定。(4) SVG：アイコン/ロゴ向け。(5) picture 要素：複数フォーマット併用。最新の対応状況は公式情報をご確認ください。
レスポンシブ画像
(1) srcset：複数解像度版。(2) sizes：表示サイズの指定。(3) 1x/2x/3x：DPR 別の準備。(4) art direction：画面サイズ別に別画像。(5) next/image等のフレームワーク機能。
遅延読み込み
(1) loading="lazy"：標準属性。(2) Intersection Observer：細かい制御。(3) priority hint：ファーストビューは fetchpriority="high"。(4) placeholder：blur/skeleton。(5) LCP 候補画像は遅延しない。
CDN 変換
(1) Cloudflare Images：URL ベース変換。(2) Vercel Image Optimization。(3) imgix / Cloudinary：高機能 SaaS。(4) S3 + CloudFront + Lambda：自前構築。(5) キャッシュ戦略：転送量削減。CDN/Edge 実践 もご参考に。
圧縮設定
(1) WebP quality 75〜85：見た目と容量のバランス。(2) AVIF quality 50〜70：WebPより少し低めでも十分高品質。(3) chroma subsampling：色情報を間引く。(4) メタデータ削除：EXIF 等。(5) ビルド時 vs リクエスト時：用途で選ぶ。
運用上の注意点
(1) 原本管理：S3 等で別管理。(2) キャッシュ無効化：版管理 or ハッシュ URL。(3) 個人情報の混入：アップロード前に検査。(4) コスト監視：CDN 変換のコスト。(5) アクセシビリティ：alt 属性必須。
失敗しがちなパターン
(1) 原本そのまま配信：数MB の画像で表示遅延。(2) レスポンシブ未対応：モバイルで重い。(3) LCP 画像を遅延読込：CWV 悪化。(4) キャッシュ無効化なし：差し替えが反映しない。(5) alt 属性なし：SEO/アクセシビリティ低下。対策は、(1)CDN 変換、(2)srcset/sizes、(3)priority、(4)版管理、(5)コンテンツ別alt、です。