サイト制作において、サイズの異なる同じデザインの画像が提供されたとき、どのような方法で画像を切り替えるのがいいのでしょうか？

Question

非常に小さな悩みとも思うのですが、できるだけきれいなコードを書きたいので質問させてください。

ネットに上がっているサイト制作の課題をやっているのですが、
画像素材として同じデザインでサイズの異なる2つのpng画像が提供されています。

サイズが異なるということは、小さな画面のときには小さな画像を使い、
大きな画面のときには大きな画像を使えという意味だと思うのですが、

質問1
サイズの大きさの違いにもよると思うのですが、
そもそも小さな画面のときにも大きな画像を使ってはダメなのでしょうか。

それともサイズの異なる素材が提供されているということは、
2つの素材を両方使ってほしいというのが提供者の意図と考えられるので、
やはり画像は使い分けるべきなのでしょうか？

このような使い分けをみなさんはどのようにされているのでしょうか？

質問2
画像を使い分ける場合、どのような仕組みで画像を切り替えるのが一般的なのでしょうか？

HTMLに2つの画像を書いておき、CSSには、
小さな画面のときは大きな画像をdisplay:none;で消し、
大きな画面のときは小さな画像をdisplay:none;で消すのでしょうか？

あるいは画像は背景画像として処理し、
CSSのbackground-imageで画像を切り替えるのでしょうか？

他にもHTMLに1つの画像を書き、
JavaScriptで画像を切り替えるという方法もあると思うのですが、
結局、どういう方法がいいのか悩んでいます。

以上がお聞きしたいことです。
よろしくお願いします。

Answer 1

そもそも小さな画面のときにも大きな画像を使ってはダメ

ダメではないですが往々にして大きな画像はサイズも大きいです。
つまり表示が対して変わらないのに無駄にトラフィック（いわゆるギガ？）を使わせるのは
ユーザーフレンドリーではありません

HTMLに2つの画像を書いておき

それではトラフィックを減らすことはできないので意味がありません
背景レベルの話であればメディアクエリで呼び出すファイルを切り替えるのが良いでしょう。
場合によってはjsで調整も可能ですが多少工夫が必要になるかもしれません

Comments

[cheshire-cat]

ありがとうございました。不都合点も書いてくださり、大変助かります。