画像形式の違いによるファイルサイズの比較です。
まずは表で３種類(GIF,PNG,JPG)+BMPの形式による差を較べてみます。
間違っている場所もあるかも?色数の部分がちょっとアヤシイです (^^;)
2001.05.25 追記
元画像のBMPのものはテーブルで作っていますが、NNでは見られないみたいです。
GIFかPNGの画像を参考にして下さい。スイマセン。m(__)m
2002.01.06 追記
GIFとBMPの一部をPNGで代用して表示するように変更しました。
必要なファイルが少なくなったので、少し表示が速くなったかも？(^^;)
| [ Fig.1 ] | ||||
| 項目 | GIF | PNG | JPG | BMP |
| 圧縮 | 可逆圧縮 | 可逆圧縮 | 不可逆圧縮 | 圧縮なし (RLEでは有?) |
| 圧縮率指定 | 不可 (固定) | 可 (ソフトによる) |
可 (ソフトによる) | 不可 |
| 最大色数 (上限:24bit迄) |
256色 (8bit) | 16777216色 (24bit) |
16777216色 (24bit) | 16777216色 (24bit) |
| 透過処理 | 可 (1色のみ) | 可 (アルファ チャンネル) |
不可 | 不可 |
| アニメーション | 可 | 不可 | 不可 | 不可 |
| インタレース | 可 | 可 | 可 | 不可 |
| Webでの利用 | 可 | 可 | 可 | 不可(なはず) |
最大色数の他に関連項目としては、どれもグレースケール(8bit)が使えます。
BMP(PNGもかな?)には32bitとか48bitのモノもあるようです。
BMPはWebでは使えないと思っていましたが、
InternetExplorerでは表示できてしまいました。
さて、曖昧なキオクのハナシは忘れて、比較です。
変換にはMicrosoft PhotoEditerを使いました。
このソフトにはPNGの圧縮率を変化させる機能はありません。
JPGは圧縮率を指定できるので、ソレも載せておきます。
最初は10x10dotで白黒(モノクロ1bit)のBMP画像をそれぞれ変換してみます。
元画像はBMPのものですが、コレだけテーブルで作っています、一応。
| [ Fig.2 ] | ||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||
| 画像 |
 |
|
 |
| ||
| ファイルサイズ | 54バイト | 75バイト | 380バイト | 102バイト | ||
| サイズ圧縮率 | 53% | 74% | 373% | 100% | ||
| 備考 | モノクロ 1bit | グレースケール 8bit |
グレースケール 8bit 圧縮率100% 最高画質 |
モノクロ 1bit | ||
JPGだけが異常に大きいです。圧縮率を下げていって1%でも345バイト。
元の画像サイズより大きくなっています。
面積的に小さいもの、色数が少ないものは向かない、という事でしょうか。
また、使うソフトによってもサイズは色々でした。
では、全ての画像の条件を同じにするために、グレースケールで比較したら?
10x12dotで6色(グレースケール8bit)のBMP画像をそれぞれ変換してみます。
元画像はBMPのものですが、コレもテーブルで作っています、一応。
| [ Fig.3 ] | ||||||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||||||
| 画像 |
 |
|
 |
| ||||||
| ファイルサイズ | 853バイト | 83バイト | 394バイト | 1222バイト | ||||||
| サイズ圧縮率 | 70% | 7% | 32% | 100% | ||||||
| 備考 | グレースケール 8bit |
グレースケール 8bit |
グレースケール 8bit 圧縮率100% 最高画質 |
グレースケール 8bit | ||||||
パレットの数の差か、BMPは当然としてGIFもかなりサイズが増えました。
Fig.2でグレースケールだったPNGとJPGはサイズ的にはあまり変化はありません。
元画像のサイズが増えたのでサイズ圧縮率は良くなっています。
JPGは圧縮率を下げて1%では337バイトで、100%との差は少し増えました。
では、同じく8bitでもカラーの256色BMPで比較したら?
16x16dotで6色(パレット256色)のBMP画像をそれぞれ変換してみます。
元画像はBMPのものですが、コレもテーブルで作っています、一応。
| [ Fig.4 ] | ||||||||||||||||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||||||||||||||||
| 画像 |
 |
|
 |
| ||||||||||||||||
| ファイルサイズ | 914バイト | 891バイト | 761バイト | 1334バイト | ||||||||||||||||
| サイズ圧縮率 | 69% | 67% | 57% | 100% | ||||||||||||||||
| 備考 | パレット256色 8bit |
パレット256色 8bit |
True Color 24bit 圧縮率100% 最高画質 |
パレット256色 8bit | ||||||||||||||||
JPGにはパレット256色のモードが無かったので、True Color(24bit)で作っています。
圧縮率を下げて1%では660バイトで、100%との差はまた少し増えました。
パレットの数の差か、BMPは当然としてGIFもかなりサイズが増えました。
サイズ的にはJPGが１番小さいのですが、色が違ってきています。
サイズ圧縮率はどれもそれほど変わらない、といったトコでしょう。
では、同じ画像でも元がTrue Color(24bit)BMPで比較したら?
GIFとJPGは変わらないような気もしますが、さて?。
元画像はBMPのものですが、コレもテーブルで作っています、一応。
| [ Fig.5 ] | ||||||||||||||||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||||||||||||||||
| 画像 |
 |
|
 |
| ||||||||||||||||
| ファイルサイズ | 925バイト | 116バイト | 761バイト | 822バイト | ||||||||||||||||
| サイズ圧縮率 | 113% | 14% | 93% | 100% | ||||||||||||||||
| 備考 | パレット256色 8bit |
True Color 24bit |
True Color 24bit 圧縮率100% 最高画質 |
True Color 24bit | ||||||||||||||||
GIFはパレット256色のモードが上限なので、パレット256色(8bit)で作っています。
なぜかBMPのサイズが小さくなりました。予想外です、大きくなると思っていたのに。
GIFはわずかにサイズが増え、BMPのサイズが小さくなったので、
元画像よりも大きくなってしまいました。
JPGは予想通り変わらないサイズです。圧縮率1%で660バイトなのも変わらず。
PNGがダントツでサイズが小さいです。
ココまで試してみて元画像より大きくなっていないのはコレだけです。
ではチョット脱線(?)して、同じ画像を90度回転させたモノとではサイズが違うのか?
同じ画像でパレット256色(8bit)とTrue Color(24bit)を作り、
それぞれをFig.4(元画像パレット256色)とFig.5(元画像True Color)に対して、
同条件(JPGは圧縮率100%)で比較してみます。
元画像はBMPのものですが、コレもテーブルで作っています、一応。
| [ Fig.6 ] | ||||||||||||||||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||||||||||||||||
| Fig.4 (バイト/圧縮率) 備考 |
914 / 69% パレット256色 |
891 / 67% パレット256色 |
761 / 57% True Color |
パレット256色 | ||||||||||||||||
| 回転後(8bit) (バイト/圧縮率) 備考 |
 899 / 67% パレット256色 |
866 / 65% パレット256色 |
 746 / 56% True Color |
パレット256色 | ||||||||||||||||
| Fig.5 (バイト/圧縮率) 備考 |
925 / 113% パレット256色 |
116 / 14% True Color |
761 / 93% True Color |
True Color | ||||||||||||||||
| 回転後(24bit) (バイト/圧縮率) 備考 |
 928 / 113% パレット256色 |
103 / 13% True Color |
 746 / 91% True Color |
True Color | ||||||||||||||||
ファイルサイズで言えば、全体的にわずかですが、
回転後(縦縞)の方がFig.4・Fig.5(横縞)よりもサイズが小さくなってます。
圧縮する際に縦に同じ色が並んでいる画像の方がイイ(小さくなる)って事でしょうか。
では画像の面積の差で、ファイルサイズにどれほど差が出るのか?
圧縮するので、面積が倍になったらファイルサイズも倍、って事は無いと思いますが、
どの程度増えるのかが問題です。
また、今回Fig.6の結果からサイズが小さくなる方の変換の仕方で作ります。
具体的にはPNGのみTrue ColorのBMPから変換して、
GIFとJPGはパレット256色から変換します。
サイズ圧縮率は元のBMP(8or24bit)のサイズに対して、とします。
画像小は16x16dot、画像大は96x32dotで比較します。
| [ Fig.7 ] | ||||||||||||||||||||
| 画像形式 | GIF | PNG | JPG | BMP | ||||||||||||||||
| 画像小(16x16) バイト/圧縮率 [元画像] から [変換画像] |
914 / 69% [パレット256色] から [パレット256色] |
116 / 14% [True Color] から [True Color] |
761 / 57% [パレット256色] から [True Color] |
(パレット256色) 822 / 100% (True Color) | ||||||||||||||||
| 画像大(96x32) バイト/圧縮率 [元画像] から [変換画像] |
1175 / 28% [パレット256色] から [パレット256色] |
181 / 2% [True Color] から [True Color] |
1954 / 47% [パレット256色] から [True Color] |
(パレット256色) 9270 / 100% (True Color) | ||||||||||||||||
| 大小サイズ比 | 129% | 156% | 257% | 311% (8bit) 1128% (24bit) | ||||||||||||||||
まずBMPのサイズが大きくなるのは当然ですが、
パレット256色よりもTrue Colorの方が2倍位大きくなりました。
面積で言えば12倍になっているのでTrue Colorの、
1128%と言う数字が本当は正しいのでしょう、きっと。
大小サイズ比率で言えば、GIFが最も差が無いです。
大小に関わらずサイズはそれほど変わらない、と言えます。
JPGはその差が１番大きく出ましたが、それでも約2.6倍。
同じ方法で圧縮率1%で作ると883バイト、大小サイズ比率では116%で、
1番成績は良くなりますが、その画像はコレです。
Fig.7のGIFやPNGのものとは全然違う色になってしまいます。
圧縮率1%は極端なので、90%程度にしておけば、サイズも小さく、
画もキレイなものを作ることが出来ると思います。
PNGは大小サイズ比率も割といいのですが、それよりもファイルサイズです。
元がファイルサイズの大きいTrue Colorのものを使っているのに、
そのサイズ圧縮率は画像大で2%、181バイトと群を抜いています。
では最後にバナー(True Color)を作ったらどれが１番いいのか?
画像サイズは一般的な88x31dotで、色数は256色以上使います。
今回はサイズと共にキレイさも比較します。
そのまま変換した時と、Padieで減色してから変換したものも比較します。
(パレット256色のBMPはPadieで減色したものです)
また、テーブルで画像を作るのは無理があるので、
今回はPNG画像を貼り付けてあります。(元と変わらないハズの方です)
| [ Fig.8 ] | ||||
| 画像形式 | GIF | PNG | JPG | BMP |
| [パレット256色]から[パレット256色]へ変換 | ||||
 画像バイト/圧縮率 [色数] |
3054 / 80% [255色] |
2740 / 72% [255色] |
- / - [ - ] |
3806 / 100% [255色] |
| [パレット256色]から[True Color]へ変換 | ||||
| 画像 バイト/圧縮率 [色数] |
- / - [ - ] |
4405 / 116% [255色] |
4703 / 124% [2425色] |
3806 / 100% [255色] |
| [True Color]から[パレット256色]へ変換 | ||||
| 画像 バイト/圧縮率 [色数] |
3050 / 37% [224色] |
2834 / 34% [225色] |
- / - [ - ] |
8238 / 100% [2339色] |
| [True Color]から[True Color]へ変換 | ||||
| 画像 バイト/圧縮率 [色数] |
- / - [ - ] |
5622 / 68% [2339色] |
4548 / 55% [2433色] |
8238 / 100% [2339色] |
この結果が普通に画像を作った場合に近いと思いますが、元の色数に関わらず、
パレット256色かTrue Colorかによってファイルサイズが違っています。
そして最終的にパレット256色の画像もTrue Colorの画像も、
True ColorからTrue Colorへ変換した場合は結構差がありますが、
乱暴な言い方をすると、どの形式でも大差ありません。
BMPだけをみると、減色した方はやはり画像は少し粗い感じですが、
色数が約1割の色だけで表示している事を考えればいい所でしょう。
そしてパレット256色からパレット256色へ変換したGIFとPNGは、
見た目では同じに見えます。可逆圧縮だから当然?
しかしTrue Colorからパレット256色へ変換したGIFとPNGは、
ファイルサイズがほぼ同じであるのに更に粗くなってます。
コレは使うソフトにもよるのでしょうが、減色する時には注意が必要です。
次にパレット256色からTrue Colorへ変換したJPGとPNGは、
あまり変わらないように見えますが、ファイルサイズが大きくなってます。
これならTrue ColorからTrue Colorへ変換したJPGとPNGの方が、
元画像と比較しても断然キレイです。
再現性は(当然?)PNGの方がいいです。JPGは少しボケた感じです。
では結論としてどの形式がどんな物に向いているのか?
ココまでの結果と私的な偏見(ん?)から書いてみました。
| [ Fig.9 ] | |
| GIF |
・アニメーションさせたい時 ・1bitの画像を作る時 ・古い環境(PC、ブラウザ等)で使っている人にも絶対見せたい時 |
| PNG |
・とにかくキレイなままで見せたい時 ・グレースケールの画像を作る時 ・古い環境(PC、ブラウザ等)で使っている人をあまり考慮しない時 |
| JPG |
・写真のような多色の画像を、 古い環境(PC、ブラウザ等)で使っている人にも絶対見せたい時 ・写真のような多色の画像を、ファイルサイズを小さく作りたい時 |
結論からPNGが1番万能であると思います。
新しい規格だから当たり前かもしれませんが。
Netscapeの4.0やInternet Exprolerの4.0ではPNGがサポートされているので、
表示する事は出来ますが、それより古いとダメなようです。
でも、それ以前のブラウザってもう使っている人はあまりいそうに無いし、
この2つ以外のブラウザ使ってる人もどの位いるのかな?
そのブラウザもサポートされてるかどうかにもよると思うので。
PNGのアニメーションが使える、MNGってモノもあるようです。まだ見た事ないけど。
携帯用サイトではi-modeがGIFしかつかえないのでまだ使いますが、
ココまでの比較ではJPGにあまりいい所が無かった、というよりも、
PNGがTrue Colorを使えるので長所が出てきませんでした。
写真のようなもので比較した時には違う結果が出たかもしれませんが、
今回は元になるようなものが無かったので、
機会と元になるものがあれば追加したいと思います。
最後に、ココに書いた事は使うソフトが違えば、結果が違うはずです。
JPGではソフトの違いでサイズがまるで違っていました。
PNGも圧縮率の指定が出来るソフトもあるので、キレイさやサイズは違ってくるでしょう。
つまり、ココの結果が絶対ではないので、色々試してみて下さい。
そして判った事があれば、ココの記述が間違っている、とかでも、
教えていただけるとありがたいです。
2001.08.08 追記
MNGはプラグインを使えば見られる事が判りました。
でもまだHPに使ってる人はあまりいないようです。