HTML<picture>タグ入門：レスポンシブな画像切り替えとWebP対応をマスターしよう
皆さん、こんにちは。ひらくです。
今回は、HTMLの<picture>（ピクチャー）タグについて詳しく見ていきたいと思います。
結論から言うと、<picture>タグは「HTMLのコードだけで画像の切り替えを可能にする」ものです。これが非常に便利なので、その理由と使い方をご紹介します。
動画で確認したい方はこちら↓
なぜ<picture>タグが便利なのか？
Webサイトをコーディングしていると、「PCとスマホで違う画像を使いたい」といった場面は非常に多いです。
これまでは、object-fitなどでうまくトリミングできれば良いですが、大抵の場合はCSSのdisplay: none;とdisplay: block;を使って、PC用とスマホ用の画像を切り替えて表示させていた方も多いのではないでしょうか。
<picture>タグを使うと、この「画像の出し分け」をHTML側で完結させることができます。
これにより、コードがスマートになるだけでなく、ブラウザが不要な画像を読み込まなくなるため、ページの表示速度が速くなるというメリットも期待できます。
メリット①：画面幅に応じた画像の切り替え
<picture>タグの最も基本的な使い方が、画面の幅（ビューポート）に応じて表示する画像を変えるレスポンシブ対応です。
▼ 基本的な書き方
<picture>タグは、<source>タグと<img>タグを内包する形で記述します。
<picture> <source srcset="001.jpg" media="(min-width: 800px)> <img src="002.jpg" alt="サンプル画像"> </picture>
▼ 読み込みの仕組み
このコードを書くと、ブラウザは以下のように動作します。
- まず、<source>タグを上から順にチェックします。
- media=”(min-width: 800px)” の条件（画面幅が800px以上）に当てはまるか確認します。
- 当てはまる場合（例：PC）: 001.jpg を読み込み、その下にある <img>タグは無視されます。
- 当てはまらない場合（例：スマホ）: この<source>タグは無視され、最終的に「最後の砦」である<img>タグが読み込まれ、002.jpg が表示されます。（※<img>タグは必ず記述しましょう）
<source>タグは複数設置できるので、「1000pxまではこれ、800pxまではこれ、600pxまではこれ」といったように、細かく条件分岐させることも可能です。
メリット②：WebP（ウェッピー）形式の出し分け
<picture>タグが使われるもう一つの重要な理由が、WebP（ウェッピー）のような新しい画像形式への対応です。
WebPは、画質を保ったままJPEGやPNGよりもファイルサイズを軽くできる優れた画像形式ですが、一部の古いブラウザでは表示できません。
そこで<picture>タグを使い、「WebPを表示できるブラウザにはWebPを、できないブラウザにはJPEG（やPNG）を」という分岐を行います。
▼ WebP対応の書き方
<picture> <source srcset="001.webp" type="image/webp"> <img src="001.jpg" alt="サンプル画像"> </picture>
▼ 読み込みの仕組み
このコードを書くと、ブラウザは以下のように動作します。
- ブラウザは<source>タグの type=”image/webp” を見て、自分がWebPを表示できるか判断します。
- 表示できる場合：001.webp を読み込みます。
- 表示できない場合：<source>タグを無視し、フォールバックの<img>タグに書かれた 001.jpg を読み込みます。
これにより、ページ速度を追求しつつ、古いブラウザのユーザーにも確実に画像を見せることができます。
まとめ
今回は、<picture>タグの基本的な使い方について解説しました。
- CSSで切り替えていた画像の出し分けを、HTMLでスマートに記述できる
- WebPなどの最新画像形式を、フォールバックを用意しつつ安全に導入できる
これらは、現代のWeb制作において非常に便利な機能です。最近よく使われているテクニックですので、ぜひ練習して実践で使えるようになってみてください。