WEBに関わっていると必然的に耳にする画像ファイルの拡張子。
いろいろあるけど、「なにがどう違うの???」という、そこの貴方へ。

美容師駆け出しの頃、お金がなくて近所のお年寄りの大型犬の散歩をする代わりにご飯を食べさせてもらっていました、T.Kです。

ムサシ(セントバーナード)、ゴハンの上にのっていたウィンナーもらってごめんね!!

本日は「画像ファイルのアレコレ」後編、最終回です。

前回までのリンクはコチラからどうぞ
意外と知らない 画像ファイルのアレコレ <前編>
意外と知らない 画像ファイルのアレコレ <中編>

最終回はもちろん「ベクター画像」についてです。

【前編】ヴェジェ画像

「ベクター画像」は変幻自在!

「ベクター画像とは、拡大縮小しても劣化しない、点と線と塗りで構成されている画像」という前編のお話を覚えていますでしょうか?

ただし、このままではパソコンなどで誰もが見ることはできません。

あれ??じゃあ、なんの為のベクター???となりますが、一つ事前にやらなければならないことがあるんです。

それは「変換」です!

そして何に「変換」するのかというと、それが「ラスター画像」なんです!!

【前編】ピクセル画像

ラスター画像では表現できない滑らかな曲線をベクター画像で作り、誰もが見ることができるラスター画像に「変換」してあげる。こうすることでWEBサイトなどで万人が見ることができるんです。手間ヒマ愛情が、かかっているんですね。

※実は、手作業でベクター画像をラスター画像に変換しなくても、専用ディスプレイやプリンタ側で自動変換する仕組みもあるのですが、処理が重いため快適なPCライフはどこへやら、です。

では、「ベクター画像」の例を挙げていきます。

AI(.ai)

デザインをしたことがある方も、ない方もこの名前を聞いたことがあるのではないでしょうか?

アドビ(adobe)社が誇るベクターツールの雄「Illustrator」の保存形式です!
見たまんま、“エーアイ”と呼ばれています。

ロゴやイラスト・アイコンの作成、更には間隔の調整が得意なので図面やレイアウト調整などによく使われています。

同じロゴでも、ベクター画像とラスター画像ではこんなに違うんです!

efo-raster-vector

ただ、有料ソフトである「Illustrator」を持っていないと開けないファイルでもあるので、互換性は低いです。(「Illustrator」に代わるいろいろなフリーソフトはありますがここでは割愛!)

SVG(.svg)

“Scalable Vector Graphics”(スケーラブル・ベクター・グラフィックス)という長い名前を“エスブイジー”と読んでいます。

これまで「ラスター画像はデータが劣化しやすい」とか、「ベクター画像は劣化はしないけど、そのまま使えない」とか、いろいろ書いてきました。

「PNGのようにいいところを併せ持ったもの作れないのかな?」と、思うようになってもおかしくありません。少しでも無駄を省き、早く、美しく!!

と、思ってたらあるんです。それが「SVG」!
永らく、Internet Explorerからのサポートが得られず、普及には時間がかかりましたが、IE9以降からサポートとなりました。

ざっくりと説明すると、
・ブラウザ上で見ることができるベクター画像
・CSSやJavaScriptによる制御も可能
・WEB上で見ることを前提としているので、印刷には向かない

「プログラミングで制御する画像?? 難しそう…」と思われるでしょうが、はっきり言って難しいです! WEBの知識もさる事ながら、プログラミングの知識も必要になってきます。

しかし、みなさんもすでに「SVG画像」を見たことがあると思います。
例えば「google map」の道路の細かい曲線などはこの「SVG」が利用されています。

efo-googlemapefo-tokyomap

世界中、常にどこかで工事をしていますが、その度にラスター画像を用意していたのではイタチごっこもいいところです。

でも、「SVG」で制作していれば、「ベクター画像」の肝である「数値」を変えてあげるだけで、新たな道も拓けてゆくのです!

SVGのサンプルが掲載されているサイトがあったので、リンクを貼っておきます。
「10分でわかるSVG 応用編」サンプル

「ベクター画像」は、進化していく!

【 ベクター → ラスター 】のように、変換する必要がある。
【 ラスター → ベクター 】は、できなくもないけどオススメしません。

なぜなら、ピクセルで作られている「ラスター画像」を「ベクター画像」に変換したからといって、滑らかになる訳ではないからです。

WEBに特化した画像形式は、これからもっと普及していくことでしょう。

進化という意味では「ラスター画像」も同じです。
最近では「BPG」という“JPEGの半分以下のファイルサイズで、同じ位の画質を実現する”すごいフォーマットも出てきました。

まだ、ソフトウェアとの互換性はありません(専用の変換ファイルが必要)が、スマートフォンの急速な普及の中、「BPG」のようなフォーマットがこれからもっと出てくるかもしれませんね。

最後に

「紙媒体から、WEBへ」どんどん移行していく中で、画像もどんどん進化してきました。
もちろん、紙にもWEBにもメリット・デメリットはあります。

その中で、どんな見せ方がふさわしいのかを今一度考えて、その画像の1枚1枚が、光り輝くようにしてあげたいですよね☆彡

以上、「画像ファイルのアレコレ」全3編、最後までお付き合いいただき、ありがとうございました。T.Kでした!