HTML Tag Reference

srcset 属性

複数のイメージソースを指定する

srcset 属性は、picture 要素内で使用する source 要素や、img 要素において、複数のイメージソースを指定するために使用されます。値は 「カンマ（,）」 区切りで複数の画像候補の URL を指定する事ができます。

srcset 属性の値 （Image Candidate String） は下記のルールに従って記述できます。

  1. 0 個以上の空白文字
  2. イメージリソースの URL ： "," で開始、または終了しない、妥当な、空でない URL で、非インタラクティブを参照し、任意でアニメーション、ページ化もスクリプト化もされないイメージリソース
  3. 0 個以上の空白文字
  4. 次のうちどちらか一方、もしくは 0 個
    • 画面の横幅を指定する正の整数に加えて小文字で 「w」
    • デバイスピクセル比を指定する浮動小数点数に加えて小文字で 「x」
  5. 0 個以上の空白文字

さらに、media 属性 と組み合わせるなどして、複雑な指定も可能です。

srcset 属性の仕様

この属性を使用できる要素

srcset 属性のサンプルソース

<picture>
  <source srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" />
  <img alt="画像の説明" src="sample.png" />
</picture>
<p>
 <img
  src="sample.png"
  srcset="sample-480.png 480w,
          sample-640.png 640w,
          sample-1024.png 1024w"
  sizes="(max-width: 480px) 100vw, 80vw"
  alt="画像の説明"
 />
</p>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。