GIFとJPGとPNGの使い分けについて

ブログ関連

こんにちは、ゆんつです。

画像の保存形式には様々なものがあります。

その様々な保存形式のなかでもブログにアップする画像で良く使われるのが
GIF,JPG,PNGではないでしょうか。

僕はこれらの形式について良く解っておらず、ただ漠然と画像をアニメーションさせたい場合はGIF、静止画の場合はJPGかPNGという感じで使い分けをしています。

もう少しちゃんと解ったうえで使い分けをしたいので、今日はブログにアップ
する画像に適したファイル形式について勉強したいと思います。

それぞれの特徴

GIF

最大256色まで扱うことができる。

ロゴやアイコンなど色数の少ない画像に向き、写真など多くの色を表現するものには向かない。

可逆圧縮(画像を何度保存しても劣化しない)なので画像保存の際に劣化が起きない。

JPGに比べて文字やイラストの輪郭ははっきり綺麗に見える。

画像をパラパラ漫画のようにアニメーションさせることもできし、画像を透過
することもできる。

JPG

最大1677万色まで扱うことが出来るため、写真など多くの色数が必要なものに適する。

非可逆圧縮(画像を保存する際にデーターの一部を捨てる)のため保存を繰り返すたびに画像は劣化し、一旦画像を圧縮すると元には戻せない。

色数の多い画像の場合PNGよりもファイルサイズは小さくなる。

またGIFやPNGに比べて、文字やイラストなどの輪郭がにじんで汚く見えることがある。

PNG

JPG同様最大1677万色まで扱うことができ、画像を透過することも出来る。。

JPGとは異なり可逆圧縮で、画像を保存しても劣化しない。

JPGに比べて文字やイラストの輪郭もはっきり綺麗に見える。

色数が多い写真などではJPEGよりも、かなりファイルサイズが大きくなる。

実験

写真をJPG・PNG・GIFで保存し比較してみる

同じ画像をJPG、PNG、GIFで保存して見え方と、ファイルサイズの大きさを比べてみます。

JPG:GIMPで品質100で保存 ファイルサイズ269KB

PNG:GIMPで圧縮レベル9で保存 ファイルサイズ536KB

GIF:ファイルサイズ180KB

パッと見ではJPGとPNGの差はわかりませんが、GIFは色数が少ないせいか柱や猫の体の質感がのっぺりしていて元の画像の色とはだいぶ違います。

JPGとPNGはどちらも差が無く綺麗に見えますが、サイズはJPGがPNGの約半分となっています。

ちなみにJPGの画像を品質80で圧縮してみると

ファイルサイズは62KBまで圧縮され、なおかつ見た目もあまりPNGと大差がないような気がします。

やはり写真はJPGの方が良さそうです。

JPGなら写真の見た目をあまり損なうことなく大幅にファイルの大きさを圧縮できることが解りました。

画面キャプチャ画像をJPG・PNG・GIFで保存し比較してみる

JPG:GIMPで品質100で保存 ファイルサイズ87KB

PNG:GIMPで圧縮レベル9で保存 ファイルサイズ34KB

GIF:16KB

むぅ~

正直僕の眼ではどれも同じに見えます。

でもファイルサイズは明らかに違いますね。

色数が少ないのにもかかわらずJPGはファイルサイズが大きいです。

色数が少ないものはGIFかPNGのほうがサイズが小さい事がよく解りました。

結論

以上を踏まえて、僕が今後ブログにアップする画像の保存形式を決定しました。

写真 → JPG

PC画面のキャプチャ画像やイラスト → PNG

アニメーションさせたい → GIF

とういこと決定しました。

キャプチャ画面やイラストはGIFの方がPNGよりもファイルサイズが小さくなったのでGIFの方が良いのかもしれませんが、現在はGIFよりもPNGの方が主流のようなのでそれに倣います。

これからは画像の保存形式は以上のような使い分けをしようと思います。

これまでの記事は修正するのが面倒くさいのでそのままにします。

それでは、またですー。

コメント