ブログを作るなら知っておきたい画像ファイル形式の話（JPG、PNG、GIF）

どうも、スマコマのコマ太郎です。

あなたもブログ記事を書くとき、画像を使うことがあると思います。そのときの画像は、どのファイル形式を使っていますか？

ただ何となく使っているなら、それはもったいないことです。というのも画像形式にはそれぞれ得意としているものが違うからです。

画像形式でよく見かけるのが、JPG、PNG、GIF、BMP、TIFF あたりでしょうか。とは言え、すべてを覚えるのは大変ですね。まずはウェブの世界で使われる JPG(JPEG)、GIF、PNG だけ覚えてしまえばよいでしょう。

1 JPG(JPEG)、PNG、GIF だけ知っていればOK
2 まとめ

JPG(JPEG)、PNG、GIF だけ知っていればOK

ウェブの世界で使われる画像形式でポピュラーなのが、JPG/JPEG（ジェイペグ）、PNG（ピング）、GIF（ジフ）の３つです。

それぞれ得意としているものがあり、大きく分けると写真やグラデーションを使ったイラストに向くJPGとPNG、アニメ調、ベタ塗の画像に向くGIFに分けられます。

理由はJPGとPNGは、フルカラー（1677万色/16,777,216色）を扱え、GIFは256色だけ扱えること。フルカラーを扱えるJPGとPNGは写真に向くわけです。

またGIFは、圧縮処理により同じ色が連続する画像を得意としており、アニメ調のベタ塗イラスト、アイコンなどに向きます。

なおファイル容量の大きさは、

GIF < JPG < PNG

となり、GIFが軽量です。ネットでは軽量であることが求められるので、GIFで表現できない（フルカラー）ならJPGを選択し、JPGで問題がある（色にじみ、色むら、劣化）ときは PNGを選択することになります。

GIFのメリットとデメリット

GIFは古くからある画像形式で扱える色数こそ少ないものの、保存したときのファイルの容量が小さく、アニメーションや透過処理もでき、意外と使える画像形式です。このためウェブではボタン、アイコン、背景画像などによく利用されます。

GIFは色数こそ少ないもののデータの保存が特殊で、色＋横方向に連続する数という形でデータを取り扱っています。このため同じ色が連続すればするほどデータが小さくなるので、アニメ調のイラスト、ベタ塗の絵に最適であるというわけですね。

デメリットは、色数が少なく自然な色表現ができないので写真には向かないという点でしょうか。

JPG(JPEG)のメリットとデメリット

JPGは、24ビット扱うことができるので色数は、フルカラー（1677万色）を扱うことができます。

このためウェブの写真の多くはJPGが利用されています。ただデメリットも２つあります。（実はもっとありますが、まずはこの２つを覚えておけばいいかと）

繰り返し保存したJPGファイルの例

１つは保存形式が可逆圧縮ではなく、不可逆圧縮であるという点です。このため保存するたびに画質が劣化していくことになります。拡大してやっとわかる程度ですけどね。

なおぼくも勘違いしていたのですが、不可逆圧縮というのは画像を拡大・縮小するときに戻せないという意味ではありません。単に画像を保存するだけで元には戻らない圧縮が実行されるという意味です。

JPGでは画像のファイルサイズを小さくするために保存の際、圧縮処理がされるのですが、これが不可逆圧縮であり保存するたびに劣化していく原因でもあるのです。

ですから写真を扱うときは生データはそのまま保管しつつ、加工したJPGファイルは別ファイルとして保存することがおすすめです。

もう１つのデメリットは写真に文字入れをしたとき、文字がにじんでしまうことです。JPGはファイルを保存する際、自然な形でデータを間引くのですが写真ではわからない差も文字など、ベタ塗された色ではにじみとして見えてしまうのです。

ですから、にじみが気になるようなら次に説明するPNGを使うとよいでしょう。

それからJPGで理解しておきたいのが圧縮率です。ファイルを保存する際、どのソフトでもオプションで圧縮率を選択できるはずです。実はこの圧縮率のほうが厄介で、選択を間違うと画質の劣化が激しくなります。

高い圧縮率で保存したJPGファイルの比較

ウェブページを軽くしたいがために高圧縮率を選ぶと、上図のようにかなり画質が低下してしまいます。圧縮率が高ければ、それだけファイルの容量が小さくなりますがあまりに画質が落ちるのも困り物です。

容量・スピードを重視するのか、画質を重視するのか、間のバランスを重視するのかで圧縮率は選ぶ必要があるのです。とはいえ、難しい話はわからないと思うので、個人的なおすすめの設定を紹介しておきます。

基本は、Photoshop でいう品質60（0-100）がバランスがよいと感じます。これより低い品質だと青空が多めの写真でにじむことがあります。写真によってコントロールしてもいいのですが、面倒なのでぼくは品質60固定で運用しています。

JPG画像の品質を体験できるサイト

JPG画像の品質を体験できるサイトを見つけました。下記サイトを開くといろんな写真の品質による違いを見ることができます。写真の下にある数字部分にマウスを置くかクリックすると品質が変わるので試してみてください。

品質60あたりくらいまでなら、ほとんど見分けがつかないことが分かると思います。

http://regex.info/blog/lightroom-goodies/jpeg-quality

PNGのメリットとデメリット

PNGは、JPGと同様に24ビットを扱うことができるため、その色数はフルカラー（1677万色）です。

JPGとの大きな違いは、圧縮処理は可逆圧縮であるという点です。可逆圧縮であるため、ファイルを何度保存してもデータは劣化しません。ただその分、JPGと比べファイルサイズは大きくなります。

また写真に文字を入れてもにじんだり、縁がぼやけることもないので、できるだけ綺麗な状態で写真に文字を入れたいならPNGを使うとよいでしょう。

なおPNGには、PNG-8、PNG-24、PNG-32 というさらに細分化された形式があります。上記の説明は一般的に利用されている PNG-24 の説明です。ウェブの世界で単にPNGと言われたら、このPNG-24だと思えばいいです。

PNG-8は、8ビットを扱える形式で色数は256色とGIFと同じになります。ただしアニメーションは扱えません。なおアニメーションをサポートしたAPNGという形式もありますが、ブラウザのサポートが最近になってやっと進んで来たものの、古いバージョンを使っている人の問題が残るので、アニメーションはGIFを使うほうが無難です。

PNG-32は、32ビットを扱うのですが、色数として24ビット、透明度（アルファチャネル）として8ビットを利用します。アルファチャネルのサポートによりグラデーション表現がより豊かになります。ただしブラウザのサポート状況などによりウェブの世界では利用されるケースは稀でしょう。グラフィックデザインの分野で利用される形式であると、何となく覚えておけばいいでしょう。