TechStack

HTML5HTML2025-09-21

HTMLだけでレスポンシブに画像を切り替える方法

<picture>タグでCSSやJavaScriptを使わず、画像をレスポンシブに切り替えよう！

html
HTML5 の <picture> タグを使えば、ブラウザやビューポート条件に応じて自動で画像を切り替えることができます。

基本構造

<picture>
  <!-- 条件を満たす source が順に評価される -->
  <source type="image/avif" 
          srcset="img/hero-1200.avif 1200w, img/hero-800.avif 800w" 
          media="(min-width: 900px)">
  <source type="image/webp" 
          srcset="img/hero-800.webp 800w, img/hero-480.webp 480w" 
          media="(min-width: 480px)">
  <source media="(max-width: 479px)" srcset="img/hero-mobile.jpg">
  <!-- フォールバック（必須） -->
  <img src="img/hero-default.jpg" alt="メインビジュアル" loading="lazy" decoding="async">
</picture>
ブラウザは上から順に条件を判定し、最初に一致した <source> を使います。 最後の <img> は必須のフォールバック兼アクセシビリティ対応です。

主な属性一覧

要素/属性役割例
<picture>画像切り替えのコンテナ<picture>…</picture>
<source>条件付きで読み込む画像を指定<source …>
mediaCSSメディアクエリで表示条件を指定media="(max-width: 600px)"
type画像フォーマット（MIMEタイプ）を指定type="image/webp"
srcset利用する画像のURLや解像度・幅を指定srcset="img-800.jpg 800w, img-400.jpg 400w"
sizesどの幅の画像を使うかブラウザにヒントを与えるsizes="(max-width: 600px) 100vw, 50vw"
<img>フォールバック画像（必須）<img src="img.jpg" alt="説明">
alt代替テキスト（アクセシビリティ用）alt="説明文"
loading遅延読み込み指定（lazy など）loading="lazy"
decodingデコードの優先度ヒントdecoding="async"

sizes の使い方例

srcset と併用して、画面幅に応じてどのサイズの画像を使うかブラウザにヒントを与えます。
<img 
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
  src="img-800.jpg"
  alt="レスポンシブ画像">
  • sizes の各条件は「もし画面幅が○○以下なら画像表示幅は△△」という指定。
  • 上記例では
    • 600px以下：100%の幅
    • 1024px以下：50%の幅
    • それ以上：33%の幅
  • ブラウザはこのヒントをもとに srcset から最適なファイルを選びます。

アートディレクション（構図の異なる画像を切り替える）

単にサイズ違いを出し分けるだけでなく、構図自体を変えることも可能です。
<picture>
  <!-- PC向けは横長構図 -->
  <source media="(min-width: 900px)" srcset="banner-desktop.jpg">
  <!-- タブレット向けはトリミングされた構図 -->
  <source media="(min-width: 600px)" srcset="banner-tablet.jpg">
  <!-- スマホ向けは縦長構図 -->
  <img src="banner-mobile.jpg" alt="キャンペーンバナー">
</picture>
これで、デバイスに応じてまったく別ファイルの画像を出し分けられます。

まとめ

  • <picture> タグは「ブラウザが自動で最適な画像を選ぶ」仕組み。
  • まず現代フォーマット（AVIF → WebP）を上に、最後にJPEG/PNGなどの標準フォーマットを <img> に書く。
  • media で画面幅に応じた切り替え、srcset ＋ sizes で解像度やデバイスピクセル比に応じた最適なファイルを選択可能。
  • 構図違い（アートディレクション）も柔軟に切り替えられる。
  • 必ず alt を入れてアクセシビリティを確保する。
このパターンをベースにすれば、モバイル〜PCまで一括で最適化できます。