画像・メディアリソースガイドライン
画像フォーマット
WebP・AVIFの選定基準、複数フォーマット対応、レスポンシブ画像の実装
次世代画像フォーマットの選定
現代のブラウザサポート状況を考慮し、以下の優先順位で画像フォーマットを選定してください。
推奨フォーマット
- WebP: 第一選択。JPEG・PNG に比べて 25-35%のファイルサイズ削減が可能
- AVIF: 最新フォーマット。WebP よりもさらに高い圧縮率（対応ブラウザが限定的）
従来フォーマット（フォールバック用）
- JPEG: 写真・グラデーションが多い画像
- PNG: 透明度が必要な画像、シンプルなグラフィック
- SVG: アイコン、シンプルなイラスト、ロゴ
フレームワークを使用しない案件やデザインが PC のみの案件では、すべての画像に複数フォーマット対応やレスポンシブ対応を行うのは現実的ではありません。
条件に応じて適切な実装レベルを選択してください。
条件に応じて適切な実装レベルを選択してください。
複数フォーマット対応
picture タグ使用時は、最新・高圧縮率のフォーマットから順番に記述してください
<picture>
<source srcset="/images/hero.avif" type="image/avif" />
<source srcset="/images/hero.webp" type="image/webp" />
<img src="/images/hero.jpg" alt="" width="800" height="600" />
</picture>
フォーマットの優先順位
- AVIF (最高圧縮率・最新)
- WebP (広いブラウザサポート・高圧縮率)
- JPEG/PNG (全ブラウザサポート・フォールバック)
適切な画像サイズ設定
- デスクトップ: 最大表示サイズの 2 倍解像度まで
- モバイル: デバイスピクセル比を考慮した適切なサイズ
- ファイルサイズ: 1 画像あたり 500KB 以下を目安
レスポンシブ対応
フレームワーク等の画像最適化機能を利用する場合
<img
src="/images/product-800.webp"
srcset="
/images/product-400.webp 400w,
/images/product-800.webp 800w,
/images/product-1200.webp 1200w
"
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
alt="商品画像"
width="800"
height="600"
loading="lazy"
/>
フレームワーク等の最適化機能が利用できない場合
<!-- ✅ デスクトップとモバイルの2サイズ -->
<img
src="/images/product-800.webp"
srcset="/images/product-400.webp 400w, /images/product-800.webp 800w"
sizes="(max-width: 768px) 400px, 800px"
alt="商品画像"
width="800"
height="600"
loading="lazy"
/>
<!-- または、PCデザインのみの場合 -->
<img
src="/images/product.webp"
alt="商品画像"
width="800"
height="600"
loading="lazy"
/>