2026年4月16日
HTML picture タグとは？なぜ使うの？
Webページに画像を表示するとき、単純に <img> タグを使うと、スマホでもパソコンでも同じ画像が表示されます。でも実際は…
- スマホには小さい画像（軽くて速い）を表示したい
- パソコンには大きい画像（キレイ）を表示したい
- 新しいブラウザにはWebP形式（より軽い）を、古いブラウザにはJPEGを表示したい
これを実現するのが pictureタグ です。画面サイズや対応状況に応じて、ブラウザが自動で最適な画像を選んでくれます。
💡 pictureタグを使うメリット
- スマホでは小さい画像を使ってページが速くなる
- WebP対応ブラウザにはWebPを使ってファイルサイズを削減できる
- Retinaディスプレイなど高解像度の画面にきれいな画像を表示できる
画像の基礎については「HTMLの画像表示方法」を先に読んでおきましょう。
pictureタグの基本構造
pictureタグは <source> タグと <img> タグを組み合わせて使います。
<picture>
<!-- 条件1：画面幅1200px以上なら大きい画像 -->
<source media="(min-width: 1200px)" srcset="large.jpg">
<!-- 条件2：画面幅768px以上なら中くらいの画像 -->
<source media="(min-width: 768px)" srcset="medium.jpg">
<!-- フォールバック（どれにも当てはまらないとき / pictureタグ未対応ブラウザ） -->
<img src="small.jpg" alt="風景写真">
</picture>ブラウザは <source> タグを上から順に確認し、条件（media）に一致した最初の画像を使います。どれも一致しない場合は <img> の画像を使います。
⚠️ imgタグは必ず最後に書く
<img> タグはフォールバック（代替手段）として必須です。pictureタグ未対応のブラウザや、alt属性（代替テキスト）のためにも省略しないようにしましょう。
🔗 あわせてHTMLコメントの書き方もチェックしてみましょう。
WebP対応（フォーマットの切り替え）
WebP（ウェブピー）はGoogleが開発した高圧縮の画像フォーマットです。JPEGと比べてファイルサイズが30〜50%小さくなります。ページの表示速度が上がるので、SEO（検索エンジン最適化）にもプラスになります。
pictureタグを使えば、WebP対応ブラウザにはWebPを、非対応ブラウザにはJPEGを表示できます。
<picture>
<!-- WebP対応ブラウザ向け（新しいブラウザはほぼ対応） -->
<source srcset="photo.webp" type="image/webp">
<!-- 非対応ブラウザ向けフォールバック（JPEG） -->
<img src="photo.jpg" alt="写真">
</picture>type 属性にMIMEタイプを指定すると、そのフォーマットに対応しているブラウザだけが使います。
<!-- 複数フォーマット + レスポンシブの組み合わせ -->
<picture>
<!-- デスクトップ用WebP -->
<source media="(min-width: 768px)" srcset="photo-large.webp" type="image/webp">
<!-- デスクトップ用JPEG（WebP未対応のフォールバック） -->
<source media="(min-width: 768px)" srcset="photo-large.jpg">
<!-- モバイル用WebP -->
<source srcset="photo-small.webp" type="image/webp">
<!-- モバイル用JPEG（最終フォールバック） -->
<img src="photo-small.jpg" alt="写真">
</picture>📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
srcsetで複数サイズの画像を指定する
srcset 属性を使うと、複数のサイズの画像を用意しておき、ブラウザが最適なものを選ぶようにできます。
幅（w）を使った指定
<img
src="photo-400.jpg"
srcset="
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w
"
sizes="
(max-width: 600px) 100vw,
(max-width: 1024px) 50vw,
400px
"
alt="写真"
>400w は「この画像の幅は400pxです」という意味です。sizes 属性で「画面幅600px以下のときは画面幅全体（100vw）で表示する」と指定すると、ブラウザが最適なサイズを選んでくれます。
解像度（x）を使った指定
RetinaディスプレイなどのHiDPIスクリーン向けに、高解像度の画像を用意する場合は x 記法を使います。
<img
src="photo.jpg"
srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
alt="写真"
>2x は「2倍の解像度のディスプレイ用」を意味します。Retinaディスプレイ（MacやiPhone）では自動的に高解像度の画像が選ばれます。
👉 metaタグの書き方も参考にしてください。
画像パフォーマンスの3つのポイント
1. 遅延読み込み（lazy loading）
loading="lazy" をつけると、画面に表示されるまで画像を読み込みません。ページ下部に多くの画像がある場合に特に効果的です。
<!-- スクロールして画面に近づいたら読み込む -->
<img src="photo.jpg" alt="写真" loading="lazy">
<!-- pictureタグでも使える -->
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="写真" loading="lazy">
</picture>2. 適切なサイズ
400px幅で表示する画像に2000px幅の画像を使うのは無駄です。srcsetを使って最適なサイズを自動で選ばせましょう。ファイルサイズを小さくするとページの読み込みが速くなります。
3. alt属性を必ず書く
alt属性（代替テキスト）は画像が表示できない場合や、画像を読み上げる支援技術（スクリーンリーダー）のために必ず書きましょう。
<!-- ❌ alt属性なし（アクセシビリティが悪い） -->
<img src="logo.png">
<!-- ✅ alt属性あり -->
<img src="logo.png" alt="会社ロゴ">
<!-- 装飾目的の画像は空文字列でOK -->
<img src="decoration.png" alt="">pictureタグとimgタグの使い分け
| 場面 | 使うタグ |
|---|---|
| 単純な画像表示 | <img> |
| Retina対応（高解像度） | <img srcset> |
| WebP対応（フォーマット切り替え） | <picture> |
| レスポンシブ画像（サイズ切り替え） | <picture> または <img srcset sizes> |
| フォーマット + サイズ両方切り替え | <picture> |
まとめ
- ✅ picture：画面サイズ・フォーマットに応じた画像を切り替える
- ✅ source：条件（media・type）と画像（srcset）を指定する
- ✅ img：フォールバック（必須・省略不可）
- ✅ WebP対応でファイルサイズを30〜50%削減できる
- ✅
srcset：複数サイズ・解像度の画像を指定する - ✅
loading="lazy"で遅延読み込みを設定できる - ✅ alt属性は必ず書く（アクセシビリティ・SEOのため）
pictureタグを使いこなすと、パフォーマンスの高いページが作れます。レッスンでさらに詳しく学んでみましょう。
あわせて読みたい記事
- HTMLの画像表示方法 — img タグの基本
- レスポンシブデザイン入門 — スマホ対応の実装
- HTML入門 — HTMLの基礎から学ぶ
- HTMLタグ一覧 — よく使うHTMLタグの一覧