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以上でパソコン用の画像が表示されます。

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

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

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

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

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

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

created by Rinker

• Kindle
• Amazon
• 楽天市場