GIF JPEG PNGについて

質問

情報の勉強超初心者です。
教科書に
GIFは　絵やイラストの保存に頻繁に使用　可逆圧縮方式
PNG　GIFの機能を拡張　可逆圧縮方式
JPEG　　写真の保存に頻繁に利用　非可逆方式とあります。
下記質問です。
１．JPEGは　写真で使っているのでイメージがすごくわかるのですが
GIFやPNGは　まったく使用されるイメージがわかりません。
具体的にそれぞれどんなシーンでどのように使っているのか
おしえていただけますか。GIFの拡張がPNGとすると　PNGが
使われ　GIFは使われていない？？などなどイメージがさっぱりわかりません。
よろしくお願いします。

回答No.1

Kaneyan-R · ベストアンサー

圧縮方式が異なる画像フォーマットです。

大雑把に言うと、そもそも画像ファイルは一つの点（ドット/ピクセル）の色情報を並べた形式になっています。
640 x 480ピクセルの画像だと、640 x 480個の色情報が必要になるわけで、その分当然ファイルサイズが大きくなります。

GIFは、「色情報 x 個数」と言う形式で情報を記録するもので、同じ色のドットが連なったような画像（ベタ塗り）ほど、圧縮率が高くなります。
例えば、「赤・赤・赤・青・赤・赤」と言う連なりがある場合、BMPではそのドットの数＝6個の情報が必要ですが、GIFだと「赤x3、青x1、赤x2」と3個の情報だけですむ事になり、その分ファイルサイズが小さくなります。

一方JPEGは、色情報を間引いて情報量を削る方式の圧縮形式で、隣り合った色の変化が少ないものを同じ色に変えることで、色情報そのものを少なくします。
例えば、RGBカラーで「#FF0000（赤）」と「#FE0000」の色が並んでいる場合、人間の目ではこの2つの色の差は殆ど認識できません。ですから、この2つの色を同じ「#FF0000」としてしまう事で、色情報の量を減らしてファイルサイズを小さくします。
また、「圧縮率（画質）」を設定可能で、「どこまでの変化を同じ色とするか」によって、圧縮率を上げる（＝画質を落とす）事ができます。

PNGは、GIFと同じ様な圧縮方式のフォーマットで、GIFの開発者がGIF形式への圧縮にライセンスを付加する（有料になる）と言う話しが一時期あったため、その際にGIFの代わりとして生まれたライセンスフリーの圧縮形式です。ただこの話も有耶無耶になったので、今でも普通にGIF形式は利用されています。

さて、GIF/PNGとJPEGどちらを使うかですが、その圧縮方法によって、使い分けがされています。
前述の通り、GIF/PNGは「色情報 x 個数」として圧縮するので、同じ色が連続している場合に最も効果が発揮されます。
逆に写真等の隣り合った色の変化が激しい画像には不向きです。

例えば、パソコンの「スクリーンショット」や「セル画調」の画像等で、Webページの背景やボタン、バナー等に利用されています。指定した色を「透過色」とする事で、背景などを透明にした「透過GIF/PNG」を作ることも出来ますし、複数のGIF画像を連続して表示する「GIFアニメーション（拡張子：GIF）」も作ることが出来るので、動くバナー広告等にも利用されます。

JPEGは「色の変化」が無いと情報を間引けないため、GIF/PNGとは真逆で「べた塗り画像」には不向きで、写真のように隣り合った色の変化が激しい画像で効果が発揮されます。

GIFとPNGの使い分けはハッキリ言ってあまりありません。
元々GIFの代用として生まれたPNGなので、使いたい方を使えば良いです。
ただ、透過画像やアニメーションにする場合は、PNGでは対応していないブラウザもあるので、GIFで作るか、スクリプトやCSSで効果を付ける事になります。

最後に「可逆圧縮」「非可逆圧縮」ですが、GIF/PNGは全ての点の色情報が揃っているので「可逆圧縮＝元に戻せる」、JPEGは色情報が別の色に変わってしまうので「非可逆圧縮＝元に戻せない」と言う事になります。

＞GIFは使われていない？？

試しにこのサイト（OK Wave）の質問者さんのプロフィール画像の上で「右クリック」→「プロパティ」を表示してみて下さい。
ファイルの種類は何になっているでしょうかね？

お礼

本当にプロのご指導　驚き感謝するばかりです。
疑問に次々に的確に答えていただき
勉強の支えになります。いただいたご回答
しっかり読み込み頭にたたきこみます。有難うございます！