Retinaディスプレイで見たときの画像をどうやってきれいに見せるかの実験。

ご無沙汰しております。6月は怒涛の月で、ブログを更新する余裕もありませんでした。7月、8月も個人的に大きな動きがあるので、バタバタしますがその旨もブログに書いていきたいと思ってます。

そして今日はウェブの話をしますので関心のない人はスルーでお願いします。笑

新しく発売したMacBook Proの大きな特長はRetinaディスプレイと言われる『世界で最も解像度が高いノートブックのディスプレイ』を搭載している点で、このRetinaディスプレイが今後のコンピューターディスプレイのデファクトスタンダードとなっていくのではないかと話題になっています。ウェブ制作を生業としている私としてはやはり気になるところで今後のウェブ制作にどのように影響するのか、そしてどのような対応が必要になってくるのかを勉強しないといけないと思いました。

iPadでローソンのウチカフェのページを見ていたときに、商品画像がくっきり綺麗に見えていたので、どうしているのだろうと気になって画像だけ開いてみるとサイズの大きい画像を縮小して表示させている、というもので、これで対応できるのか自分で実験してみました。

↑幅600pxで作成した画像。

↑幅900pxで作成し、imgタグで縮小した画像。

Retinaディスプレイで見るとやはり下の画像のほうがくっきり綺麗に見えました。しかし900pxで作成した画像は400KBもあるので、モバイル通信でアクセスする場合など、表示されないリスクがあります。ウチカフェもそうでしたが、全ての画像を解像度を高くする必要はなく、美しく見せたい画像のみをこの手法でやるのが一番合理的かもしれません。

また、現状のサイトをRetinaディスプレイ対応にするretina.jsというスクリプトがあるのでこれを使うのもありかもしれません。

SOHOやノマドワーカーに適したレンタルサーバー。