個人的な感想ですが、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以下、フューチャーフォンは対応できていません。

それでも、自社サイトの訪問ユーザーが、スマホ中心だったり、そもそも、古いブラウザはサポートできない機能を提供するようなサービスだったりする場合、導入するメリットの方が大きいかもしれません。（このあたりは、各自で検討してください）