<picture> / <source>

対応:		HTML5（2014）

『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）を指定します。ブラウザが対応していない場合はスキップされます。

サンプルコード

sample_picture_source.html

<!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 style="margin: 20px;">

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

  <!-- 新フォーマット優先：AVIF → WebP → JPG の順で試みる -->
  <picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="写真">
  </picture>

  <!-- srcsetで解像度ごとに画像を切り替える（Retina対応） -->
  <picture>
    <source
      srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
      sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px">
    <img src="hero-800.jpg" alt="ヒーロー画像">
  </picture>

</body>
</html>

実行結果

ブラウザの画面幅が800px以上なら「large」、400px以上なら「medium」、それ以外なら「small」の画像が表示されます。ブラウザの幅を変えると画像が切り替わります。

サンプルページはこちら

概要

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

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

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

対応ブラウザ

デスクトップ

Chrome

38 以降 ○

37 以前 ×

Firefox

38 以降 ○

37 以前 ×

Safari

9.1 以降 ○

8.1 以前 ×

Edge

13 以降 ○

非対応 ×

Opera

25 以降 ○

24 以前 ×

モバイル

iOS Safari

9.3 以降 ○

8.3 以前 ×

Android Browser

38 以降 ○

37 以前 ×

Chrome Android

WebP/AVIFフォーマットの優先順位

『<picture>』を使えば、ブラウザのフォーマット対応状況に応じて最適な画像を選択させることができます。AVIFが最も圧縮率が高く、非対応のブラウザにはWebP、さらに非対応ならJPEGと自動でフォールバックします。

<!-- 画像フォーマットの優先順位制御 -->
<picture>
  <!-- 1. AVIFに対応していればAVIFを使う（最高圧縮率） -->
  <source srcset="hero.avif" type="image/avif">
  <!-- 2. WebPに対応していればWebPを使う（高圧縮率・広く対応） -->
  <source srcset="hero.webp" type="image/webp">
  <!-- 3. どちらも非対応なら従来のJPEGにフォールバック -->
  <img src="hero.jpg" alt="サイトのヒーロー画像" width="1200" height="600">
</picture>

<!-- レスポンシブ + フォーマット最適化を組み合わせる -->
<picture>
  <!-- スマートフォン向け（最大480px幅）：縦長画像 -->
  <source media="(max-width: 480px)" srcset="banner-sp.webp" type="image/webp">
  <source media="(max-width: 480px)" srcset="banner-sp.jpg">
  <!-- デスクトップ向け：横長画像 -->
  <source srcset="banner-pc.webp" type="image/webp">
  <img src="banner-pc.jpg" alt="バナー画像" width="1200" height="400">
</picture>

フォーマット	圧縮率	主要ブラウザ対応	特徴
AVIF	最高	Chrome/Firefox/Safari 16+	次世代フォーマット。IE非対応
WebP	高い	Chrome/Firefox/Safari 14+	JPEGより約30%軽い。広く普及
JPEG	普通	全ブラウザ	写真に最適。フォールバック用
PNG	低い	全ブラウザ	透過画像・ロゴに最適

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典

<picture> / <source>

構文

主な属性

サンプルコード

sample_picture_source.html

実行結果

概要

対応ブラウザ

WebP/AVIFフォーマットの優先順位