普段画像を表示する時、jpg、gif、pngを表示します。最近はRetinaディスプレイを搭載したモニターもあり高解像度のモニターで見ると画像が滲んで見えるという現象が起きます。

画像が滲んで見える理由

通常モニターの解像度は72dpiで表示しています。WEBで使われている写真、画像等は全てこの72dpiを基準にできています。Retinaディスプレイは高解像度モニターなので画像の解像度が足りない形になります。iPhoneは326dpiでできているため、iPhone用に最適した画像を用意するには約2倍〜3倍の解像度の画像を用意すると言われています。それがないと画像が滲んで見えるということがおきます。

例えば、150×150サイズのサムネイルの画像を用意するとしたら、Retina用に300×300の画像が必要になります。

Retinaに対応させる方法

Retinaディスプレイに対応させるには、画像をRetinaディスプレイ用に用意する方法があります。しかし、この方法はサイト制作側にとっては同じ画像を通常用(72dpiモニター用)とRetinaディスプレイ用（iPhone、MacBookなど）に用意する必要があります。

基本的に2種類画像を用意してCSSやJavaScriptなどで表示を切り替えたりしている事が多いみたいです。

正直面倒ですよね

正直な話、画像を通常モニター用とRetina用と二つ作り、さらにCSSなどで画像を分けたりしないといけないのは作る側からしても面倒です。時間もかかります。そこで別な方法としてベクター形式の画像を用意して表示させることでこの問題を解決するという方法もあります。

ベクター形式って何？

モニターで表示されている画像の多くが荒れるのは、ビットマップ形式という画像を採用しているからになります。ビットマップ形式の画像は拡大すると荒れるという特性があります。主にPhotoshopなどのソフトウェアはこの方式になっています。対してベクター形式というのは拡大しても荒れないという特性があります。このため、この方法を使えば複数の画像を用意しなくても綺麗に画像が見れるという事になります。

SVG形式はベクター形式

WEBサイトではあまり使われていませんが、SVGはベクター形式のため、どのモニターでも荒れることなく表示することができます。SVGはイラストレーターがあれば簡単に書き出せるため、SVGで書き出す事をお勧めします。

SVGはサーバー側で対応していない

SVG形式の画像はサーバー側でも対応していないため、サーバー側に対応していない場合は使う事ができません。htaccessが使えるサーバーの場合は設定次第で使えますが、このあたりはやってみないとわからないという点があります。

サーバー(Apache)にてSVG対応の設定

[C]
vi /etc/httpd/conf/httpd.conf

#下記を追加します
AddEncoding gzip svgz
[/c]

htaccessでも同じようにすればできるらしいですが、僕はできなかったので諦めてhttpd.confに書きました。