個人的な感想ですが、WEBサイトのRetinaディスプレイへの対応度は、そんなにグングン進んでいるというわけでもないようで、まだまだ、どこのサイトの画像やロゴを見渡しても、結構、ボケボケなままです。
だから、あまり神経質になることはないと思っているのですが、ロゴくらいは、パリっとさせておきたいな。と思いまして、サイトのロゴをPNG画像からSVGデータに替えて見ました。
変換前と変換後の、ビフォーアフターはこちら↓
残念ながら、Retinaに対応していないディスプレイで見ると、違いがわからないかもしれませんが、左側のロゴがPNG画像だったときのもの、右側のロゴがSVGデータになったものです。
結果、4K、5Kで見ても、スマホでズームインしても、ずっと、クッキリ表示のままの、綺麗なロゴになりました!
そもそも、どうして画像がボケてしまうの?
デスクトップで見たときは、普通にキレイだったのに、iPhoneでみると、画像がボケているということがありますよね。
これは、iPhone4以降(※1)の機種や、Retinaディスプレイ対応のデバイスでよく見受けられます。
理由を簡単に云うと、非常に美しい高解像度のディスプレイ(デジタルハイビジョンよりも)が採用されているから、それまでの画像が荒く見えてしまうことがあるんですね。
(※1)Retinaディスプレイは、Apple社がiPhone4を発売する際に、初めて搭載
つまり、これまでの画像の2倍、iPhone 6 Plusに対応させるなら3倍のサイズを用意しなければ、キレイには映らないからなのです。
Retinaに対応させる方法はいくつかあります
画像をRetinaディスプレイで見ても、美く映えるように対応させる方法は、いくつかあります。画像を、通常のブラウザ用、Retinaの2倍、Retinaの3倍用など、複数用意するのでも良いですし、JQueryを利用してScriptで対応してしまう方法もあります。SVGデータと差し替えるというやり方もあります。
今回は、単純な形のロゴを対応させたかったので、SVGデータと差し替える方法を選びました。
SVGはベクター形式のデータなので、拡大しても美しいシェイプを保てる
PNG画像やJPG画像は、ビットマップ形式なのに対し、SVGはベクター形式のデータですから、縮小しても拡大しても、クッキリしたシェイプ(輪郭)を保つことができるからです。
さらに、サイトを制作する際の手間も省けます。
画像を表示させる時の、imgタグが使えますので、Retina用に画像を2枚用意する必要がなくなって、ソースも複雑なものを使わなくてすみますね。
IEの8以下と古いブラウザでは対応していない
デメリットは、古いブラウザでは対応していない点です、IEの8以下、Android2.3X以下、フューチャーフォンは対応できていません。
それでも、自社サイトの訪問ユーザーが、スマホ中心だったり、そもそも、古いブラウザはサポートできない機能を提供するようなサービスだったりする場合、導入するメリットの方が大きいかもしれません。(このあたりは、各自で検討してください)