pictureタグを使ってレスポンシブに対応する

はじめに

<picture> 要素を使うと、画面サイズに応じて異なる画像を出し分けることができます。

<picture>
  <source srcset="/sample_sp.jpg" media="(max-width:767.9px)">
  <img src="/sample_pc.jpg" alt="サンプル画像">
</picture>
HTML

仕組み

  • <img> は必須。alt 属性も必ず設定すること
  • <source> の media 属性に条件を書き、条件が一致した場合にその画像が使われる
  • どの条件にも合わない場合は <img> がフォールバックとして表示される

WebP対応（フォールバック付き）

WebPはファイルサイズを大幅に削減できますが、古いブラウザでは非対応のため、JPGのフォールバックをセットで用意するのがベストプラクティスです。

<picture>
  <source srcset="/sample_sp.webp" media="(max-width:767.9px)" type="image/webp">
  <source srcset="/sample_sp.jpg"  media="(max-width:767.9px)">
  <source srcset="/sample_pc.webp" type="image/webp">
  <img src="/sample_pc.jpg" alt="サンプル画像">
</picture>
HTML

ポイント：<source> の順番が重要

ブラウザは 上から順に評価し、最初に条件が一致したものを使用 します。そのため、WebP → JPG の順に記述することで、WebP対応ブラウザはWebPを、非対応ブラウザはJPGを読み込みます。

応用：高解像度（Retina）対応

srcset に 2x を追加することで、Retinaディスプレイ向けの高解像度画像も指定できます。

<picture>
  <source
    srcset="/sample_sp.webp 1x, /sample_sp@2x.webp 2x"
    media="(max-width:767.9px)"
    type="image/webp"
  >
  <source
    srcset="/sample_sp.jpg 1x, /sample_sp@2x.jpg 2x"
    media="(max-width:767.9px)"
  >
  <source
    srcset="/sample_pc.webp 1x, /sample_pc@2x.webp 2x"
    type="image/webp"
  >
  <img src="/sample_pc.jpg" alt="サンプル画像">
</picture>
HTML

応用：アートディレクション（トリミング違い）

単なるリサイズではなく、SP版は縦長・PC版は横長など、構図自体を変えたい場合にも <picture> が有効です。

<picture>
  <!-- SP：正方形トリミング -->
  <source srcset="/hero_sp.webp" media="(max-width:767.9px)" type="image/webp">
  <source srcset="/hero_sp.jpg"  media="(max-width:767.9px)">
  <!-- PC：ワイドトリミング -->
  <source srcset="/hero_pc.webp" type="image/webp">
  <img src="/hero_pc.jpg" alt="ヒーローイメージ">
</picture>
HTML

補足：よくある注意点

項目内容
<img> は必須フォールバックかつ alt テキストの担い手。省略不可
type 属性WebP等の新フォーマットを使う場合は明示する（ブラウザが対応確認に使う）
media の単位px 指定はCSSピクセル（論理ピクセル）基準。デバイスピクセルとは異なる
CSSとの関係<picture> 自体にはレイアウト効果なし。サイズ調整は <img> に対してCSSで行う
/* <img> に対してCSSでサイズを指定する */
picture img {
  width: 100%;
  height: auto;
}
CSS

read next