pictureタグとsrcset属性で画像の種類やサイズをスマホとパソコン表示で変える方法

よこのじ(@yokonoji_work)です。

スマホとパソコンで読み込む画像を変えることは、通信回線の弱いモバイルで表示速度を保ったり、デザインの自由度が高くなるなどのメリットがあります。

今回は、pictureタグとsrcset属性を使って読み込む画像を変える方法をご紹介します(参考)。

完成形のHTMLコード

<picture>
  <source media="(max-width:560px)" srcset="mobile.jpg">
  <source media="(max-width:960px)" srcset="tablet.jpg">
  <source media="(min-width:961px)" srcset="pc.jpg">
  <img src="default.jpg" alt="共通のalt値となる">
</picture>

2019年版のブレイクポイントとして注目されている560px/960pxを境として表示画像を変えています。

スマホとパソコンで異なる画像を読み込むコードの解説

メディアクエリでウィンドウ幅と読み込み画像を指定

先ほどのコードであれば、ウィンドウサイズ560px以下でモバイル用の画像、561~960pxでタブレット用の画像、961px以上でパソコン用の画像が表示されます。

これは見て分かるとおり、メディアクエリにて切り替えを行っています。

メディアクエリと読み込み画像

画像がウィンドウ幅に応じたものが1つだけ読み込まれる

HTMLコードの記述としては複数の画像の指定がありますが、もちろんすべてが読み込まれることはありません。ウィンドウ幅に応じたものが1つだけ読み込まれます。

なお、メディアクエリで指定がないウィンドウ幅の場合や、IEのようなpictureタグが対応していない場合にはimgタグで指定した画像がデフォルトで表示されます。

 

Webページの表示速度向上に興味がある方は「完全ガイド:Webサイト表示速度の改善・高速化の方法【WordPress対応】」を参考にしてください。