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

前職は、美容師・アパレルと、WEB業界にはなんの縁もなかったT.Kです。
指一本でタイピング! 電源オフは基本長押し!!

そんな自分がWEB業界で働き始めて3年と少し。
今では、両手でカタカタとキーボードを打ち、電源もきちんと「シャットダウン」ができるようになりました。

そんな日々の中で、WEBに関わる方なら必ず耳にするのが「画像ファイル」。
これがまた、結構種類があるんですよね。

わかる方には「へ?? 知らんの???」くらいに思われるかもしれないですが、知らなかったあの頃は本当に「もう統一してくれよ…」とすら思っていました。

というわけで、自分なりにまとめてみました。
大きく2つに分けることで数多の画像ファイルの意味が異なってきます。
まずは、それぞれの違いから見ていきましょう。

大きく分けよう「ラスター画像」と「ベクター画像」

①「ラスター画像」とは?

聞き慣れない方も多いと思います。自分も初めは「???」でした。
でも、実はとっても身近なものなんです。

<ラスター画像ってこんなもの>
・小さな色の点(ドット)を集めて構成された画像
・bmp 、 png 、 jpg 画像などがラスター画像に分類される

簡単なイラストから、写真のような複雑な画像まで様々なものに利用できます。
普段、携帯電話などで撮った写真はこの「ラスター画像」に分類されます。

ピクセルで構成されているため、拡大していくと小さな正方形の点(ドット)が目立つようになります。

ただ、ピクセルの数は画像を作成した時のものが固定になるので、小さい画像を大きくするとボヤけてしまいます。いくらいい写真をサイトに使いたくても、小さい画像を拡大なんてしてしまったら…

【前編】ピクセル画像

「ラスター画像」を編集するときは、元データの保存をお忘れなく!!

②「ベクター画像」とは?

こちらもデザインに携わっている方ならご存知かと思いますが、現在のWEB制作において欠かすことのできないものになっています。

<ベクター画像ってこんなもの>
・座標(点)とパス(点から点までの間で曲線の度合いを持つ線)で構成される画像
・ほとんどの場合、専用のソフトがないと編集はおろか、開くこともままならない(例:Adobe Illusrator等)

「ベクター画像」は座標、線の色や太さ、線が囲んだ領域の塗りなどで構成されています。ただし、ラスター画像のように多彩な色の配置はとっても難しいんです……。

ピクセルで構成されているラスター画像とは異なり、「ベクター画像」は座標の数値で構成されています。その数値ごとに何十、何百万色の色の指定をしていくなんて、人力では寿命が縮むレベルです。

では、「ベクター画像」にはどんな利点があるのでしょうか?
それは、画像を拡大・縮小しても、座標の数値が自動で計算されていくので、画像劣化が起きないことです! これはラスター画像にはできなかったことですね、素晴らしい!!!

【前編】ベジェ画像

ラスター画像は”点”、ベクター画像は”図形”である

前編では、それぞれの特徴をあげていきました。
ラスター画像にもベクター画像にもそれぞれ長所と短所があり、それを様々な場面で使い分けています。

次回は、「ラスター画像」について、もう少し掘り下げていきます。
それでは、また次回お会いしましょう。T.Kでした!