カテゴリー:
レスポンシブ画像
閲覧数:815 配信日:2015-08-06 20:14
imgタグのsrcset属性
HTML5で新しく追加
・記述するimg要素は1つだけで、Media Queries(メディアクエリ)を使用した画像切り替えと同等機能が実現可能
特徴
・対応しているブラウザは必要ない画像をダウンロードしない
・ファイル名のみでxデスクリプタ記述がない場合、そのファイルは 1x が指定されたものとみなされる
導入すると出来るようになること
・Retinaディスプレイ用に画像を切り替え
・ウィンドウサイズに合わせて画像を切り替え
コンマ区切りで画像とその画像が読み込まれる条件を指定
・画像がひとつの場合は、そのファイルのパスを指定（例：srcset="kitten.png"）
・画像を複数指定する場合は、ファイルのパスとピクセル密度デスクリプタの組み合わせを、カンマで区切って指定（例：srcset="kitten.png, kitten@2X.png 2x"）
・ファイル名のみでデスクリプタがない場合、そのファイルは 1x が指定されたものとみなされる
特徴
・src画像は読み込まない
サイズ指定
・widthとheightを指定しなくとも、’2x’というサイズ指定から自動的に1/2に縮小して表示する
x記述子
・srcset属性に、1.5xや2.0xといったx記述子（descriptor）を画像URLとペアにして記述することで、それぞれのピクセル比（device-pixel-ratio）で表示したい画像を指定可能
ブラウザ対応状況
・IE 未対応
・Edge 部分的なサポート
・解像度の切り替え（X記述子を使用して）するための構文のサブセットではなく、（W記述子を使用して）のサイズで使用できる完全な構文をサポートしています。
Supports the subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
・ブラウザ対応一覧