Retinaディスプレイで画像がぼやける原因と対策を現役webデザイナーが説明します！

web制作を行っている方はRetinaディスプレイという言葉を聞いたことがあるかと思います。Retinaディスプレイはwebデザイナーにとって密接な関係を持つものになります。

Retinaディスプレイに関する知識はwebデザイナーにとって必要不可欠となります。web関係の仕事をされているデザイナーやコーダーの方向けに、Retinaディスプレイに関する内容を現役webデザイナーが説明します。

皆さんのweb制作活動の力になれたら幸いです！

Retinaディスプレイとは？

Retinaディスプレイとは、アップル製品（iPhone、iPad、MacBook）に搭載されている高解像度ディスプレイのことです。高解像度のディスプレイなので、他のデバイスと比較してみると画像がより綺麗に見えます。

Retinaディスプレイは通常のデバイスに比べて倍の解像度を用いているので、同じ画像でもより綺麗に見えるのです。

しかしweb制作者からするとデバイスによって解像度が変わってしまうのは多少面倒なことになります。Retinaディスプレイの対応をしておかないとアップル製品でwebサイトを見た際に画像が荒く見えてしまうことがあるからです。

通常の倍の解像度を用いているので、画像のピクセル数も倍必要になります。100pxの正方形の画像をwebサイトに貼り付ける際、200pxの正方形にして貼り付ける必要があるのです。

この知識が無いと、アップル製品でwebサイトの画像を見た際に画像がぼやけて見えてしまいます。

画像がぼやけた際の対処法

画像がぼやけて見える際は、先程伝えた通り画像サイズを2倍にする必要があります。しかし画像サイズを2倍にして貼り付けただけだと、web上で画像が2倍に表示されてしまいます。なので貼り付ける際はコーディングでサイズ指定をしてあげる必要があります。

例えば100pxの正方形の画像を貼り付けたい場合、画像のサイズを200px 200pxにします。そして下記のようにコーディングで画像サイズを100pxにするのです。

<img src="images/sample.jpg" style="width:100px;">

画像自体は200px 200pxですが、web上では100px 100pxで配置されるようになります。Retinaディスプレイは2倍の解像度を用いますが、画像サイズが2倍なので綺麗に見えるようになります。

ちなみに上記のコードは横幅のみ指定しています。横幅を指定すると比率に応じて縦幅も自動で変更されるので、縦横両方指定する必要はありません。

このように画像サイズを2倍にし、コーディングで元のサイズを指定することでRetinaディスプレイでも画像が綺麗に配置されるようになります。

最後に

以上がRetinaディスプレイについてとぼやけて見える際の対処法の説明でした。

日本ではアップル製品のユーザーが多くいるため、Retinaディスプレイの対応をする必要があります。web制作をされている方は忘れずに対応してください。