画像・メディア

`<picture>` 画面に合わせて画像を切り替える

重要度4 / 5

意味

画面の幅や、ブラウザが対応する画像形式に合わせて、画像を切り替える場合に使います。候補は <source> で書き、最後に <img> を置きます。代替テキストは <img> の alt に書きます。

コード

HTML

<picture>
  <source srcset="/images/sp-frame.png" media="(max-width: 767px)">
  <img src="/images/pc-frame.png" alt="パソコンの画面の枠" width="600" height="400">
</picture>

プレビュー（初期表示）

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	38〜
Firefox	38〜
Safari	9.1〜
Edge	13〜
Chrome Android	38〜
Safari iOS	9.3〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）