Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<picture>

<picture> は HTML の要素で、0 個以上の <source> 要素と 1 つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

ブラウザーは複数の <source> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <picture> 要素に対応してない場合、 <img> 要素の src 属性で指定された URL が選択されます。選択された画像は <img> 要素が占有する領域に表示されます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<picture>
38
13
38
9.1
38
9.3
DOM API
HTMLPictureElement

HTMLPictureElement インターフェイスは、HTML の picture 要素を表します。これは固有のプロパティやメソッドを実装していません。
38
13
38
9.1
38
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<picture>
  <source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source srcset="small.webp" type="image/webp">
  <img src="small.jpg" alt="レスポンシブ画像の例">
</picture>

ライブデモ

Art direction sources

Use picture with multiple source candidates and a shared fallback image.

プレビュー全画面表示

Format fallback pattern

Show a typical source order for modern formats with a standard img fallback.

プレビュー全画面表示

Responsive card image

Wrap picture inside a content card so the same semantics work with different crops.

プレビュー全画面表示

実務での使いどころ

  • <picture> の活用

    <picture> は HTML の要素で、0 個以上の <source> 要素と 1 つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク