スマホで見るとなんか画像がぼやけるな～ そんな時の対処法

ratinaディスプレイのmacやスマホなど、高解像度デバイスで見たとき画像が粗い。。特に自社サイトでトップ画像やロゴが鮮明じゃなかったら、古臭い感じがしてすぐに改善したくなるもの。
そんな時の最新の対処法をご紹介します。

「SVG」ファイルを使おう！

「SVG」（Scalable Vector Graphics）とは、一般的に使われる画像形式であるjpegやpngなどのビットマップ画像とは異なり、Illustratorで作成したようなベクター画像を表示する技術です。ベクター形式の画像は、拡大縮小しても画質が劣化しません。
また高品質なグラフィックでもファイルサイズが小さいのが特徴で、CSSで背景として指定することもできます。その画像表示の柔軟性によって、パソコン、スマホ、タブレットとWebサイトのレスポンシブルデザイン化をサポートしてくれる画像形式と言えるでしょう。

ではちょっと2つの画像形式をおさらい

画像形式は大きく2種類に分類されます。まずそれぞれの特徴と、メリット・デメリットを見ていきましょう。

・ビットマップ（ラスタ形式）
画像を色のついた点を集めて画像全体を表現しているデータのことです。写真の加工や立体的な加工の際にはラスタ形式が有効です。
ファイル形式には.bmp.gif.jpeg.png.tiff.xpmなどがあります。
色のついた点だけで表現しているため、複雑な図形でも表示が容易になります。
また画像表示におけるコンピューターの処理負荷が軽いという利点もビットマップ形式ならでは。
逆に、拡大や縮小に弱いのがタマにキズ。画像が点で表現されているので、画像崩れが起きたりぼやけたりする点が難点です。

・ベクター形式
こちらは画像を点ではなく、画像や文字などの2次元情報を数値化して記録する形式です。アイコンやロゴ、地図など平面的なイラストに適した形式です。
ファイル形式は.esp.pdf.svg.wmfなど。
画像を点の座標であるアンカーと線であるセグメント、そして面の方程式や塗りつぶしなどの加工で構成されており、Illustratorなどのドローソフトで採用されている形式です。
ベクター画像はビットマップ形式とは対極的に、拡大や縮小に対して柔軟に対応します。画像崩れもなければぼやけたりもしません。画像の解像度を気にする必要がないため、ビットマップ形式とは異なりファイルが重くならないのもメリットの一つ。
複雑な画像の表示や細かい画像の描写には向いていないものの、ビットマップ形式でアイコンやロゴを作る際に、いくつも違うサイズのものを用意する必要がなく、かつ 高解像度ディスプレイに対応できる点は見逃せませんね。

SVGに対応しているブラウザ

SVG形式の画像を表示できるブラウザとそうでないものがあります。古いIEでは表示できませんので、リニューアル時のブラウザ確認などでビビらないでくださいね。

SVGのサポート状況は以下のとおりになります。

Internet Explorer 9以上
Firefox 3.0以上
Chrome 4.0以上
iOS Safari 3.2以上
Androidブラウザ 3.0以上

普通に使っているパソコンならまず大丈夫でしょう。

ロゴは会社の象徴だから

もし、スマホで自社のWebサイトのロゴがぼやけている場合は、Web担当者か制作会社にSVG対応ができるか聞いてみましょう。
ロゴはコーポレートアイデンティティを構成する要素の一つです。このような要素をビジュアルアイデンティティと呼びますが、企業ビジョンや理念から導き出されたいわば企業イメージをイラストにしたものです。それがビットマップ形式のせいでぼやけているなんて、信じられませんよね？
ロゴは企業の顔、Webサイトの顔です。一番目に入るところなので、拡大されようが縮小されようが、いつも同じクオリティを保っていなければならないのです。

まとめ

もし、あなたの会社の大事なロゴがぼやけていたりしたら…今すぐSVGでロゴを作りなおすべきです！すぐに対応できないなら早急に改善案の検討を！