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

暑くなってきましたねー！
今日は七夕ということで、みなさん短冊にお願い事とかするんでしょうか？☆彡
梅雨はまだ明けてませんが、心の中は天の川！☆彡　T.Kです。

今回は、前回ブログの続きになります。

前回は「ラスター画像」と「ベクター画像」についてお伝えしました。

【前編】ピクセル画像

【前編】ベジェ画像

まだご覧になっていない方はよかったらコチラからどうぞ
意外と知らない　画像ファイルのアレコレ <前編>

中編は、「ラスター画像」にスポットを当てていきましょう！

「ラスター画像」がピクセルであるワケ

「ラスター画像」がピクセルで構成されているということを前回のブログでご紹介しましたが、そもそもなぜピクセルなんでしょうか？

「ベクター画像のように図形で見せればキレイだし分けることもないのに！」と、思った事もあります。でも、ちゃんと理由があるんですよね。

それは「パソコンなどの画面の解像度は“縦×横”のピクセルで構成されている」からなんです！

デジカメや携帯電話のカメラなどに「○○○万画素数」の文字があるのを見たことありませんか？

その「画素数」こそ画面の中にピクセルの数がどれだけあるか。つまり、いかに細かくキレイに見せられるか、ということを表しています。

「ラスター画像」はいろいろな画面で見ることを想定した仕様なんです。
WEBサイトなどで、日々当たり前のように目にしている様々な画像のほとんどが「ラスター画像」といっても過言ではありません！

それでは次に、「ラスター画像」形式でよく使用される画像ファイルを挙げていきます。

【GIF】

自分は「アイコンや画像で作れるアニメーション！」といったら、この「GIF」が浮かびます。
本当の名前は“Graphics Interchange Format”なのだそうですが、長いので“ジフ”と呼ばれています。

256色で構成されていて、簡単なアイコンやロゴ・ボタン等、幅広く使用されています。ですが、最大256色という色味の少なさから、グラデーションなどの色味の多いものには向いていません。

アニメーションにすることが可能なのは、「GIF」が一つのファイルで複数枚の画像を保有できるからこそなんです。パラパラ漫画みたいなイメージですかね。また、透過ができることも特徴の一つです。

複雑な色味ではないものなら、「GIF」で容量を軽くすることも一つの手段です。
「GIF」はデータの内容を整理して、ファイル容量を軽くしてくれます。

【中編】animation

【JPEG】

デジカメやスマホで写真をとると大体がコレですよね！
本当の名前は“Joint Photographic Experts Group“”というそうですが、これまた長いので“ジェイペグ”と呼ばれています。

現在、WEBサイトで最も多く使用されているといっても過言ではありません。
写真などの細やかな色の再現は、「JPEG」が実に16,777,216色で構成されているからなんです！

GIFには表現できない多彩な色数ですが、透過は適用されていません。

ファイル保存時には、データの内容をカットし、ファイル容量を小さくします。
カットといっても見た目はキレイなままに、容量をなるべく小さくできるんです。

ただし、一度データをカットして保存した同じ画像をさらにカットして保存といったように繰り返していくと、だんだんボヤけて劣化していってしまいます……。これは「JPEG」に限らず、ラスター画像の宿命なんですけどね。

【中編】JPEG

【PNG】

「上記で説明した２つを使い分ければいいんじゃないの？」となりそうですが、GIFにはちょっとした大人の事情がありまして……

それというのも特許問題があったんです。
GIFを使うなら￥￥￥ってことですね。

これまで無料で使えていたものに￥を払いたい人がいるでしょうか？
T.Kはいやですね！！(※ちなみに、現在は特許問題は解決済みなのでご安心を！)

そんな時に拳を突き上げたのがこの「PNG」です！　読み方は“ピング”です。

「GIFとJPEGのそれぞれのいいトコ取りを作ってやる！！！」と、言ったかどうかは分かりませんが、とにかく「PNG（Portable Network Graphics）」が生まれるきっかけとなりました。

「PNG is Not Gif」…　という頭文字説もあるとかないとか。

いいトコ取りなので、色の構成数はなんと281,474,976,710,656色！桁数を数えるのも一苦労ですね。

GIFの特徴でもある透過もできるので、JPEG並みの色数を保ったままアイコンやロゴ等に幅広く使用できる優れモノです。（ただし、アニメーションは未対応）

しかし、「品質がいい＝ファイル容量が大きい」というラスター画像の宿命は変えられず。

「ラスター画像」は使い分けが重要！

「ラスター画像」は、その特性を理解した上で使い分けましょう！

WEBにおいては、ユーザやサーバへの負担を重くも軽くもできるのが、実はこの画像の保存形式なんです。加工前には元画像は必ず保存しておき、適材適所で変換形式を使い分けてあげるのがミソ。

フォーマット 色数 圧縮方法 透明処理 アニメーション
JPEG 約1678万色 非可逆圧縮(画質劣化あり) なし なし
GIF 256色 可逆圧縮(画質劣化なし) あり あり
PNG8 256色 可逆圧縮(画質劣化なし) あり なし
PNG24 約280兆色 可逆圧縮(画質劣化なし)JPEGよりもサイズが増える あり なし

さて、次回は「画像ファイルのアレコレ」最終回です。
テーマはもちろん「ベクター画像」についてです。

それでは、また次回。T.Kでした！