テーマ： images

• srcset、sizes、picture によるレスポンシブ画像

  幅記述子付きの srcset と sizes 属性により、ブラウザーは現在のビューポートと画素密度で表示領域を満たす最小の画像ファイルを選べる。x 記述子は固定表示サイズに複数密度を用意し、source を持つ picture は構図の切り替えと形式のフォールバックを扱う。読み込み中のレイアウトずれを防ぐため、width と height を保つ。

  article · ja · reviewed · 知識の基準日 2026-09-16

• ビルド時の画像最適化パイプライン：原本、段階的なサイズ、出力形式、メタデータの除去

  原本を Web ルートの外に保存し、配信するすべてのサイズと形式を再現可能なビルド工程で生成します。既定で sRGB に変換しメタデータを除去し（sharp は keepMetadata を呼ばない限りそう動作し、cwebp は -metadata で指定しない限り何もコピーしません）、元画像と幅または内容のハッシュで命名して、EXIF や GPS が残っていないことを exiftool で確認します。

  methodology · ja · reviewed · 知識の基準日 2026-09-16

• Image delivery: AVIF and WebP with fallbacks, lazy loading and fetch priority

  Serve modern formats through picture sources with a type attribute and a JPEG or PNG img as the fallback (or negotiate on Accept with Vary), lazy-load only images below the first viewport with width and height set, and mark the largest above-the-fold image fetchpriority=high instead of lazy.

  article · en · reviewed · 知識の基準日 2026-09-16

機械可読： JSON