はじめに
<picture> 要素を使うと、画面サイズに応じて異なる画像を出し分けることができます。
<picture> <source srcset="/sample_sp.jpg" media="(max-width:767.9px)"> <img src="/sample_pc.jpg" alt="サンプル画像"></picture>仕組み
<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>ポイント：<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>応用：アートディレクション（トリミング違い）
単なるリサイズではなく、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>補足：よくある注意点
| 項目 | 内容 |
|---|---|
<img> は必須 | フォールバックかつ alt テキストの担い手。省略不可 |
type 属性 | WebP等の新フォーマットを使う場合は明示する（ブラウザが対応確認に使う） |
media の単位 | px 指定はCSSピクセル（論理ピクセル）基準。デバイスピクセルとは異なる |
| CSSとの関係 | <picture> 自体にはレイアウト効果なし。サイズ調整は <img> に対してCSSで行う |
/* <img> に対してCSSでサイズを指定する */picture img { width: 100%; height: auto;}
