1. 最適化の前に画像を分類する
テンプレートごとに画像を棚卸しします。各画像の役割、最大／最小のレンダリング幅、初期ビューポート内かどうか、小さい画面で別のクロップが必要かを記録します。これによりファイルサイズの作業が、重要なページでテスト可能な意思決定になります。
写真はレビューした可逆的でない圧縮（ロッシー）に耐えることが多いです。ロゴ、インターフェイスのシンボル、線画、チャートは SVG やシャープなエッジを保護するラスタ形式が向くことがあります。SVG は線画、ダイアグラム、チャートに適しますが、詳細な写真には向きません。
重要なディテールを保持し、画像の目的を伝えるテキストも提供すること。
空の代替テキスト（alt=""）を使い、重要情報の唯一の情報源にしないこと。
ピクセルの説明ではなく、行為や遷移先を示す名前にすること。
2. レンダリングされるスロットに合わせてサイズを決め、レスポンシブ候補を用意する
内在的な寸法は CSS のスロットに合わせます。デスクトップ用の大きなファイルを細いカードで使うと転送が無駄になりますし、小さなラスタを大きく引き伸ばすとぼやけます。デバイスピクセル比を考慮しますが、すべての画面が最大候補を必要とするとは限らないので視覚的に検証してください。
1つの構図を複数の幅で使う場合は、srcset の幅ディスクリプタ（w）と sizes を使って実際のスロット幅を宣言します。ブラウザが候補を選びます。アートディレクション（画面幅ごとに別のクロップが必要な場合）は picture を使います。picture の中でも img に src と alt のフォールバックを残してください。
同じ構図でピクセル寸法だけを変える場合。
スケール時にメッセージが隠れるために別のクロップや構図が必要な場合。
レスポンシブ属性を使わないクライアントのために img の src を残すこと。
3. 画像特性に応じてフォーマットと圧縮を選ぶ
WebP と AVIF はラスタ転送を減らせますが、フォーマットが品質を保証するわけではありません。代表的な顔写真、細かなテクスチャ、ブランドグラデーション、焼き込まれたテキスト、透過をテストしてください。写真のフォールバックとして JPEG は依然一般的で、PNG はロスレスのラスタ詳細や透過に向くことがあります。AVIF のサポート状況と配信スタックでの運用適合性を確認してください。
ロッシー（非可逆）圧縮は情報を削ってバイトを節約し、詳細が多い写真のほうがシャープな線やテキストより許容されやすいことが多いです。ロスレスはエンコードされたピクセルを保護しますが節約量は少ないことがあります。品質は数値設定ではなく、レンダリングサイズでの並べ比較で決めてください。向き、色、ワークフローの必要性を確認するまではメタデータを削除しないでください。
表示サイズでロッシーの AVIF、WebP、JPEG の比較を行うこと。
適切な SVG を優先するか、シャープなラスターエッジをテストで保護すること。
配信するすべてのフォーマットとフォールバックでアルファの見え方を確認すること。
4. マークアップで速度とレイアウト安定性を守る
すべてのコンテンツ用 img に内在的アスペクト比と一致する width と height 属性を与えます。ブラウザはファイル到着前にスペースを確保でき、レイアウトの移動を減らします。表示サイズは引き続き CSS で設定できます。
loading=lazy は初期ビューポート外だけに使います。読み込み時に表示される可能性が高い画像、特に Largest Contentful Paint（LCP）候補を遅延読み込みしてはいけません。fetchpriority=high は相対的なヒントに過ぎないので節度を持って使い、結果を測定してください。代替テキストや画像の検出が必要なコンテンツには HTML の画像マークアップを使ってください。Google は CSS 背景画像を（同様には）インデックスしないと文書化しています。
遅延読み込みギャラリー画像を含め、width と height を設定すること。
LCP になり得る画像はイーガーにし、リクエスト優先度を確認すること。
オフスクリーン画像は遅延読み込みし、制約ネットワークでスクロールをテストすること。
5. 意味、発見性、視覚品質を維持する
代替テキストは目的と文脈で決まります。情報画像には重要な情報を説明し、装飾用途なら alt="" を使い、リンクやボタンの画像はその機能を記述してください。複雑なチャートやダイアグラムには近隣テキストで同等の説明を提供します。キーワードの羅列は避けてください。
検出可能なコンテンツ画像には標準の HTML 画像要素、関連する近接テキスト、実践的な短い記述的ファイル名、そしてレスポンシブマークアップとフォールバックソースを使います。装飾的な背景を検出性のためだけに冗長なコンテンツに変えないでください。
圧縮ファイルを最大・最小意図サイズでレビューすること。
可能なら通常のテキストを使い、そうでなければ同等の文言を提供すること。
情報画像は関連するページテキストの近くに配置すること。
6. アセットだけでなくページ全体を検証する
代表的なページを狭い／広いビューポートでテストします。ブラウザ開発者ツールで srcset の選択、転送サイズ、レンダリング寸法、レイアウトの移動を確認します。ネットワークをスロットリングして遅いヒーロー画像やギャラリーを露わにします。書き出し比較だけでは、sizes の誤り、予期せぬクロップ、本番での変換問題を露見できないことがあります。
可能ならラボとフィールドの指標を使ってください。Lighthouse と PageSpeed Insights は不適切なサイズの画像を指摘できます；フィールドの LCP は実際の訪問を反映します。同じテンプレート、デバイスクラス、リリースバージョン、計測窓で比較してください。サーバ時間、スクリプト、フォント、サードパーティの変更も指標に影響するので、画像だけを要因にしないでください。共有テンプレート変更はステージングして、検証が終わるまでロールバック経路を維持します。
スロットが予期せぬ過大な候補を選択しないことを確認する。
クロップ、鮮明さ、色、代替、レイアウト安定性をチェックする。
オーナー、期待する指標、巻き戻しパスを明記する。