いまからはじめてみるブログ

・サンプル画像2(GIF形式)

サンプル画像の1と2、どちらもファイルサイズは約200KBですが、画質に大きな差があることには、すぐ気がつかれると思います。

まず、もっとも分かりやすい特徴として、JPGとGIFでは、使用できる色数が異なっています。
JPG画像は最大約1678万色、GIF画像は256色まで使用することができます。
多くの色を表現できるため、特に写真などはJPG形式の方が向いています。

それでは、色数の多いJPG形式だけを使用すればいいのか？となると、それは正しい選択とは言えません。

続いて、次のサンプル画像をご覧ください。

・サンプル画像3(GIF形式)

・サンプル画像4(JPG形式)

サンプル画像の3と4のファイルサイズは、どちらも約15KBですが、拡大してみると画質の差は一目瞭然、今回はGIF画像の方が、綺麗に表示されています。

これはGIFとJPG、それぞれの圧縮方法に理由があり、GIFは「可逆圧縮」、JPGは「不可逆圧縮」という方式で画像を圧縮しています。

専門的な説明は省略しますが、GIFは「どの色が何回使われるか整理する」という方法の圧縮、JPGは「色の変化をもとに、似た色を取り除く」方法の圧縮と言えます。

これでもまだ分かりにくいと思いますので、もっと平たく言ってしまうと、GIFは色数が少なく、均一な塗りの表現に適しており、JPGは色数が多く、色の変化の多い表現に適している、ということになります。

例えば、ベタ塗りの背景や細い線、文字・ロゴなどであればGIF画像、写真や滑らかなグラデーションであれば、JPGの方が綺麗に表示することができ、ファイルサイズも小さくて済みます。

ここで、JPG画像を加工する場合に、注意すべき点があります。

JPGは「不可逆圧縮」という説明をしましたが、この「不可逆」、画像を加工して保存する度にデータが劣化していく、という意味になります。

ペイントツールなどでJPG画像を加工・補正する際に、同じ画像を何度も上書き保存して修正する方法は、ファイルサイズばかり大きく、汚い画像となってしまいますので、あまりお勧めできません。

■JPGにはない、GIFの特徴

ここまで、JPGとGIFの性質について、画質やファイルサイズに関する比較で見てきましたが、GIFはJPGにない特徴を二つ持っています。

一つは「背景の透過」、もう一つは「アニメーション」です。

透過は、画像の一部分を透明にすることで、背景色や背景画像が見える様になる処理です。

サイトのメニューやボタンなど、色々な背景に対応できる汎用性が必要な場合に用いられます。
GIF画像で保存できるペイントツールであれば、多くの場合、透過処理にも対応していると思います。

また、アニメーションは「GIFアニメ」と言われるもので、近頃は多用するサイトも少なくなりましたが、バナー広告や、点滅するアイコンなどは、まだ見かけることがありますね。

GIFアニメに関しては、全てのペイントツールに含まれる機能ではないので、作成可能なツールを探す必要があります。

ただ、仕組みは簡単で、コマ撮りのアニメのように何枚かの絵を描いていき、表示の秒数を指定して順番に切り替えているだけです。

フリーのツールも出回っていると思いますので、興味を持たれた方は、挑戦されてはいかがでしょうか。

関連記事

• 画像の形式・GIFとJPGの違い、それぞれの使い分け[初心者向け] (2013/05/16)
• ファビコンとは？ファビコンの作り方と設定方法 [初心者向け] (2013/02/05)