【HTML】pictureタグで画像をレスポンシブに切り替える方法を解説

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

レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいときがあります。pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられます。

そのほかにもpictureタグを使うことで、ブラウザごとに拡張子を変更することもできます。webp拡張子に対応しているブラウザならWebP画像を、そうでないブラウザならpng, jpg, svgなどの画像を表示する、というように切り替えることで、ユーザビリティの向上が図れます。また、画像の切り替えにJavaScriptやCSSが不要なため表示スピード向上にもつながります。

いっしょにpictureタグについて学習していきましょう！

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

pictureタグの基本的な使い方

pictureタグは、画面幅や端末の条件に応じて画像を切り替えて表示させることができます。pictureタグでは、子要素にsourceタグとimgタグを使用します。

基本書式は次のようになります。

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

pictureタグの子要素としてsourceタグ、imgタグを記述し、画像を指定します。

pictureタグで使える属性については後述します。

sourceタグで使える属性

pictureタグでは、子要素にsourceタグを使って画像を切り替えることができます。

sourceタグには下記の属性を記述できます。

• srcset：条件に一致したときに表示する画像のパス（URL）
• media：ブラウザ幅（min-width, max-width）に応じて表示するものを切り替える
• type：jpg, png, svg, webpなど画像形式を記述
• width：画像の横幅を記述
• height：画像の高さを記述

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

srcset属性は、後述するmedia属性で条件が一致したときに表示する画像のパスを記述します。
※sourceタグに条件を指定しない場合は、srcset属性にした画像パスがimgタグのsrc属性へと置換されます。

<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タグにセットされている画像が表示されます。

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

出力結果

こちらの場合、画面に表示されるのは「imgタグの画像」になります。

sourceタグは複数記述できます。複数ある場合、最初に書いてあるsourceタグにセットされている画像が出力されます。

<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タグの画像が最も優先度が高く表示されます。

sourceタグは上から順番に読み込まれていきます。その際にsourceタグにセットされた属性が読まれ、条件に合致した場合はその画像が表示されます。当てはまらなければ次のsourceタグへと進み、同じように属性が読まれていきます。

どのsourceタグにも条件が合致しない場合には、imgタグで指定した画像が表示されます。

media属性：ブラウザ幅（min-width, max-width）に応じて表示切り替え

media属性と複数の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の画像が表示され、1023pxから768pxまではsampleの画像が表示されます。最後に、media属性に記述された条件に合致しなかったimgタグの画像が表示されます。

このようにブラウザ幅がPCサイズ、タブレットサイズ、モバイルサイズと別々の画像を使いたい場合には、media属性を使って表示させたい画像を切り替えることができます。

なお、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属性：jpg, png, svg, webpなど画像形式を記述

type属性は、jpg, png, svg, webpなどの画像形式を指定します。

<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=”image/○○” の形式で記述し、○○の部分にはpng, jpg, svg, webpなどの画像ファイルの種類を記述します。WebPに関しては対応していないブラウザ（IE）があるため、type=”image/webp”を記述しましょう。

それ以外の形式に関しては、全ブラウザで対応しているので書く意味はほとんどありません。

WebPはIEや一部バージョンが古いブラウザには対応していません。

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

WebP対応表

<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>

imgタグにもwidth属性とheight属性を記述しますが、sourceタグにも指定しましょう。width属性とheight属性を記述することには「レイアウトシフト」を防ぐというメリットがあります。

レイアウトシフト

Webページを閲覧する際、画像を読み込んだときに発生する予期せぬレイアウトのズレのことです。width属性、height属性をあらかじめ記述しておくことで、画像を読み込んでいる最中でも画像分のスペースが確保された状態で読み込まれるため、画像が表示されてもレイアウトシフトが発生しなくなります。

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

pictureタグやその中の画像に対してCSSを記述する例を紹介します。
sourceタグはimgタグに対してパスを置換させるためのコードを保持するためのタグです。そのため、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;
}

pictureタグのメリット

pictureタグのメリットは、media属性を使って画面幅に応じて表示させたい画像を切り替えることができることです。

pictureタグを使わないで画像を切り替える場合、例えば下記のような方法があります。モバイルサイズとPCサイズのブラウザ幅で、画像をdisplay: none; とdisplay: block;で表示/非表示を切り替えています。

<div class="imgbox pc-only">
  <img class="pc-only" src="images/sample2.png">
  <img class="sp-only" src="images/sample.png">
</div>

.sp-only {
  display: block;
}
.pc-only {
  display: none;
}

@media (min-width: 992px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}

上記の方法の場合、imgタグにセットされた画像はWebサイトのページが読み込まれるときに、たとえdisplay: none; が指定されていたとしても一度読み込まれてしまいます。

pictureタグのsrcset属性とimgタグを使って画像を出しわけると、表示しないほうの画像は読み込まれません。そのためpictureタグを使えば、Webサイトの表示スピードを改善することができます。

WebP対応ブラウザでのみWebP画像を表示する

WebP対応ブラウザでのみ、WebP画像を表示させたい場合は下記のように記述します。

<picture>
   <source srcset="WebP画像のパスを記述" type="image/webp"/>
   <img src="WebP未対応のときに表示する画像のパスを記述" />
<picture>

実際にコードを当てはめると下記のようになります。

<div class="imgbox">
  <picture>
    <!-- webp対応ブラウザでwebp画像表示 -->
    <source srcset="images/sample.webp" type="image/webp" />
    <!-- webp非対応ブラウザでwebp以外の画像表示 -->
    <img src="images/sample.png" />
  <picture>
</div>

sourceタグが最初に読まれ、ブラウザがWebP対応であればsourceタグにセットされたWebP画像が表示されます。WebP「非」対応ブラウザであれば、imgタグにセットされた画像が表示されます。

まとめ

pictureタグについて解説しました。pictureタグはレスポンシブに画像を切り替えるのに便利です。サイト表示スピードの改善にも役立つので覚えておきましょう。

このようにHTMLはタグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！

初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ

pictureタグまとめ

• pictureタグ：imgタグとsourceタグの組み合わせで使う
• srcset属性：条件に一致したときに表示する画像のパス（URL）
• type属性：jpg, png, svg, webpなど画像形式を記述
• width属性：画像の横幅を記述
• height属性：画像の高さを記述

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー