📷 pictureタグで画像を画面幅ごとに切り替える方法【体験デモ付き】
Web制作において、画像の出し分けは非常に重要です。スマートフォン、タブレット、PCといった異なる画面サイズごとに、最適な画像を表示したいというニーズは少なくありません。
そこで活用したいのが、HTML5で追加されたpictureタグです。
この記事では、pictureタグを使って「画面幅ごとに異なる画像を表示する方法」と、その効果を実際に体験できるモダンUIデモをご紹介します。
✅ デモで体験しよう
まずは以下のデモで、画面の横幅によって画像が自動で切り替わる様子を体験してみてください。
画像だけでなく、背景色も切り替わるようにしているため、どのサイズでどの画像が出ているのかがひと目でわかります。
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
✅ pictureタグとは？
pictureタグは、ひとつの画像エリアに対して複数の条件付きソース（画像）を用意できるHTMLタグです。画面サイズや画像形式に応じて、最適な画像をブラウザが自動的に選んで表示してくれます。
これにより、「スマホでは縦長画像」「PCではワイドな画像」といった構図そのものが異なる画像の出し分けも実現できます。
✅ CSSとの違い
CSSでも background-image を使えば、メディアクエリによる画像切り替えは可能です。ただし、CSSでは以下のような問題が起こりがちです。
- SEOに必要な
alt属性が使えない - 印刷対応やアクセシビリティに弱い
- 管理が複雑になりやすい
一方、pictureタグはHTMLだけで明快に管理できる上、SEOやユーザビリティにも強く、構造的にもわかりやすいのがメリットです。
✅ デモの仕様
今回のデモでは、3つの画面幅（スマホ／タブレット／PC）に応じて画像を切り替えています。さらに背景色もそれぞれのサイズごとに変化するように設定しました。
また、画像の切り替えを直感的に確認できるように、リサイズ可能なボックス内で仮想的に画面サイズを再現しています。
そのため、ブラウザ全体を縮小・拡大する必要はなく、記事内だけで完結して切り替え挙動を確認できるUIになっています。
✅ pictureタグの主な用途
- ファーストビューのヒーロー画像出し分け
- ECサイトの商品画像の構図変更
- 高解像度画像・WebPとの切り替え
- LCP対策のための軽量画像出し分け
といったように、単なる「見た目の最適化」にとどまらず、パフォーマンス改善やSEOにも有効なタグです。
✅ 注意点とコツ
- 条件は広い画面 → 狭い画面の順に記述するのが一般的です
- 条件に合致しなかった場合のために、最後に通常の
imgタグを記述します - 大きな画像を多用するとパフォーマンスに影響するため、実サイズに合った画像を準備しましょう
✅ まとめ
pictureタグを使えば、デバイスごとに最適な画像を表示するレスポンシブな表現が簡単に実現できます。
CSSでは難しい構図の切り替えやSEO対応も可能であり、Webサイトの品質向上に直結するテクニックです。
ぜひ今回のデモを参考に、あなたのプロジェクトでも pictureタグを活用してみてください。