HTML要素 ・ リンク・画像
<picture>
条件に応じて画像を切り替える
画面幅や対応形式に応じて、表示する画像を切り替えるための要素です。中に source と img を入れて使います。
01
サンプルコード
HTML
1<picture>
2 <source media="(min-width: 600px)" srcset="photo-wide.jpg">
3 <img src="photo.jpg" alt="店内の様子" width="320" height="200">
4</picture>
CSS
1img {
2 max-width: 100%;
3 height: auto;
4}
02
実行結果
ブラウザでの表示プレビューの幅が600px以上のときは photo-wide.jpg が表示されます
03
解説
picture は、条件に合った画像を1つだけ選んで表示する仕組みです。上から順に source の条件を調べ、最初に合ったものの画像が使われます。
media 属性には @media と同じ書き方で条件を書きます。どの条件にも合わないときは、最後の img の画像が表示されます。
img は必ず最後に書きます。alt や width・height も img 側に書きます。
04
応用例・注意点
source の主な属性
| 属性 | 説明 |
|---|---|
srcset | 使う画像ファイル |
media | 画面幅などの条件（@media と同じ書き方） |
type | 画像形式（image/webp など）。対応していれば使われる |
sizes | 画像の表示幅のヒント |
WebP を優先して読み込む
WebP に対応したブラウザでは軽い WebP を、それ以外では JPEG を表示します。
HTML
1<picture>
2 <source type="image/webp" srcset="photo.webp">
3 <img src="photo.jpg" alt="店内の様子" width="320" height="200">
4</picture>
注意点
- 01img を書き忘れると何も表示されません。
- 02同じ画像のサイズ違いを出し分けるだけなら、img の srcset と sizes でも実現できます。