: PICTURE 要素

最終更新：2026-09-12

<picture>PICTURE 要素

img に複数の画像ソースを提供し、ブラウザーがビューポートや解像度などに応じて最適な画像を選びます。

<picture>画像ソース</picture>

下のコードを編集して、playground でリアルタイム結果を確認：

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<picture>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： picture にはフォールバックとして img が必要です。source は選ぶだけで、実際に描画されるのは常に img です。

今後さらにケーススタディを追加予定です。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。