ブログにアップロードする画像のGIF、JPG、PNGの使い分けについて

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

画像のファイル形式には様々なものがあります。

その様々なファイル形式のなかでも、ブログにアップする画像で良く使われるのが

• JPG
• PNG
• GIF

ではないでしょうか。

これらのファイル形式にはそれぞれ特徴があり、その特徴に合わせて使い分けることでブログにキレイな画像をアップロードすることができたり、ファイルサイズがコンパクトになったりします。

JPG・PNG・GIFの特徴

GIF、JPG、PNGの特徴は以下の通りです。

JPG

最大1677万色まで扱うことが出来る。

写真など多くの色数が必要なものに適する。

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

また、文字やイラストなどのように色の境界線がくっきりした画像では、GIFやPNGに比べて輪郭がぼやけて汚く見えることがある。

画像を透過することはできない。

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

PNG

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

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

また、画像を透過することも出来る。

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

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

GIF

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

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

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

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

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

実際に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：GIMPで品質100で保存　ファイルサイズ87KB

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

GIF:16KB

正直僕の眼では全部同じに見えます(笑)

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

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

そして、GIFはとてもファイルサイズが小さいです。

色数が少ないものは、GIFかPNGにしたほうがファイルサイズが小さくて済むことがよく解りました。

おススメの使い分け

以上を踏まえて、ブログにアップロードする画像のおススメの保存形式は

とういことになります。

また、特徴が似ているGIFとPNGの使い分けについてですが

という特性を踏まえて、臨機応変に使い分けると良いと思います。

それでは、またー。