Blog

ディスプレイの解像度

みなさんは、スマートフォンでwebサイトを見ていて、「画像がぼけてる(汚い)ぞ・・?」と感じた事はないですか?
パソコンで見ると綺麗なはずの画像が、スマートフォンだとボケてしまうのは何故でしょうか?

これは画像自体が元々ぼけているのではなく、スマートフォンの解像度が高いために、画像が粗く見えてしまうのです。
(※解像度とは、画面のきめ細かさを示すものです。肌で例えるならば、きめの細かさ。一つの画面でどのくらいの画素を表示できるのかを示している単位です。)

高解像度ディスプレイで綺麗に表示させるには

高解像度のディスプレイは、代表的なものとして、apple社がIPhone4から初めて採用したRetinaディスプレイがあります。
たとえば、iPhone6は375× 667の画面サイズですが、画面サイズイコール解像度ではなく、解像度は750 × 1334なので、普通のディスプレイで等倍で表示していた画像が、Retinaディスプレイだと縦横2倍に引き伸ばされた状態で表示されているという事です。

このようなディスプレイでも画像を綺麗に表示させる為の方法が幾つかあります。

弊社では、主に「表示サイズの二倍の大きさの画像を用意し、その画像を半分の大きさにして表示する方法」をとっています。
だからといって、パソコンで表示する画像とスマートフォンで表示する画像の二つを毎回準備していたら、画像の差し替え作業が入った際などに、二倍手間がかかってしまいますよね。そこで、スマートフォンサイトで使用する画像の二倍サイズの画像を用意し、パソコン表示でも同様の画像を、サイズを変えて使用します。

たとえば・・・

・PCサイトで横幅500pxで表示したい画像

・スマートフォン(IPhone6)で横幅375pxで表示したい画像

の場合、横幅750pxの画像を用意します。その画像を縮めて、PCサイトでは横幅500pxで表示し、スマートフォンでは横幅375px(元画像の半分サイズ)で表示します。
こうする事で、パソコンサイトとスマホサイトで同じ画像を使用しながら、スマートフォンでも綺麗に画像を表示させることができます。(元の写真のサイズによっては、この方法がとれない場合もあります。)

少しややこしい!と思われるかもしれませんが、私達はこういったひと手間でお客さんに喜んで頂けたり、スマートフォンサイトからお客様の収益につながるきっかけであれば良いな!と思っています。

web集客・サイト制作に関するご相談はこちら

お問い合わせフォーム

お電話からのお問い合わせはこちら

0120-57-1140

平日 AM9:00~PM6:00