<picture>
<picture> 要素は複数の <source> 要素と <img> 要素を含み、レスポンシブ画像やアートディレクションを実現します。
概要
<picture> 要素は複数の <source> 要素と <img> 要素を含み、レスポンシブ画像やアートディレクションを実現します。
対応ブラウザ
デスクトップ
Chrome 38+
Edge 13+
Safari 9.1+
Firefox 38+
モバイル
Chrome Android 38+
Safari iOS 9.3+
Firefox Android 38+
基本構文
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>実務での使いどころ
-
<picture> の活用
レスポンシブ画像のためのコンテナ要素。複数のソースから最適な画像を選択。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。