Friction River Software - 画像形式の説明（会話風）

Ａ子

我が社のホームページで使ってる画像ってさ
「じふ」ってやつなの？

Ｃ菜

違いますよ～

PNGピングとJPEGジェイペグの二種類です～

Ｂ美

Ａ子、いきなりどうしたのよ

Ａ子

いや、知り合いの社長に聞かれてさ

その人の会社のホームページでは「じふ」画像を使ってるらしいんだよね

Ｂ美

ふむ、GIFジフにはGIFジフの良さがあるから別に批判はしないけど、今どきのWebページとしてはちょっと珍しいかもね

Ｃ菜

そうですね～

今の時代って、写真だったらJPEGジェイペグで、イラストなんかの写真以外の画像についてはPNGピングが主流だと思うです～

Ａ子

なんでそんなにたくさんの画像形式があるのよ

面倒くさっ！

Ｂ美

うーん、これは一度きちんと講義しておくべきかしら？

Ａ子

あっ、やっぱ今の無し（汗）

そこまで気にしてないから…

Ｃ菜

私もなんとなく使い分けてるだけなので、講義していただけるのはありがたいですね～

Ａ子社長も一緒にＢ美部長の講義を受けるです～

Ａ子

うへぇー

Ｂ美

それじゃ今から、コンピュータ上で利用できる画像形式フォーマットについての説明を始めます
主にWeb系の話をしていくから、きっと役に立つはずよ

ちなみに、さっきＡ子が言った「たくさんの画像形式」って言葉だけどさ
さっき出てきた３つ以外にも、もっとたくさんの、具体的には十数個の形式フォーマットがあるんだからね

Ａ子

えぇー、それを全部覚えなきゃいけないの？

Ｂ美

いいえ、常識として知っておくべき画像形式フォーマットは４つくらいかしら

ラスター画像として、GIFジフ、JPEGジェイペグ、PNGピングの３つ
ベクター画像としては、SVGエスブイジーくらいを知っていれば十分よ

あ、Web系に限定すれば…ってことだけど…

Ａ子

らすたぁ？べくたぁ？

…って、何なの？

Ｃ菜

画像を点ドットの集合として取り扱うのがラスターで、数式によって表現するのがベクターだったはずです～

うろ覚えですけど～

Ｂ美

さすがはＣ菜ね、正解よ

Ａ子も「一つの画像ファイルが点ドット、言い換えれば画素ピクセルの集まり」ってことくらいは知ってるわよね？

Ａ子

まぁ、そのくらいは…

デジタルカメラの性能を表すのに「何百万画素」なんて言ったりするよね
あれって、一つの画像を何個の画素ピクセルで表すかって意味でしょ？

Ｂ美

その通り

あ、どうでもいい余談なんだけど、「ピクセル」って造語だからね
あれって「Pictureピクチャー Cellセル」の略だから…

Ｃ菜

えぇ～！
そうだったんですかぁ～？

「ピクセル」って、一つの英単語だと思ってました～

Ｂ美

まぁ、それはいいとして…

例えば横方向に300個の点ドットが、縦方向に200個の点ドットが並んでいる場合、その画像の点ドットの総数は？

Ｃ菜

簡単ですぅ～

300×200で60,000点ドット、言い換えれば60,000画素ピクセルになります～

Ｂ美

その点ドット一つ一つが二色（白黒）なら1点ドットあたり1ビットになるんだけど、普通はカラー画像よね

もしも256色を実現したい場合、1点ドットあたりの情報量は何ビットになる？

Ａ子

256は2の8乗だから、8ビットね（ドヤ顔）

Ｂ美

お、やるじゃん
正解よ

では、1,677万色だったら？

Ａ子

うぐっ…

Ｃ菜

えっとですね～

256×256×256ってことですから、24ビットだと思うです～

Ｂ美

Ｃ菜正解！

24ビットつまり3バイトってことは、さっきの大きさの画像ファイルのファイルサイズはどうなると思う？

Ｃ菜

60,000個の画素ピクセルの一つ一つが3バイトですから、180,000バイトです～？

Ｂ美

そう、約180KBキロバイトってことね

あ、ちなみに24ビット色、つまり1,677万色のことを「フルカラー」と呼んで、コンピュータ上での最大の色数としているわ
なぜなら人間の眼球（及び脳）の性能的に、これ以上の色の違いを識別できないから…（苦笑）

Ａ子

あれ？ちょっと待って…

横300×縦200の画像って、めっちゃ小さいよね？
それって数KBキロバイトくらいのファイルサイズだったような？

Ｂ美

そうね、せいぜい5～30KBキロバイトくらいかしら

Ｃ菜

あ、分かったです～

圧縮してるんですよね～？

Ｂ美

正解！

でもね、圧縮って大きく分けて二種類あるのよ
一つは『可逆かぎゃく圧縮』、もう一つが『非可逆ひかぎゃく圧縮』

Ａ子

かぎゃく、ひかぎゃく？

また、なんだか難しげなことを…

Ｂ美

難しくないわよ

逆もまた可なり、つまり圧縮したファイルを元に戻す際、完全に元の状態にまで復元できるってのが『可逆かぎゃく圧縮』
可逆かぎゃくに非あらず、つまり完全には元の状態に戻せないのが『非可逆ひかぎゃく圧縮』よ

Ａ子

元に戻せないってダメじゃん

それって問題にならないの？

Ｂ美

プログラムとかテキストファイルとか、あとWordやExcelのファイルなんかだとダメね
1ビットでも正しく復元できないと、そのファイルは壊れることになるわ
（まぁ、テキストファイルについては、運が良ければ一部分が文字化けするくらいだけど…）

でも、画像ファイルの場合、少しくらいなら劣化していても問題にならないの
なぜなら画像（特に写真の場合）って、多少の劣化には気付かない、いえ気付けないから…（笑）

Ｃ菜

それもまた「人間の目の性能的に」ってことですか～？

Ｂ美

そう

だから、目の良い人は気付くかもね

Ａ子

いや、別に『可逆かぎゃく圧縮』で良いじゃん

『非可逆ひかぎゃく圧縮』なんて使わずに…

Ｃ菜

多分ですが、『非可逆ひかぎゃく圧縮』のほうが『可逆かぎゃく圧縮』よりもファイルサイズが小さくなるんじゃないでしょうか～？

Ｂ美

さすがはＣ菜ね
その通りよ

で、画像形式フォーマットの話に戻るんだけど、GIFジフとPNGピングが『可逆かぎゃく圧縮』で、JPEGジェイペグが『非可逆ひかぎゃく圧縮』になるのよ

あ、ただし注意が必要なのがGIFジフね
これって圧縮アルゴリズムが可逆なのは確かなんだけど、オリジナル画像より劣化する場合があるの

Ａ子

んんん？どういうこと？

可逆なのに劣化？

Ｃ菜

あ、色数です～

GIFジフって「フルカラー」じゃなくて、もっと少ない色数しか使えなかったはずですぅ～

Ｂ美

そう、PNGピングとJPEGジェイペグは「フルカラー」なんだけど、GIFジフって256色までしか使えないのよ

要するに、1点ドットあたりの情報量が3バイト（24ビット）じゃなくて、1バイト（8ビット）しかないってこと
そのおかげで『可逆かぎゃく圧縮』であるにもかかわらず、小さなファイルサイズを実現できているってわけ

Ａ子

なるほどねー

だから写真はJPEGジェイペグで、写真以外はPNGピングなのか…
どっちも「フルカラー」だもんね

Ｂ美

そういうこと

これでラスター画像の代表格３つは理解できたかしら？
あ、当然だけど、この３つはブラウザソフト上に描くことのできる画像形式フォーマットだからね

下に３つの画像の比較を表示してみたわ
自分の目で確認してみてね

Ｃ菜

GIFジフだけ何だか汚れてます～
少ない色数で写真を表現しようとしているからですね～

あ、あとラスターって、英単語としてはどういう意味なんですか～？

Ｂ美

Rasterラスターは「走査線」って意味なんだけど、今やブラウン管式のテレビなんて無いから、とてつもなく説明が難しいわね

まぁ、気にするなってのが結論ね（苦笑）

Ａ子

GIFジフのメリットって、ファイルサイズ以外に無いの？

Ｂ美

そうね、「透過とうかGIFジフ」や「アニメーションGIFジフ」を作れるってのが利点の一つね

「透過とうかGIFジフ」というのは、画像の背景を透明にして、後ろが透けて見えるようにしたもの
「アニメーションGIFジフ」は、動画のように動きを加えたものね

Ｃ菜

PNGピングでは同じことって、できないんですか～？

Ｂ美

PNGピングのほうがもっと高性能よ

「透過とうかGIFジフ」って透明にする部分は100%透明になるんだけど、PNGピングの場合は1点ドットごとに透明度を設定できるの
これを「アルファチャンネル」って呼んでるわ

だからこそPNGピングって、1点ドットあたり4バイトの情報量になるのよ（透明度設定の「アルファチャンネル」が1バイト分ある…つまり透明度は256段階で設定可）

Ａ子

アニメーションは？

Ｂ美

動画PNGピングもあるわよ
これを「APNGエーピング」と呼びます
LINEのアニメーションスタンプでも使われてるから、結構有名ね

まぁ、GIFジフでできることは、だいたいPNGピングでもできるのよ
だってPNGピングって、GIFジフに対抗して生まれた画像形式フォーマットなのだもの

Ｃ菜

え？それは知らなかったです～

なぜわざわざ新しい画像形式フォーマットを作ったんですか～？

Ｂ美

GIFジフの圧縮アルゴリズムって『LZW』方式と言って、ある会社が特許権を持ってたの（現在は権利消滅）
だから完全にフリーな（無料で使える）画像形式フォーマットを作ろうって考えたわけ

PNGピングの語源は、「Portableポータブル Networkネットワーク Graphicsグラフィックス」の頭文字を取ったものなんだけど、「PNGピング notノット GIFジフ」って意味もあるのよ（笑）

Ａ子

そっかー

でもさ
そうなるとPNGピング画像ってGIFジフ画像よりもファイルサイズが大きくなるんじゃないの？

Ｂ美

常識的に考えて、そうなるかな（上のサンプル画像でも、PNGピングだけ突出してファイルサイズが大きいわよね）
あと『可逆かぎゃく圧縮』ってこともあるし…

でも今の時代、パソコンの性能がめっちゃ向上してるから、少しくらいファイルサイズが大きくなっても全然問題にならないのよ
インターネットの通信速度も速いしね

Ｃ菜

超・軽いWebページを目指しているならまだしも、そうでないならPNGピングのほうが良いと思うです～

あとはベクター画像の説明ですね～

Ｂ美

ベクター画像は、数式で画像を表現するものよ

例えば、画像の左上を原点（0, 0）として、「（10, 20）の点から（40, 20）の点まで太さ2で赤い色の直線を引け」なんて命令を記述するの
ブラウザソフトはこれを解釈して、その通りに描画するってわけ

Ａ子

えっと、その例だと上から20ドットの位置に長さ30ドットの横棒が引かれるってことかな？

（X座標, Y座標）とするならだけど…

Ｂ美

その認識で間違いないわ

ベクター画像の一つであるSVGエスブイジー画像って、実は単なるテキストファイルだったりするのよ
だからこそ、Windowsの「メモ帳」なんかのエディターソフトで簡単に編集できるってわけ

そうね
こんな感じかしら

<?xml version="1.0" encoding="UTF-8"?>

<svg
　　xmlns="http://www.w3.org/2000/svg"
　　width="300"
　　height="200"
　　viewBox="0 0 300 200">

　　<rect x="0" y="0" width="300" height="200" stroke="while" fill="white" />
　　<circle cx="150" cy="100" r="66" stroke="red" fill="red" />
</svg>

これをブラウザ上に表示したものが下の画像よ（わかりやすいように背景を灰色にしています）

Ｂ美

簡潔に説明すれば

・原点（0, 0）から幅300ドット、高さ200ドットの四角形を白色の線で描き、その中を白色で塗りつぶせ
・座標（150, 100）を中心点として半径66ドットの円を赤色の線で描き、その中を赤色で塗りつぶせ
（上記SVG画像ファイルの中の赤文字の部分）

ってわけ
簡単でしょ？

Ａ子

要するに、幾何学的な図形を描くなら良いけど、フリーハンドで描く人物イラストなんかには向かないって認識でOK？

Ｂ美

そうね

なのでベクター画像って、CADキャドでよく使われているのよ

Ｃ菜

設計図を描くときなんかに使うソフトですよね～？

あ、でもブラウザ上で使う利点が分からないです～

Ｂ美

一つはファイルサイズの小ささね
さっきのSVG画像のファイルサイズって、約300バイトだから…
（だって、単なるテキストファイルだもの）

あと、ラスター画像って点ドットの集まりだから、拡大表示すると斜め線の部分なんかがガタガタになるわよね
でもベクター画像だったら、拡大するつど描画し直すから、常に滑らかな線が引けるってわけ

下の画像の左半分がラスター画像を拡大したもので、右半分がベクター画像なのよ
比較すると一目瞭然でしょ？

Ａ子

おぉ、分かりやすい！

Ｃ菜

ですです～？

あ、ベクターの英単語の意味って何ですか～？

Ｂ美

つづりはVectorよ

もう分かったんじゃない？

Ｃ菜

もしかしてベクトルですか～？

Ｂ美

そう、数学的には「方向量」「大きさと向きを持った量」なんて言うわね

Ａ子

なるほどねぇ

画像を数式で表現するって説明にマッチしてる気がする（なんとなく…）

Ｂ美

さて、総括すると…
Web系（Webページ）では

・写真をJPEGジェイペグで、写真以外をPNGピングまたはGIFジフで描く
・必要に応じてベクター画像であるSVGエスブイジーを使用する（ただし、これは無理に使う必要無し）

…って感じかな

Ｃ菜

分かりましたです～

Ａ子

うん、理解した

しっかし、あいつはGIFジフだなんだと自慢げに話してたけど、そんなにたいした話じゃなかったじゃん

Ｃ菜

知り合いの社長さんのことですかぁ～？

Ｂ美

いや、Ａ子…
まさか、あんた

付け焼き刃の知識でマウント取ろうなんて考えてないでしょうね？

Ａ子

ぎくっ…（汗）

PNG画像	JPEG画像	GIF画像

62KB	16KB	14KB