【レスポンシブWebデザイン】srcset属性

srcset属性とは

• 高解像度の画面に画像を対応させるための技術の１つ
• ディスプレイの解像度や幅に合わせて、ブラウザが最適な画像を読み込む

src属性の書式

srcset属性には複数の画像を指定できる。

記述①　解像度によって画像を切り替える場合

• ディスプレイの解像度を指定する場合には、「x」をつけた数値を使用する
• デバイスピクセル比が2:1のときは「2x」に相当する
• 解像度指定を省略した場合は「1x」が規定値となる

記述②　解像度によって画像を切り替える場合

• ブラウザの幅を指定する場合には、「w」をつけた数値を使用する
• 「w」は「px」を表す