HTML <source> srcset 属性

HTML <source> タグ

定義と使用方法

srcset 属性は異なる状況で使用される画像の URL を指定します。

<source> が使用される場合、 <picture> この属性は必須です。

例

二つのソースファイルとバックアップ画像を含む <picture> 要素：

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

自分で試してみる

文法

<source srcset="URL">

属性値

値 説明
URL

画像の URL を指定します。

可能な値：

  • 絶対的な URL - 別のウェブサイトへのリンク（例：href="http://www.example.com/flower.jpg"）
  • 相対的な URL - ウェブサイト内のファイルへのリンク（例：href="flower.jpg"）

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0

HTML <source> タグ