どうも7noteです。レスポンシブサイトを作成する時の画像サイズに注意！

レスポンシブのサイトを作成する時、
スマートフォンで表示される際は200pxの画像は400pxの画像を用意しなければならない！

倍のサイズの画像を用意する理由

スマートフォンの表示画角はpxでいうと、横幅が約360px～420pxくらいのものが一般的です。

つまり、iphone15に幅いっぱいの画像を表示させようと思うと、画像は796px以上の画像を用意するべきです。

なぜ倍ものサイズがいるのか。それは
スマートフォンはRetinaディスプレイだからです。

Retinaディスプレイとは、高画質の出力が可能なディプレイで、1pxのサイズの中に縦横それぞれ2px分の表現をすることができるのです。

つまり、
Retinaディスプレイでは高画質に見せるため、2倍のpx数を扱うことができるようになっている

スマートフォンに対応させるためにはこのRetinaディスプレイに対応させないといけないということになります。なので本来は300pxあれば済む画像でも、綺麗にキメ細やかに再現させるために倍の600pxの画像が必要になります。

デザイン会社からデータなどをもらうと、スマホサイズのデータが倍の750～850pxくらいで作られているのを見ることができます。

CSSの書き方

スマートフォン側

スマホ側はpxで指定してしまうと、違うデバイスで見たときにはみ出るなどのイレギュラーが出てしまうので、%で指定することが一般的だと思います。

img {
  width: 100%;
}

これで、読み込む画像のサイズを倍のサイズで作成しておけば、自動的に倍サイズの画像を幅いっぱいに綺麗に見せることができます。

パソコン側

逆にパソコン側の方が画像サイズが少し小さい場合が多いです。そのため、スマホ用に書き出した画像と画角（縦横比）が同じであれば、本来の画像サイズより少し小さいpxを指定して配置します。

img {
  width: 550px; /*画像はもともと828pxの大きさがある*/
}

この時に注意していただきたいのは、

元の画像サイズよりおおきい数字を指定してはいけない事。

画像よりおおきいサイズをCSSで指定してしまうと、無理やり引き伸ばした画像になってしまいます。
画像がぼやけてしまう原因になるのでやらないように注意してください！

まとめ

画像の書き出しはWEBサイトを制作する上で必須スキルになります。
1枚の画像を上手く使いまわすことで、余計な画像の読み込みが不要になりますし、修正・管理も行いやすくなります。

おそまつ！