2026年4月16日
HTML picture タグとは？
画面サイズや解像度に応じて最適な画像を表示するには、pictureタグを使います。スマホには小さい画像、パソコンには大きい画像を自動で切り替えられます。
また、WebPなどの新しい画像フォーマットに対応しつつ、非対応ブラウザへのフォールバックも設定できます。
基本的な使い方
<picture>
<!-- 画面幅768px以上のとき -->
<source media="(min-width: 768px)" srcset="large.jpg">
<!-- デフォルト（フォールバック） -->
<img src="small.jpg" alt="風景写真">
</picture>ブラウザは上から順に条件を確認し、最初に一致した <source> の画像を使います。どれも一致しない場合は <img> の画像が使われます。
🔗 あわせてHTMLコメントの書き方もチェックしてみましょう。
WebP対応（フォーマットの切り替え）
WebP（ウェブピー）はGoogleが開発した高圧縮の画像フォーマットです。対応ブラウザにはWebPを、非対応ブラウザにはJPEGを表示できます。
<picture>
<!-- WebP対応ブラウザ向け -->
<source srcset="photo.webp" type="image/webp">
<!-- 非対応ブラウザ向けフォールバック -->
<img src="photo.jpg" alt="写真">
</picture>📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
srcsetで解像度に応じた画像を指定する
Retinaディスプレイなど高解像度の画面向けに、解像度に応じた画像を指定できます。
<img
src="photo.jpg"
srcset="photo.jpg 1x, [email protected] 2x, [email protected] 3x"
alt="写真"
>👉 metaタグの書き方も参考にしてください。
まとめ
- ✅ picture：画面サイズ・フォーマットに応じた画像を切り替える
- ✅ source：条件（media・type）と画像を指定する
- ✅ img：フォールバック（必須）
- ✅ WebP対応でファイルサイズを削減できる
- ✅ srcset：解像度に応じた画像を指定する
pictureタグを使いこなすと、パフォーマンスの高いページが作れます。レッスンでさらに詳しく学んでみましょう。