なにか懐かしの歌みたいなタイトルですが、WEB上でよく使われる画像ファイル形式についてのお話です。

僕自身、今まで特に気にせず画像ファイル形式を使ってきました（ほとんどJPGを利用）。ブログを書くようになってから、これらのファイル形式を使い分けてファイルサイズを出来るだけ小さく、かつ綺麗に表示させないと、と思いちゃんと調べてみました。

JPGとGIFとPNG（ピングと読む）を簡単に特徴を挙げると、


・JPG --- 色数に関係なく、画像を劣化せせてサイズ圧縮。

・GIF --- 画像の色数を256色を上限にして、減色してサイズ圧縮。

・PNG --- GIFと同様に色数を減らしてサイズ圧縮。256色以上も可能。


実際に画像で説明して行くと、

「色数の多い写真画像の場合」
（JPG画像）
ファイルサイズ23kb

（GIF画像）
ファイルサイズ24kb

（PNG画像）
ファイルサイズ24kb


同じ写真画像を元にほぼ同じファイルサイズで保存しました。JPG画像が一番きれいに表示されています。もちろん、GIF、PNGも色数を増やせばJPG画質に近づけることはできますが、ファイルサイズが大きくなってしまいます。

それと同じファイルサイズでは、PNGのほうがGIFよりも少しきれいに表示されています。PNGはGIFよりもファイルサイズが大きくなると思われがちですが、ほとんどの画像でPNGの方が圧縮率は高いです。


「色数の少ない文字・記号の画像の場合」
（JPG画像）
ファイルサイズ9kb


（GIF画像）
ファイルサイズ9kb
色数を256色に設定


（PNG画像）
ファイルサイズ7kb
色数を256色に設定


色数の少ない画像の場合はGIF、PNGの方がJPGより画質がきれいです。JPGも圧縮率を下げ、画質を上げることも出来ますが、ファイルサイズが大きくなってしまいます。

このように使う画像によってファイル形式を選んで行けば、スマートに利用できます。
僕は今まで何でもかんでもJPGを使ってきたので、これからは直して行きたいと思います。




ここから少し難しい話です。
GIFとPNGは使う色を透明色に指定することが出来、JPGは透明色を指定出来ません。
解り易く言うと、一般的にWEB上の画像を保存したりするとき、JPG画像は白ベタ背景（別に白でなくてもいいですが）で四角い輪郭になりますが、GIFとPNGは背景が透明なのでその画像の輪郭になります。

ここからはGIFとPNGの違いについての話です。
下のてんとう虫の連ダコのような写真はGIF画像です。





（GIF画像）
※GIF画像の説明では各写真の左端の数字は無視して下さい。

GIFは1色のみを透明に指定出来るので（つまり背景部分だけを透明にしている）、このGIF画像を別のチェック柄の背景画像と重ね合わせると・・・
GIF画像の背景は透明なので、てんとう虫の連ダコ写真のまわりにチェック柄の背景が見えます。

（※チェック柄背景とてんとう虫の連ダコ写真は別々の画像ファイルです。チェック柄とてんとう虫の画像を1つのファイル内で重ね合わせて保存している訳ではありません。）



続いてPNGの場合です。同じてんとう虫の連ダコのような写真のPNG画像です。
この状態でGIF画像との違いは、コントラストがGIFの方がはっきりしている以外、あまり見分けがつきません。





（PNG画像）
※各写真の左端の数字はその写真の透過率（0%,25%,50%,75%）を表示しています。

PNGはGIFの1色透過に対して、アルファチャンネルというのを持っていて、透過領域と透過率を自在に指定出来ます。

つまり、GIFは背景のみが透明になりますが、PNGの場合は背景はもちろん透明で、画像そのものも半透明の表示が可能です。

GIFの場合と同じようにチェック柄の背景画像と重ね合わせると・・・
背景は透明で各写真も半透明の表示になり、うしろのチェック柄が透けて見えると思います。
上のGIF画像の場合と比べればよくわかると思います。

GIFとPNGはよく似ていますが、このような違いがある訳です。GIFにはアニメーションできるという利点もあります。（PNGも一応できるのですが・・・、また機会があれば説明したいと思います。）



※ブラウザによってはPNGに対応していないものもありますので、上のPNG画像が見えないかも知れません。
素人が精一杯調べて実際に試して、書いた内容ですので間違いがあるかもしれません。間違ってたらすみません。

trackback URL