PNG・JPEG・GIFの違いと変換方法

画像のフォーマットには種類があり、BMPやJPG、GIF、PNGなどの名前がついています。普段はあまり違いなど意識する機会もないかと思いますが、それぞれ特徴があり、フォーマットごとに向き不向きがあるようです。今回はPNG・JPG・GIFについてと、ファイルの変換方法をご紹介します。

PNGとは

「PNG」とはPortable Network Graphics(ポータブル・ネットワーク・グラフィックス)の略称です。ファイルの拡張子は「.png」で、ピンやピングと呼ばれています。Gif、jpgに続いて開発されたもので比較的新しいフォーマットの為、古いブラウザでは対応していない場合があります。

GIFで特許が問題になった背景もあり、GIFの代用品としてライセンスフリーの新しいフォーマットが求められ、開発されました。

圧縮方法

可逆圧縮の画像フォーマットの為、圧縮しても画像が劣化しません。可逆圧縮とは、圧縮前のデータと圧縮・展開処理した時のデータが完全に等しくなる圧縮方法を言います。何度保存して色が削れたり減ったりする事がありませんので、劣化させたくない画像を扱う場合や加工を繰り返す画像に適しています。

色数と色空間について

最大16bitのグレースケール、24bitのフルカラーと最大48bitのRGBに対応しています。48bitでは280兆の段階の色を扱うことが可能です。色空間の対応はRGBのみとなっています。

透過について

透過情報に8bitから16bitの透過情報を付加する事が可能です。GIF画像では透明か不透明の2つしか選べませんが、PNGでは透過も段階を選べるため半透明を表現する事ができます。

その他の特徴、扱いについて

PNG画像にはガンマ補正値が埋め込まれています。(ガンマ補正値と明るさを調整する値の事)画像はPCのディスプレイの環境やOSの違いで同じ画像でも違う色に見えてしまう事がありますが、PNGではガンマ補正値を画像に埋め込む事でどんなプラットフォームでも同じ明るさで表示できるという特徴があります。

画像が劣化しない特徴がある反面圧縮率がJPGほど高くない為、グラデーション効果のある画像や写真などをフルカラーで保存すると容量が大きくなってしまいます。JPGで出てしまうブロックノイズやモスキートノイズがないため、キャプチャや線画などくっきりと表示させたいものに向いています。

GIFとは

「GIF」とはGraphics Interchange Format(グラフィックス・インターチェンジ・フォーマット)の略称です。ファイルの拡張子は「.gif」で、ジフやギフと呼びます。インターネット上の負荷を少なくしながら画像データを転送するために開発されました。

それまでの画像データはbmpで当時の環境では要領が大きすぎてまともに転送できなかったため、要領を可能な限り減らし、webにも簡単に表示できるように、と提唱されたのがきっかけです。

圧縮方法

PNGと同じく可逆圧縮方法を用いています。可逆圧縮とは、圧縮前のデータと圧縮・展開処理した時のデータが完全に等しくなる圧縮方法を言います。何度保存して色が削れたり減ったりする事がありませんので、劣化させたくない画像を扱う場合や加工を繰り返す画像に適しています。

色数と色空間について

モノクロは2色。カラーは8itまでをサポートしています。色空間はRGBです。他のフォーマットと比較して色数が非常に少ないです。その分、色数が少ない画像を表示させるのに向いていますが、フルカラーの画像をGIFで保存すると元に戻せなくなってしまいます。

透過について

GIFには、GIF87、GIF87a、GIF89aとバージョンが存在するのですが、89aからは透過をサポートしています。画像の一部、または全てを透明にする事が可能ですが、PNGのように色数がないため、半透明を扱うことはできません。

その他の特徴、扱いについて

1つのファイルに複数の画像を格納する事ができるため、コマ送りの要領でアニメーションを作成する事ができます。色が256色までしか表現できないので風景写真やグラデーション効果のある画像には不向きです。

JPGで出てしまうノイズがないため、単色で表現するロゴやイラスト、ドット画像などに使うと境界線がきれいに表示されます。Webページで扱うラインやボタン、アイコンなどに利用されます。

Jpgとは

「jpg」は「jpeg」とも表現され、それを既定した組織、Joint Photofraphic Experts Groupの略称です。拡張子は「.jpg」「.jpeg」で、ジェイピージー、ジェイペグと呼ばれます。

BMPやGIFの後に登場しました。BMPでは容量が大きすぎる、かといってGIFでは軽量だが色数が少なくて緻密な画像がきれいに表現されなくなってしまう。そういった背景から写真などの画像も鮮明に記録でき、尚且つBMPより容量を減らす目的で開発されました。

圧縮方法

非可逆圧縮(または不可逆圧縮)フォーマットのため、圧縮した後元に戻すことができません。

非可逆圧縮とは可逆圧縮の対義語で、圧縮前のデータと圧縮・展開の処理をした後のデータが完全には一致しない圧縮方法をいいます。この性質を持っていると、ファイルを開いて保存する度にデータを損失してしまうというデメリットがあります。

色数と色空間について

24bitフルカラーをサポートしています。他のフォーマットに比べて扱える色彩が多く、RBG、グレースケールの他、CMYK、YCbCrをサポートしていますので、色数の多い風景写真やグラデーションのある画像に適しています。

透過について

透過には対応していません。他のフォーマットで透過した画像を保存しようとすると、透明部分が白になります。

その他の特徴、扱いについて

圧縮率を指定する事が可能なので、データは欠損してしまいますが、高い圧縮をかける事で容量を大幅に削減する事が可能です。圧縮率を高くすると画像が荒くなりますが、圧縮率が低いものであれば肉眼ではBMPとの違いはほとんど分かりません。

色が極端に変わる画像の場合、その境界線を滑らかにしようとする「アンチエイリアス」という機能を搭載しているため、境界線のはっきりした画像を保存するとブロックノイズが発生しやすくなってしまいます。また、高圧縮で保存をかけると色が飛んでモスキートノイズが発生しやすくもなります。

そのため、単色で境界線のはっきりしたロゴマークや線画ではかえって画像が汚れて見えてしまう場合があります。扱っている色が他のフォーマットと比べて豊富なので色数の多い緻密な画像やグラデーション効果のある画像風景写真などに適しています。

変換方法について

JPGからGIFに、など画像のフォーマットを変更したい時はどうすればよいのでしょうか?

ペイントソフトを使って保存する

一番シンプルで扱いやすいのは、ペイントソフトを利用して保存するフォーマットを選ぶ方法です。実際にwindowsに搭載されているペイントソフトでそれぞれのファイルを保存してみました。

ファイルを保存する場合は、ペイントソフトを開いて「ファイル」をクリック「名前をつけて保存」から、保存したいフォーマットを選んで保存します。

画像変換用

JPGの場合

元素材の写真ですが、写真が鮮明なのが良くわかります。

サンプル用 猫

PNGの場合

見た目にはJPGと変化がありませんが、今回はフルカラーで保存したので、JPGの3倍のファイルサイズになりました。

s003_003

GIFの場合

明らかに画像が荒くなっているのが分かります。

s003_003

拡張子を変更する

ソフトを使わずに変換する方法として直接拡張子を書き換える、という方法があります。ファイルには必ずファイルの名前の後ろに「.jpg」などの拡張子がついています。

ファイルの上で右クリック、ファイルの名前を変更、で拡張子の部分だけを、例えば「.jpg」から「.PNG」に書き換える事で簡単に変更する事ができます。ファイル名を直接変更すると画像を確認しながらの作業が出来ませんのでご注意ください。

ブラウザを利用する

http://imagec.nizniz.net/?lang=ja

こちらのページでは、ブラウザを使って画像変換を行う事ができます。

フリーソフトを利用する

XnConvert

多くのフォーマットに対応したフリーソフトで、今回紹介した3種類を含む、、BMP / JPG / JP2 / GIF / PNG / ICO / TIF / PDF / PSD / PCX / TGA / DPX / MIF / IFF / PIC / RAW / YUV / 等に、一括変換できるソフトです。こちらのソフトでは、画像に加工処理を施す事も可能です。

converseen

こちらも多くのフォーマットに対応しており、BMP / GIF / JPEG / JPEG-2000 / PNG / ICO / TIFF / AI / PSD / RGB / YUV / DPX / EXR / PDF / SVG / TXT / WMV / MP4 / 等に一括変換が可能です。リサイズやリネームなどの機能も付随しています。

まとめ

いかがでしたでしょうか?

一般的にはJPGが一番多く出回っているイメージがありますが、今後はPNGの活躍の場も増えてきそうです。実際、スマホではPNGで標準保存されるものも出てきている様です。普段は違いについて実感することはないかもしれませんが、少し違いを知っているだけでも、何かの際に活用できるかもしれません。


イベント

2017/12/05(火)
Design Thinking Square