JPEG と GIF と PNG

現在 IE や Netscape などのメジャーどころの Web ブラウザで Plug-In や外部プログラムを介することなく表示できる (表示する) 画像フォーマットは 3種類あります。 JPEG と GIF と PNG です。それぞれの特長をイ〜カゲンにまとめて比較してみました。鵜呑みにしない程度に参考にしてください。
今読み返してみると、なんだかインチキくさい説明だなァ…我ながら…。

2002-4-8 追記 :
これは元々はある知人向けに個人的に用意した表で、情報の正確さに関しては保証できません。
ちなみに PNG の扱える色数についてウソ書いてたようです。すびばせん。ちょっと直しました。
2004-8-26 追記 :
GIF の (正確には GIF で使っている圧縮アルゴリズム LZW の) パテントが切れていたので修正。 あと参照リンク先ページがかたっぱしから消えてたんで修正。 (有益そうな参照先ページはいっぱいあるので、より詳しい / 正確な情報は各自検索なさることをおススメ)
2006-6-11 追記 :
PNG の可逆・非可逆に関する記述がよく読んだらヘンだったのでちょっと修正…。 (今ごろになって… orz)
フォーマット JPEG (Joint Photographic Experts Group) GIF (Graphics Interchange Format) PNG (Portable Network Graphics)
読み方 ジェイペグ ジフ (「ギフ」派もいる) ピング
拡張子 .jpg .jpeg .jpe など .gif .png
扱える色数 フルカラー *1 256色 (インデックスカラー *2) フルカラー以上 *10 / 256色までのインデックスカラー / 65536階調のグレースケール
圧縮方式 非可逆圧縮 *3 可逆圧縮 / 非可逆圧縮 *4 可逆圧縮 ( / 非可逆圧縮) *5
圧縮率 高い (条件による) そこそこ そこそこ (可逆圧縮の割には高い)
長所 非可逆圧縮なので、どんな画像に対しても全般的に圧縮率が高い。特に写真などの自然画 (色数が多くパターンが複雑な画像) は画質の劣化が目立ちにくい ベタ塗りの (イラスト調・アニメ調の) 画像に向く。色数 256色以内の画像であれば元画像を再現可能 (可逆圧縮) 。一部の色を透過色にして背景を透過表示したり (透過GIF *6)、単体でアニメーションさせたりできる (アニメーション GIF *7) 画像の性質に合わせて内部的圧縮方式を変えられるため、どんな種類の画像でも劣化なく圧縮できる。圧縮率も良好
短所 圧縮率を上げるほど元の画像より確実に画質が落ちる (モスキートノイズ、ブロックノイズと呼ばれるノイズが乗る。元絵がベタ塗り調なほど劣化が目立つ)。非可逆圧縮なため、元の画像を完全には再現できない。 256 色までしか扱えないため、色数の多い (複雑な) 画像にはあまり向かない。パテントの問題がある。 *8 JPEG と比較すると、自然画の圧縮率は (画像劣化はしないが) 低い。GIF と比較すると、アニメーションや透過が使えない。*9 古いブラウザでは対応していない (画像が表示されない) ことがある。
得意な画像のタイプ 写真などの自然画 ベタ塗り調なイラスト・カット類 (256色以内ならカンペキ) 、一部を透明にして透過させたい絵など 透過やアニメーションの必要がないイラスト・カット類。元の画質を失いたくない自然画
  1. フルカラー
    基本的には、約1600万色の色セットのこと。 (その内訳は光の三原色の赤(Red) 緑(Green) 青(Blue) 各 8bit (256階調)。 256×256×256 = 16777216色) 人間の目には十分な色数、と言われています。
    トゥルーカラーとも言うらしい。
    また、 RGB 各色 5ビット + 1ビット (RGB どれかの色もしくは別の用途に割当てられるか無視される) の計 16ビットで表現される 65536色は「ハイカラー」と言うらしい。
  2. 256 色インデックスカラー
    256通りしか色が使えないけど、各色は1600万色から選択されるので、例えば256階調の単色 (白黒等) グラデーションも表現できます。(一般的に、インデックス色の個数は決まっていませんが、GIFの場合は最大 256個、ということです)
    パレットカラーとも言うらしい。 (たぶん…)
  3. JPEG の非可逆圧縮
    元に戻せない形の圧縮。JPEG の場合、人間が見た時に違いに気づきにくい細かい情報をはしょって (情報を捨てて) 圧縮しているので、圧縮後の画像からは決して圧縮前の画像に戻すことはできません。
    ちなみに可逆圧縮の JPEG フォーマット (ロスレス JPEG) もあるらしい…。 (一般にはまず出回ってないと思うけど)
    さらに JPEG2000 なんつー新しい規格もあるらしいが今はどうなっているんだろう…。
  4. GIF の可逆圧縮/非可逆圧縮
    GIF の場合、基本的には 256色しか使わず、圧縮した後も完全に元の画像に戻せますが、肝心の元画像が 257色以上の色を使っている場合、256色以下にまず減色する必要があり、その段階で色情報を捨てる結果非可逆圧縮になってしまいます。要するに、元の画像が 256色以下の色しか持っていなければ可逆圧縮、そうでない場合は非可逆圧縮、ということができるでしょう (たぶん) 。
  5. PNG の可逆圧縮
    PNG フォーマットの場合、フルカラー以上の画像を圧縮する場合は完全に元に戻せる形の圧縮しかしません。 インデックスカラーの場合は、 GIF の可逆/非可逆と事情は同じです。 (256 色以下の画像なら完全に可逆圧縮。 しかし元画像が 257 色以上ある場合はまず 256 色以下に減色する必要があるため、その段階で非可逆な変換が発生してしまう。 グレースケールの場合も同様)
  6. 透過 GIF
    256個あるパレット色のうち、1色以上を「透過色」として指定すると、その色の箇所だけ背景の色や画像が抜けて表示される。四角以外の形状の画像を表示させたい場合などに使用する。
  7. アニメーション GIF
    1つの GIF 画像ファイルの中に、複数枚の GIF 画像と、それらをどういうタイミングでどのくらいの時間 (100分の1秒単位) 表示するかの指定、の組み合わせを含んでいるフォーマット。
  8. GIF のパテント
    米 UNISYS 社の日本における LZW アルゴリズム (GIF 画像で使用している圧縮方式) の特許は、 2004年 6月 20日に失効しました。
  9. PNG の透過 / アニメーション
    透過は PNG の規格としては (アルファチャンネル での透過まで含めて) サポートしているが、まだブラウザの対応状況がまちまちな模様。 意図どおりの表示がされない可能性があるので、その辺が心配な場合はむやみに使わない方が無難かもしれない…。 (少し古めのバージョンのブラウザを切り捨てるなら話は別??)
    ブラウザ (バージョン/OS) 別の PNG 画像対応状況が「PNG についてあれこれ」のページにあった。
    アニメーションに関しては PNG 自体はサポートしていないが、別途 MNG というフォーマットが存在する。というより PNG は MNG の下位仕様らしい…。詳しい話は「次世代画像フォーマットユーザーズグループ(NGIF-UG)」あたりを参照。 (丸投げ) Mozilla / Netscape 6 以外のブラウザでは表示させるために別途 Plug-In が必要。
  10. PNG で扱える色数
    RGB 各 8ビット・計 24ビットのフルカラーの他に、 RGB 各 16ビット・計 48ビットの色が扱えるらしい。また、アルファチャンネルの他、ガンマ値も含められるらしい。他に 256色のインデックスカラーと 65536階調のグレイスケールをサポート。 (GIF のグレイスケールはインデックスカラーの応用なので 256階調まで)

参考ページ

戻るのよ〜