pictureタグとsrcset属性で画像の種類やサイズをスマホとパソコン表示で変える方法
- 2019.08.13
- Webスキル
よこのじ(@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対応】」を参考にしてください。
- 前の記事
以外と簡単だった!Googleアナリティクスの基礎と使い方と活用 2019.06.18
- 次の記事
Nuxt.jsでaxiosを使ってリクエストしてもheadersがレスポンスに含まれていないとき 2020.02.08