ホームページ制作のガヤワークス

GAYALOG

ガヤログ

アーカイブ

2022/03/16 (Wed)

マークアップ

レスポンシブで適切に画像を変える方法

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

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

主な理由は下記となります

・不必要な画像を読み込ませていると読み込み速度が遅くなる。
・毎回画像に対してCSSで表示・非表示の設定をしなければならない。
などなど他にもあるけどね。

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

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

画像を切り替える方法

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

<picture>
<source media="(min-width: 769px)" srcset="PC-photo.jpg">
<source media="(max-width: 768px)" srcset="SP-photo.jpg">
<img src="PC-photo.jpg" alt="画像の代替テキスト">
</picture>

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

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

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

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

アーカイブ