ZeroPlus Media > Web制作 > HTML/CSS > pictureタグの使い方解説！レスポンシブに画像を切り替え【CSS不要】

pictureタグの使い方解説！レスポンシブに画像を切り替え【CSS不要】

HTML/CSS

2022/11/18

2025/11/27

レスポンシブデザインのWebサイトではモバイルとPC、別々の画像を表示したいケースがあります。pictureタグを使えばCSSやJavaScriptに依存せず、画面幅に応じて画像を切り替えることが可能です。

この記事では「pictureタグを使ってレスポンシブに画像を切り替える方法」について解説します。

ぜひpictureタグを使いこなしたレスポンシブ対応の方法を習得しましょう！

この記事で身につく内容

pictureタグの使い方
pictureタグの中で使える属性の知識
pictureタグを使うメリット

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

pictureタグの基本的な使い方
pictureタグの理解が深まると、レスポンシブ画像の管理が楽になる

pictureタグの基本的な使い方

pictureタグは、画面幅や端末の条件に応じて画像を切り替えるためのタグです。子要素にはsourceタグとimgタグを使用します。基本書式は下記のようになります。

<picture>
  <source srcset="画像のパス">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

ブラウザは上から順にsourceタグを評価し、条件に一致したものを選択します。どの条件にも当てはまらない場合は、最後のimgタグが表示されます。

かめるん先生

imgタグの進化版です！

どのように変わっていくのかをマスターしていきましょう💪

sourceタグで使える属性

pictureタグでは、子要素に複数のsourceタグを記述し、条件に応じて表示する画像を切り替えられます。

sourceタグに設定できる主な属性は、下記のとおりです。

属性	説明
srcset	条件に一致したときに読み込む画像パスを指定する
media	画面幅（min-width / max-width）に応じて画像を切り替える
type	画像形式（webp, jpg, pngなど）を指定し、ブラウザ対応状況に合わせて出しわける
width/height	画像表示のサイズを指定し、レイアウトシフトを防ぐ

srcset属性：条件に一致したときに表示する画像のパス

srcset属性は、指定した条件に一致したときに表示する画像のパス（URL）を記述するための属性です。pictureタグの中では、sourceタグ側に書かれたsrcsetの画像が最優先で読み込まれます。基本の書き方は次のとおりです。

<div class="imgbox">
  <picture>
    <!-- sourceに画像のパスを記述 画面に表示されるのはsrcsetの画像-->
    <source srcset="images/sample.png">
    <!-- imgに画像のパスを記述 -->
    <img src="images/sample2.png" alt="代替テキスト">
  </picture>
</div>

出力結果

この場合、表示されるのはsourceタグのsrcsetに指定した画像（sample.png）です。

srcsetが空の場合はimgタグの画像が表示されるsrcset属性のパスの記述が空、または条件に合致しない場合は、imgタグに指定した画像が表示されます。

<div class="imgbox">
  <picture>
    <!-- sourceの画像パスは空 画面に表示されない-->
    <source srcset="">
    <!-- imgに画像のパスを記述 画面に表示されるのはimgタグの画像-->
    <img src="images/sample2.png" alt=”代替テキスト”>
  </picture>
</div>

出力結果

srcset が空なので img（sample2.png） が表示されました。

source タグが複数ある場合は「上から順に評価」される

sourceタグは、複数記述できます。この場合、pictureタグは複数のsourceタグを上から順に読み込み、最初に条件に合致したsrcsetの画像が表示されます。

<div class="imgbox">
  <picture>
    <source srcset="images/sample.png"><!-- 優先度1-->
    <source srcset="images/sample3.jpg"><!-- 優先度2-->
    <img src="images/sample2.png" alt=”代替テキスト” >
  </picture>
</div>

この場合、最初のsource（sample.png）が最優先されます。いずれのsourceタグにも条件が合致しない場合、最終的にはimgタグが読み込まれます。

かめるん先生

上から順に評価される点は押さえておきたいポイントです！いずれのsourceタグにも条件が合致しないときは最終的にimgタグが読み込まれます！

media属性：画面幅に応じて画像を切り替える

media 属性は、画面幅に合わせて表示する画像を切り替えるための属性です。CSSのメディアクエリと同じ書き方で、min-widthやmax-widthを使って条件を指定します。

pictureタグでは、複数のsourceタグと組み合わせて下記のように使います。

<div class="imgbox">
  <picture>
    <!-- ブラウザ幅最大～1024pxまでsample3の画像が表示 -->
    <source srcset="images/sample3.jpg" media="(min-width: 1024px)" type="image/jpg">
    <!-- ブラウザ幅1023～768pxまでsampleの画像が表示 -->
    <source srcset="images/sample.png" media="(min-width: 768px)" type="image/png">
    <!-- ブラウザ幅767px～から最小幅までsample2の画像が表示 -->
    <img src="images/sample2.png" alt=”代替テキスト”>
  </picture>
</div>

出力結果

1024px以上 → sample3.jpg
768px〜1023px → sample.png
それ以外（スマホなど） →imgタグのsample2.png

というように切り替わります。pictureタグではsourceを上から順に評価していき、対象ユーザーの画面幅に合致した最初のsourceの画像が表示されます。なお、media属性はmax-widthを使った記述も可能です。

<div class="imgbox">
  <picture
    <!-- ブラウザ幅最小～480pxまでsample3の画像が表示 -->
    <source srcset="images/sample3.jpg" media="(max-width: 480px)" type="image/jpg">
    <!-- ブラウザ幅481～768pxまでsampleの画像が表示 -->
    <source srcset="images/sample.png" media="(max-width: 768px)" type="image/png">
    <!-- ブラウザ幅769px～から最大幅までsample2の画像が表示 -->
    <img src="images/sample2.png"　alt=”代替テキスト”>
  </picture>
</div>

type属性：画像形式（webp / jpg / png など）を指定する

type属性は、srcsetに指定した画像のファイル形式を明示するための属性です。ブラウザがその形式に対応している場合のみ、該当の画像が読み込まれます。基本の書き方は下記のとおりです。

<div class="imgbox">
  <picture>
    <source srcset="images/sample3.webp" media="(min-width: 1024px)" type="image/webp">
    <source srcset="images/sample.png" media="(min-width: 768px)" type="image/png">
    <img src="images/sample2.png" alt=”代替テキスト”>
   </picture>
</div>

type属性が特に役立つのは、WebPの対応状況に応じて画像を切り替えたいときです。

ブラウザがWebPに対応している→WebPを表示
対応していない → png / jpgを表示

このような仕組みを、pictureタグだけで実現できます。

<picture>
  <source srcset="images/sample.webp" type="image/webp">
  <img src="images/sample.png" alt="代替テキスト">
</picture>

WebP非対応ブラウザではsourceタグをスキップし、imgタグ側のPNGが自動的に読み込まれます。WebPはIEや一部バージョンが古いブラウザには対応していません。

（Can I use...から引用）

WebP対応表

WebP以外の形式（jpg / png / svg）はほぼすべてのブラウザが対応しているため、typeを書かなくても問題ありません。

Picturefill.js

Picturefill.jsは、pictureタグに対応していない古いブラウザ向けの互換用スクリプトです。ただ現在はほとんどのブラウザがpictureタグをサポートしているため、基本的に導入する必要はありません。
古い環境では、以下のCDNを読み込むとpictureタグを使用できるようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>

width / height 属性：画像サイズを指定してレイアウトシフトを防ぐ

width属性は画像の横幅を、height属性には画像の高さを指定します。

<div class="imgbox">
  <picture>
    <!-- width属性：画像の横幅  height属性：画像の立幅 -->
    <source srcset="images/sample3.webp" media="(min-width: 1024px)" type="image/webp" width="300" height="240">
    <source srcset="images/sample.png" media="(min-width: 768px)" type="image/png" width="300" height="240">
    <img src="images/sample2.png" width="300" height="240">
  </picture>
</div>

width / height属性はレイアウトシフトを防ぐために記述します。

レイアウトシフトとは、Webページの画像が読み込まれた瞬間に、要素が押し下がったり位置がズレたりすることで、ユーザー体験を大きく損ねる要因になります。その点、width / heightをあらかじめ指定しておくと、以下のメリットがあります。

読み込み前から必要なスペースが確保される
画像の表示によってレイアウトが動かなくなる
Core Web Vitals（特に CLS）の改善につながる

アスペクト比がわかる場合だけ書けばOK

widthとheightには、実際の画像サイズそのままを指定する必要はありません。大事なのは画像の縦横の比率（アスペクト比）が保たれることです。

かめるん先生

たとえば横300px、縦200pxの画像なら、width="300" height="200"と書きますが、width="3" height="2" と書いてもOKです🙆‍♂️

pictureタグで表示させた画像に対するCSSの記述

pictureタグで画像を切り替える場合も、実際に画面に表示されるのは imgタグです。sourceタグは「どの画像パスを使うか」をブラウザに指示しているだけなので、CSSはimgに対して指定します。

ここでは、縦横比を保ちながら画像をトリミング表示する例を紹介します。

<div class="imgbox">
  <picture>
    <!-- sourceに画像のパスを記述 画面に表示されるのはsrcsetの画像-->
    <source srcset="images/sample.png">
    <!-- imgに画像のパスを記述 -->
    <img src="images/sample2.png" alt="代替テキスト">
  </picture>
</div>

.imgbox {
  position: relative;
  width: 100%;
  max-width: 300px;
}


.imgbox::before {
  padding-top: 56.25%;
  display: block;
  content: '';
}


.imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

上記のコードのポイント

.imgbox::before で 高さをパーセンテージ指定し、縦横比（ここでは16:9）をキープ
img を position: absolute;で中央に配置
object-fit: cover;で枠いっぱいにトリミングして表示

pictureタグを使っていても、レイアウトやトリミングの制御は img に対するCSSの指定で行う、と押さえておけばOKです。

pictureタグの理解が深まると、レスポンシブ画像の管理が楽になる

pictureタグは、画面幅に応じて画像を切り替えられる便利なタグです。不要な画像を読み込まないため表示速度の改善にもつながり、レスポンシブ対応では非常に有効な手法といえます。

属性	説明
srcset	条件に一致したときに読み込む画像パス
media	画面幅に応じた画像切り替え
type	webp / jpg / png など画像形式を指定
width / height	レイアウトシフトの防止として画像サイズを指定