srcset and sizes
srcset 属性と sizes 属性は、異なる画面サイズや解像度に最適な画像を自動選択するレスポンシブ画像を実現します。
概要
srcset 属性と sizes 属性は、異なる画面サイズや解像度に最適な画像を自動選択するレスポンシブ画像を実現します。
対応ブラウザ
デスクトップ
Chrome 38+
Edge 13+
Safari 10.1+
Firefox 38+
モバイル
Chrome Android 38+
Safari iOS 10.3+
Firefox Android 38+
基本構文
HTML
<!-- 解像度ベース -->
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x"
alt="レスポンシブ画像">
<!-- ビューポート幅ベース -->
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="レスポンシブ画像">実務での使いどころ
-
srcset and sizes の活用
レスポンシブ画像のための srcset と sizes 属性。デバイスに最適な画像を提供。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。