# レスポンシブ画像を完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： レスポンシブ画像の技術を完全に理解し、あらゆるデバイスと解像度に最適化された画像表示を実現できるようになる ## 説明してほしい内容： ### 1. レスポンシブ画像の基本概念 - **レスポンシブ画像とは何か** - **固定サイズ画像の問題点** - **パフォーマンス**への影響 - **ユーザー体験**の向上 ### 2. CSSによる基本的なレスポンシブ画像 - **max-width: 100%**の仕組みと効果 - **height: auto**との組み合わせ - **width: 100%**との違い - **aspect-ratio**プロパティの活用 - **object-fit**プロパティの詳細 - contain：アスペクト比を保持して収める - cover：アスペクト比を保持して覆う - fill：要素全体を埋める - scale-down：縮小のみ適用 - none：変形なし ### 3. HTMLによる高度なレスポンシブ画像 - **srcset属性**の使い方 - 解像度による切り替え（1x, 2x, 3x） - 幅による切り替え（w記述子） - **sizes属性**の設定方法 - ビューポート幅に応じた指定 - メディアクエリとの組み合わせ - **picture要素**の活用 - アートディレクション対応 - 異なる画像の切り替え - フォーマット対応（WebP, AVIF等） ### 4. 背景画像のレスポンシブ対応 - **background-size**プロパティの活用 - cover：画面を覆う - contain：全体を表示 - 数値指定：カスタムサイズ - **background-position**での位置調整 - **メディアクエリ**での背景画像切り替え - **CSS image-set()**関数の使用 ### 5. 高解像度ディスプレイ対応 - **Retinaディスプレイ**の特徴 - **デバイスピクセル比**の理解 - **2x、3x画像**の準備と提供 - **resolution**メディアクエリの活用 - **パフォーマンス**との兼ね合い ### 6. 実践的な最適化テクニック - **画像フォーマット**の選択 - JPEG：写真に最適 - PNG：透明度が必要な場合 - WebP：次世代フォーマット - AVIF：最新の高効率フォーマット - **遅延読み込み**（lazy loading） - **プレースホルダー**の活用 - **画像圧縮**の最適化 ### 7. パフォーマンス最適化 - **適切な画像サイズ**の選択 - **帯域幅**の考慮 - **Core Web Vitals**への影響 - **CDN**の活用 - **画像配信の最適化** ## 回答形式： - 各技術ごとに具体的なコード例を提示 - Before/After（最適化前後）の比較 - 実際に試せる完全な実装例 - パフォーマンス測定の方法も含める