どうやって使い分けるべきなのか。JPG・PNG・GIFの違いをまとめてみました。

人間がデジタル技術を開発して以来、開発され続けてきた画像の保存形式。
開発過程には、それこそ色々な種類がありました。
しかし、現代のブラウザや、一般的な利用者のニーズに合わせて、現在ではJPG、 PNG、 GIFが3強です。

もちろん、それぞれ長所と短所がありますが、それぞれどこがどう違うのでしょうか。

JPG（Joint Photographic Experts Group）

JPGはジョイント・フォトグラフィック・エキスパート・グループ（Joint Photographic Experts Group）がプロのカメラマンの標準となるべく開発したファイルのタイプです。
ファイル内の冗長性を見つけて圧縮するZIP形式のように、JPGは画像データをピクセルと呼ばれるタイルに分割することでデータを圧縮します。
この圧縮は非可逆圧縮です。つまり、一度圧縮してしまうと元には復元できないのです。しかしながら、大きな画像を驚くほど小さいデータにすることができます。
また、JPEGは圧縮率を自由に設定（普通は2：1から100：1まで）することができます。

高画質JPGを拡大したもの

低画質JPGを拡大したもの

しかし、JPGはデータを損失するという特徴を持つため、アートファイルを保存するには理想的な形式とは言えません。画像にもある通り、たとえ圧縮率を低くして最高品質にしたとしても、見た目にはちょっとしか変わりません。
アンチエイリアスによって、しばしばぼやけたり、かすれたりするので、活字や線、またシャープな輪郭を含む写真にも向きません。

非可逆圧縮の一番厄介なところは、保存をするたびにデータを損失するということです。アートファイルを保存するためにJPEGを使っていたとしても、それはただJPEGがすごく一般的な画像形式だという理由からにすぎません。
ジョイント・フォトグラフィック・エキスパート・グループはJPEGの品質劣化という特性を克服するべく開発を行い、JPEG 2000を生み出しました。
Appleプレビューなど、いくつかのアプリケーションではJPEG 2000を読み込み、保存することができます。その他のアプリケーションでもプラグインを用いることでJPEG 2000を扱うことができます。
しかしウェブ速度が飛躍的に伸びたこと、JPEGが持つ品質劣化という性質に一般的な関心がないことから、JPEGは現在でも標準的な画像形式という位置を占めています。

JPEGは24ビットRGB、CMYK、８ビットグレースケールの全てに対応しています。（個人的には、CMYKをJPEGで用いるのはオススメしません。）
また、8ビットグレースケールでも、色がついている画像と同程度ファイルサイズになってしまうことも指摘しておきます。

GIF （Graphics Interchange Format）

GIFはJPEGと同じように古くからあるファイル形式です。GIFは写真以外の画像をサポートするのに使われていました。
GIFはTIFFファイルが用いるのと同じ、LZW圧縮を採用しています。この技術は一度、特許の問題で論争を起こしましたが、今では全ての特許の有効期限が切れているので問題なく使うことができます。

GIF画像を拡大したもの

GIFファイルは8ビットカラーのファイルです。画像内で、CLUT（Color Look Up Table）と呼ばれるカラーパレットにある256色しか使うことができません。
しかし、ウェブセイフカラーなど標準的なカラーパレットは　このタイプなので問題ありません。特にグレースケールの画像は8ビットのパレットを使っているのでGIFが理想的です。

GIFの特徴としては透明色が使えることに加えて、動画を作成することができます。（全てのコマで事前に選択された256色しか使うことができません。）

GIFは画像を8ビットカラーに変換するので色情報が歪められることになります。
元画像のピクセルを単にパレットの中で一番近い色で近似するとグラデーションが表現されなくなるため、他の色を加えて元の色を表現するディザリングの技術が使われます。（点描をイメージすると分かりやすいと思います。）色情報が失われるので写真など多色の画像には向きません。

しかし、可逆圧縮という性質のため、線をくっきり保つことができます。そこでフォントや幾何学的な形状を描くのに用いられます。またSVGなどのベクターファイルやアドビイラストレータのデフォルトファイル形式である.aiと相性が良いのも特徴です。

GIFは写真やイメージ格納に理想的なファイル形式ではありません。小さな画像ならば、GIFはJPGファイルよりも軽くできます。しかし、多くの場合JPG圧縮の方がGIFより軽くできます。GIFは現在では動画や簡単な透明色を用いた画像を作るのに使われます。

PNG （Portable Network Graphics）

PNGはPortable Network Graphicsの頭文字ですが、人によってはPNG-Not-GIFと言う人もいます。GIFが使用しているLZW圧縮が特許の問題で論争を起こした時に、GIFに代わるオープンな技術として開発された歴史があるためです。

PNGはGIFよりも透明色を用いた画像を作るのに適しています。透明色がどのように背景色と混じっているか表現したのが上の画像です。
（注：実際にはこちらの画像はPNGではありません。もし実際の画像を見たい方は、こちらにアクセスしてください。）

PNGはGIFのように8ビットカラー画像をサポートしていますが、JPGのように24ビットカラーRGB画像もサポートしています。
可逆圧縮で、画像の質を落とすこともありません。
ただPNGはこの３つのファイル形式の中ではファイルサイズが１番大きくなりがちです。また古いブラウザではサポートされていない場合もあります。

使い分けの仕方

上の画像を見てください。左から、24ビットJPG、8ビットGIF、8ビットPNG、最高画質24ビットJPG、24ビットPNGです。
左から順番にファイルサイズも大きくなっています。

PNGは、場合によっては必要のない情報を含み、ファイルサイズが大きくなる可能性があります。8ビットPNGを使うこともできますが、それだったら8ビットGIFの方がファイルサイズを小さくすることができます。
JPGは最高画質（最低圧縮）でもPNGファイルよりもファイルサイズが小さくできます。またサムネイルのような小さい画像の場合は、JPGの非鮮明さは虫眼鏡で見るなどしないと気にならない程度です。

まとめると、PNGは透明色を用いた画像や可逆圧縮を重視したい画像に適しています。大きな画像ではファイルサイズが大きくなってしまうために、可逆圧縮を必要とする場合を除いて、あまり使用しない方がようでしょう。
GIFは、動画を作ることができるのが大きな特徴です。実際には広告用のバナーなどに多く使われています。
サイズの大きな画像でファイルサイズを小さくするには、JPGが一番便利です。しかしJPGは保存する度に画像が劣化することには気をつける必要があります。
編集中はPNGを用いて、最終的な出力だけJPGにすると劣化を１回に留めることができるのでオススメです。

[How-to-Geek]

（原文／mio）