iPS77の会員でファビコンの議論? がある...
自分もGIFとPNGの違いは何となく知っているが、確認の意味を含めて情報を収集した。
- どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました
■ JPG(Joint Photographic Experts Group) JPGはジョイント・フォトグラフィック・エキスパート・グループ(Joint Photographic Experts Group)がプロのカメラマンの標準となるべく開発したファイルのタイプです。
ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮します。
この圧縮は非可逆圧縮です。つまり、一度圧縮してしまうと元には復元できないのです。しかしながら、大きな画像を驚くほど小さいデータにすることができます。
また、JPEGは圧縮率を自由に設定(普通は2:1から100:1まで)することができます。アンチエイリアスによって、しばしばぼやけたり、かすれたりするので、活字や線、またシャープな輪郭を含む写真にも向きません。■ GIF (Graphics Interchange Format) GIFはJPEGと同じように古くからあるファイル形式です。GIFは写真以外の画像をサポートするのに使われていました。
GIFはTIFFファイルが用いるのと同じ、LZW圧縮を採用しています。この技術は一度、特許の問題で論争を起こしましたが、今では全ての特許の有効期限が切れているので問題なく使うことができます。
GIFファイルは8ビットカラーのファイルです。画像内で、CLUT(Color Look Up Table)と呼ばれるカラーパレットにある256色しか使うことができません。
GIFの特徴としては透明色が使えることに加えて、動画を作成することができます。■ PNG (Portable Network Graphics) PNGはPortable Network Graphicsの頭文字ですが、人によってはPNG-Not-GIFと言う人もいます。GIFが使用しているLZW圧縮が特許の問題で論争を起こした時に、GIFに代わるオープンな技術として開発された歴史があるためです。 PNGはGIFよりも透明色を用いた画像を作るのに適しています。
PNGはGIFのように8ビットカラー画像をサポートしていますが、JPGのように24ビットカラーRGB画像もサポートしています。可逆圧縮で、画像の質を落とすこともありません。
ただPNGはこの3つのファイル形式の中ではファイルサイズが1番大きくなりがちです。また古いブラウザではサポートされていない場合もあります。 - BMP,JPG,GIF,PNG 画像フォーマットの違いを歴史的背景から解説(道すがら講堂 2012.12.16)
∵上記 1. には BMP形式が載っていないので、2020-01-26 に追加した。BMP -Microsoft Windows Bitmap Image-/特徴
- 基本的に無圧縮のため、画像の劣化がほとんどない。(圧縮できないわけではない)
- モノクロ2階調(白と黒のみの2色)から24bitフルカラー(16,777,216色)までサポート。(最大ビット深度は24bit)
- 無圧縮のため、データ容量が大きくなりがち。
- 透過処理は不可。
- 解像度とビット深度が同じならばデータ容量が同じ。
BMP画像は1つのピクセルに対して大真面目に、しかも単純に情報をひとつ記録しています。(圧縮処理をしていない) 色の指定方法ですが、まず色を 赤(R) / 緑(G) / 青(B) の3つに分割して、それぞれの濃度を0~255の全256段階で指定します。光の三原色ですね。これらの値を増減させることであらゆる色を表現します。(加法混色といいます)
このように、光の三原色を利用した色の表現法を「RGB」と呼んでいます。 - 画像形式の違い[JPEG/GIF/PNG]
ホームページで利用できる画像3形式の特性を下表にまとめてあります。使用用途に応じて最適な画像形式を選んで下さい。
画像形式 JPEG GIF PNG BMP*1 画質の劣化 不可逆圧縮
(画質劣化あり)可逆圧縮
(画質劣化なし)可逆圧縮
(画質劣化なし)圧縮していないため劣化なし
最大色数 約1678万色(24bit) 256色(8bit) 約1678万色(24bit)
約280兆色(48bit)約1678万色(24bit)
透過処理 透過不可 透過可能(1色) 透過可能(1色・アルファチャンネル) 透過不可
アニメーション アニメ不可 アニメ可 アニメ不可
(※アニメ形式はAPNG)アニメ不可
徐々に表示
(インターレースなど)可能 可能 可能 不可能
(引用しておいて、こういう事しか言わないのはマナー違反ですが、今はこれしか言えません... m(._.)m)
Windows7 のペイントで、透過処理ができるか試行錯誤した‥‥ が、出来なかったぁ〜
*1:2020-01-26 独自に追加した。