スマホで見ると画像がぼやける？デザイナーが原因と対処法を紹介します！

webサイト内に配置した画像がスマホだとぼやけて見えるという現象が起こることがあります。

webデザイン初心者の殆どの方が通る道かと思います。僕もwebサイトを制作し始めたころはスマホで見た時の画像の荒さに驚きました。

スマホで見ると画像がぼやけてしまう原因とその解決策について、みなさんに紹介したいと思います。

スマホで見ると画像がぼやける原因

画像がぼやけて見える時に使用しているスマホはiPhoneかと思います。実はiPhoneで見ると、webサイトに載せている画像がぼやけて見えるのです。

なぜiPhoneだとぼやけて見えるのかというと、原因はAppleのRetinaディスプレイにあります。

Apple製品のMacBook、iPad、iPhoneにはRetinaディスプレイというものが搭載されており、これがあることで高解像度で高度な色彩表現のできるディスプレイになります。

そして、高度な画質・色彩表現を行うためにRetinaディスプレイにはおおよそ2倍の画素数を使用します。

つまり、画像サイズの2倍のピクセル数を必要とするということなのです。例えば横1,200px縦630pxの画像の場合、必要なピクセル数は横2,400px縦1,260pxということになります。

結論、iPhoneで見た際に画像がぼやけて見えるのはピクセル数が足らないからということなのです。

ぼやけないための対策

ではどのようにすればスマホで見ても画像がぼやけずに済むかというと、レスポンシブデザイン用の画像サイズを2倍にして使用するということです。

サイズが2倍の画像をはめ込み、コーディングで予定していたサイズを指定することでピクセル数が2倍の画像が用意されます。

例えばスマホ上に横500px縦250pxの画像を使用するとします。この場合用意する画像のサイズは、横1,000px縦500pxです。

そして下記のようにコーディングで本来の画像サイズを指定しまし。

<img src="画像のディレクトリー" width="500px" height="250px">

HTML上でこのようにコードを記載することで、ピクセル数2倍の画像が本来のサイズで埋め込まれます。

こうすることでスマホで見た際の画像の荒れを改善することにつながります。

最後に

以上がスマホで見た際に画像がぼやけてしまう原因と対処法の紹介でした。

web制作を始めたばかりの人は、今後は上記のように対応してください。