レスポンシブの画像切り替えに便利！「picture」タグの使い方

パソコンとスマートフォンで別の画像を表示する場面において、大抵の場合はHTMLにそれぞれの画像を記述し、CSSのメディアクエリで切り替えることが多いと思います。

@media screen and (max-width: 768px) {
  .pc-only{ display: none !important; /* PCのみ表示 */ }
}
@media screen and (min-width: 769px) {
  .sp-only{ display: none !important; /* SPのみ表示 */ }
}

私がよく使っているPC、SPの切り分け用クラスです。改行などにも指定できて便利！
…だったのですが、HTML5の<picture>タグを使用すればCSSを使わずにHTMLのみで画像の切り替えすることができます。

<picture>タグの使い方

基本の書き方は以下の通りです。

<picture>
  <source media="(min-width: 769px)" srcset="for_PC.jpg">
  <source media="(max-width: 768px)" srcset="for_SP.jpg">
  <img src="default.jpg" alt="（デフォルト画像）">
</picture>

<picture>は、0個以上の<source>要素と1つの<img>要素を含み、ユーザーが閲覧しているブラウザや画面幅などの条件に応じた画像を表示するタグです。

上記の例ですと、

• ブラウザ幅が769px以上の場合（min-width: 769px）、「for_PC.jpg」が表示される
• ブラウザ幅が768px以下の場合（max-width: 768px）、「for_SP.jpg」が表示される
• 非対応ブラウザなどでは「default.jpg」が表示される

という風になります。

さらに、source要素を追加して、「タブレット専用画像」を出し分けることもできます！
その場合はこんな感じになります。

<picture>
  <source media="(min-width: 1000px)" srcset="for_PC.jpg">
  <source media="(min-width: 769px)" srcset="for_tablet.jpg">
  <source media="(max-width: 768px)" srcset="for_SP.jpg">
  <img src="default.jpg" alt="（デフォルト画像）">
</picture>

サンプル

ブラウザの幅で見える画像が変わっているかと思います！

pictureタグを使うメリット

<picture>タグの最大の利点として、sourceを1行目から順に辿り、条件に該当しなかった画像ソースは読み込まないというものがあります。

つまり、PCで閲覧時、タブレット用やSP用、デフォルトの画像などは読み込みません。
display:none; で切り替える場合、PC、SP画像を共にロードした上で片方を非表示しているため、それに比較するとページ読み込み速度の大幅な改善が期待できます。

CSSでの出し分けをすると使用しない画像も全て読み込んでしまうため、ローディング速度の向上のためにもぜひ活用してみてくださいね。