HTML レスポンシブデザインでの画像の切り替え方法

Webサイト制作を行っていると、パソコンとスマートフォンで表示させたい画像が異なる場合があります。

パソコンは基本横向きでの表示となりますが、スマートフォンやタブレットは縦で見ることが多く、どうしても同じ画像を表示すると見栄えが悪くなってしまうことがあります。

例えば横長の画像をスマートフォンで見た場合、縮小されてしまいかなり小さくなってしまうなど・・・

パソコンでは16：9などの横長で表示し、スマートフォンでは1：1などの正方形サイズで表示するなど、さまざまです。

みなさまはWeb制作を行う際に、パソコンとスマートフォン（タブレット）で画像を切り替える場合はどのようにされていますか？

CSSのメディアクエリで実装されているという方、HTMLのpictureタグを使用することで簡単に実装することが可能です。

CSSを記載せず、HTMLだけで完結することができるため、コードの量の減らすことができます。

画像の切り替えはpictureタグで行うようにしましょう！

pictureタグの基本的な書き方

<picture>
  <source srcset="画像ファイルのパス" media="(min-width: 1024px)>
  <source srcset="画像ファイルのパス" media="(min-width: 768px)>
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

pictureタグの中に、sourceタグ、imgタグを記載します。

sourceタグにはsrcset属性、media属性を指定することができ、

srcset属性は、画像ファイルのパスを指定、

media属性はmin-widthやmax-widthを使用して、画面の幅を指定します。

sourceタグの属性について

<picture>
  <source srcset="画像ファイルのパス" media="(min-width: 1024px)>　<!-- 優先1-->
  <source srcset="画像ファイルのパス" media="(min-width: 768px)> 　<!-- 優先2-->
  <img src="画像ファイルのパス" alt="">
</picture>

source属性は複数設定することができ、上から順に優先順位が高くなり、条件に当てはまった画像ファイルが出力される仕様となります。

source属性で指定している条件にあてはまらなかった場合はimgタグで指定している画像ファイルが出力されます。

上記の場合、

画面幅が1024px以上の場合は「優先1」の画像ファイルが出力、

画面幅が1023px～768pxの場合は「優先2」の画像ファイルが出力、

それ以外（以下）の場合は、imgタグで指定されている画像ファイルが出力されます。

画像の大きさなど、CSSの指定方法について

  <picture class="image">
    <source srcset="./image/PC.jpg" media="(min-width: 1024px)">
    <img src="./image/sm.jpg" alt="デバイスの画像">
  </picture>

.image img {
　width: 300px;
  height: 300px;
}

sourceタグに記載されているタグは、内部的にimgタグとして置き換えられるため、imgタグに対してCSSを記載します。

min-width: 1024pxをmedia属性に指定しているため、1024pxではpc.jpgが表示されております。

画面の幅が1023pxになったため、画像がsm.jpgに切り替わりました。

さいごに

pictureタグの使用方法について解説させていただきました。

CSSでメディアクエリを使用して実現することも可能ですが、pictureタグを使用することによりコーディングの量を減らすことができます。

pictureタグで実装する場合はHTMLだけで切り替えを実装できるため、レスポンシブ対応も容易にできます。

Webサイトで使用する画像を、デバイスごとに切り替えたい場合は、ぜひpictureタグを使用してみてください。