どうも！岐阜県を中心にホームページ制作をおこなっている8creatorsです★

今回はブログやホームページに画像を使用する際に、使用する頻度の高い画像形式で代表的な３種類の特徴を簡単に説明したいと思います。

この３種類の特徴をしっかり把握することで見た目が綺麗になる事はもちろんですが、ファイルサイズが軽くなる場合があり、その結果ホームページを閲覧する際のスピードが上がり、SEO的にも有利になったりもします。

もっと使用頻度が高いJPEG

まずJPEG(ジェイペグ)についてご説明したいと思います。
この画像の形式はホームページやブログなどで、もっとも多く使用されている形式だと思います。
なぜもっとも使用されるかと言いますと、まず使用する色数（約1670万色）が多く、写真などに向いているからです。

JPEGのメリット

写真やグラデーションなどの、色を多く使用する画像の場合、綺麗に保存出来る。

JPEGのデメリット

JPEGは非可逆圧縮で画像ファイルで生成されるため、一度JPEGで画像を生成したら、初めは人間の目では分かりませんが、画像が劣化した状態になります。
ですのでJPEGファイルを開き、加工してまたJPEGで生成したら元のJPEGの画像は劣化してしまいます。
これを繰り返せばどんどん画像が劣化するという欠点もあります。
背景の透過はJPEGでは出来ません。

非可逆圧縮についてはこちらをご覧ください。（wikipedia）

使い勝手がいいGIF

次にご説明するのがGIF(ジフ)という形式の画像ファイルになります。
この形式は8ビットカラーで生成され、使用できる色数は256色とJPGの約1670万色に比べると、使える色が少ないですが、背景を透明に出来たり、アニメーションが作成出来たりとメリットもたくさんあります。

GIFのメリット

可逆圧縮を使用しているため、画像が劣化しません。

可逆圧縮についてはこちらをご覧ください。（wikipedia）

線をしっかりと表現できるため、単色のイラストやバナー幾何学模様などを使用するのに最適です。

８ビットカラー（256色）で生成するのでファイルサイズが軽くなります。
アニメーション画像を生成できます。

GIFのデメリット

写真などをGIFで生成するさい256色で表現するので、写真やフルカラーのCG、グラデーション画像には不向きになります。

いいとこ取りのPNG

最後は一番新しい規格でもあるPNG(ピング、ピン)のご紹介です。
この形式はGIFと同じ圧縮形式の可逆圧縮にて圧縮されるため、ファイルの劣化がありません。
しかしデメリットもありますので、しっかりと把握して適切に使用しましょう。

PNGのメリット

PNGには大まかに２種類あります。
PNG8とPNG24があり、ざっくり分かりやすく説明すると、PNG8がGIFと同じ８ビットカラーで生成され、バナーや単色イラストなどにおすすめで、PNG24はJPEGと同じで２４ビットカラー（1670万色）で生成されるため、GIFが苦手な写真などが劣化なしの綺麗な状態で生成されます。

JPEGでは不可能な背景を透過することも可能です。

PNGのデメリット

古いブラウザ（Internet Explorer4では表示不可、Internet Explorer6では透過表示不可）では、表示されない場合がある。（現状ではあまり考慮しなくていいかと思います。）
可逆圧縮で生成されるため、ファイルサイズが大きくなる場合がある。(PNG24)

それぞれの画像を比較

画像の形式	JPEG	GIF	PNG8	PNG24
写真	61KB	34KB	40KB	108KB
単色イラスト	21KB	2KB	2KB	5KB

結局どれがいいの？（まとめ）

やはりそれぞれの形式でメリット、デメリットがありますので用途に合わせて使い分けるのをおすすめします。

簡単な早見表を制作しましたので参考にしてください。

画像の形式	JPEG	GIF	PNG
画質の劣化	画質の劣化あり	画質の劣化なし	画質の劣化なし
最大表現色数	約1670万色	256色	約1670万色
透過表示	不可	可能	一般的には不可
写真	◎	×	△
フルカラーCG	◎	×	◯
単色イラスト	△	◎	◎
バナー	◯	◯	◯
ボタン	△	◎	◎
アイコン	◯	◎	◎
幾何学模様	△	◎	◯
アニメーション	×	◎	△