画像のレスポンシブ対応は、大きい画像を1枚だけ使用してしまえばよいというわけではないのでしょうか？

Question

Webサイトで使用する画像は、Retina対応するために2倍や3倍のサイズを用意して、画面幅によって切り替えるのが一般的かと思うのですが、

これって、どのデバイスにも対応できるくらい大きい画像1枚だけ使用して、各画面幅ごとに横幅を指定してしまえばいいのではないかと思ったのですが、これは良くない方法なのでしょうか？（必要以上に大きいと読み込みに時間がかかったりする…？）

わかる方いらっしゃったら教えていただきたいです。
よろしくお願いします。

Answer 1

これって、どのデバイスにも対応できるくらい大きい画像1枚だけ使用して、各画面幅ごとに横幅を指定してしまえばいいのではないかと思ったのですが、これは良くない方法なのでしょうか？（必要以上に大きいと読み込みに時間がかかったりする…？）

一般的なPNGやJPEGの画像に関しては、大きな画像だと容量を消費するので、小さい画像で十分な場合にはそれで済ませたほうが容量を節減できます。

一方、SVGの場合、2倍や3倍に伸ばしても乱れませんので、1枚の画像で済ませて問題ありません。

Comments

[kadot]

なるほど、そういうことなのですね。
小さい画像で十分な場合は、それで済ますようにしようと思います。

スッキリしました。
ありがとうございます。