レスポンシブで適切な画像を読込み画像を変える方法

デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか？
今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。

PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法について見直した方がいいかもしれません。

その主な理由は下記となります。

このような理由もあるので、画像をdisplay:none;で表示・非表示切り替えは望ましくない方法だといえるでしょう。
ではどのようにすればいいのか、これから紹介していきます。

Google推奨の画像の切り替え方法

画像を切り替える方法は、HTMLで下記のように画像を指定すれば画像が指定のブレイクポイントで切り替わります。

<picture>
<source media="(min-width: 769px)" srcset="desktop.jpg">
<source media="(max-width: 768px)" srcset="mobile.jpg">
<img src="desktop.jpg" alt="Image">
</picture>

このサンプルソースでは、
min-width: 769px側でPC用の画像を設定しています。
max-width: 768px側でスマホ用の画像を設定しています。

この書き方の場合には、デバイス幅によって適切な画像しか読み込まないので、ページの読み込みも早くなるので好ましいと言えます。Alt指定も一か所で済むので、過剰なalt設定を避けることもできます。

pictureタグはインライン要素となるので、ブロック要素で囲んであげてくださいね。

以上の方法で、レスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法となります。
サイトの高速化などをしたい際にも、活用できるので是非試してみてください。

サイトの改善についてはコチラの記事もオススメ