プログラミング
Tips

Home　>　記事　>　HTML/CSS　>　HTML<picture>タグ入門：レスポンシブな画像切り替えとWebP対応をマスターしよう

HTML<picture>タグ入門：レスポンシブな画像切り替えとWebP対応をマスターしよう

2025/11/19

皆さん、こんにちは。ひらくです。今回は、HTMLの<picture>（ピクチャー）タグについて詳しく見ていきたいと思います。結論から言うと、<picture>タグは「HTMLのコードだけで画像の切り替えを可能にする」ものです。これが非常に便利なので、その理由と使い方をご紹介します。

動画で確認したい方はこちら↓

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まではこれ」といったように、細かく条件分岐させることも可能です。

<picture>タグが使われるもう一つの重要な理由が、WebP（ウェッピー）のような新しい画像形式への対応です。

WebPは、画質を保ったままJPEGやPNGよりもファイルサイズを軽くできる優れた画像形式ですが、一部の古いブラウザでは表示できません。

そこで<picture>タグを使い、「WebPを表示できるブラウザにはWebPを、できないブラウザにはJPEG（やPNG）を」という分岐を行います。

<picture>
  <source srcset="001.webp" type="image/webp">
  <img src="001.jpg" alt="サンプル画像">
</picture>

このコードを書くと、ブラウザは以下のように動作します。

これにより、ページ速度を追求しつつ、古いブラウザのユーザーにも確実に画像を見せることができます。

今回は、<picture>タグの基本的な使い方について解説しました。

これらは、現代のWeb制作において非常に便利な機能です。最近よく使われているテクニックですので、ぜひ練習して実践で使えるようになってみてください。