Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<picture> / <source>

『picture』と『source』は、デバイスの画面サイズや解像度・フォーマットに応じて異なる画像を切り替えて表示するための要素です。

構文

<!-- mediaクエリで画像を切り替える -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="説明テキスト">
</picture>

<!-- 画像フォーマットを切り替える（WebP対応ブラウザ優先） -->
<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="説明テキスト">
</picture>

主な属性

属性	概要
srcset	使用する画像のURLを指定します。幅記述子（例: 2x）や解像度記述子（例: 800w）を組み合わせて複数指定できます。
sizes	表示する画像の幅をメディア条件と組み合わせて指定します。ブラウザが最適な画像を選ぶ際の手がかりになります。
media	メディアクエリを指定します。条件にマッチした最初の『source』要素が使用されます。
type	画像のMIMEタイプ（例: image/webp, image/avif）を指定します。ブラウザが対応していない場合はスキップされます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pictureサンプル</title>
</head>
<body>

  <!-- 画面幅に応じて画像を切り替える -->
  <picture>
    <source media="(min-width: 800px)" srcset="hero-large.jpg">
    <source media="(min-width: 400px)" srcset="hero-medium.jpg">
    <!-- どの条件にも当てはまらない場合のフォールバック -->
    <img src="hero-small.jpg" alt="ヒーロー画像">
  </picture>

  <!-- WebPを優先し、非対応なら通常のJPGを表示 -->
  <picture>
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="写真">
  </picture>

</body>
</html>

実行結果

ブラウザの画面幅が800px以上なら「hero-large.jpg」、400px以上なら「hero-medium.jpg」、それ以外なら「hero-small.jpg」が表示されます。WebP対応ブラウザでは「photo.webp」、非対応なら「photo.jpg」が表示されます。

<!-- 画面幅 800px 以上のとき -->
<img src="hero-large.jpg" alt="ヒーロー画像"> が表示される

<!-- 画面幅 400px 以上 800px 未満のとき -->
<img src="hero-medium.jpg" alt="ヒーロー画像"> が表示される

<!-- 画面幅 400px 未満のとき -->
<img src="hero-small.jpg" alt="ヒーロー画像"> が表示される

概要

『picture』要素はレスポンシブデザインにおける画像切り替えを実現するためのコンテナ要素です。内部に複数の『source』要素を記述し、最後に必ず『img』要素を置きます。『img』要素はフォールバックとして必須です。省略するとブラウザが何も表示しない場合があります。

『source』要素の『media』属性と『type』属性は組み合わせて使うことができます。ブラウザは上から順に条件を評価し、最初にマッチした『source』を使用します。『type』属性でWebPやAVIFなどの新しい画像フォーマットを優先的に使うようにすると、ファイルサイズを削減してページの読み込みを高速化できます。

単純なRetinaディスプレイ対応であれば、『img』要素の『srcset』属性だけで対応できる場合もあります。用途に応じて使い分けてください。