GIF・JPEG・PNGの違いと使い分け

PCやネット上で使われる画像はいくつかのフォーマット（種類）が存在しています。資料でもWEBサイトでも、画像は「綺麗」で「軽く」することにより表示速度の高速化やファイルの取り回しを容易にしたりと様々なメリットがあります。

違いを知り、特長に合わせた使い分けをすることで「綺麗な見た目のままファイルサイズを小さく（軽く）する」ことが出来るため、業務や趣味問わず活かすことができる、覚えておくべき基礎知識です。

画像フォーマット特徴早見表

GIFの特徴と基礎知識

GIFとは

GIFはGraphics Interchange Formatを意味し、同じ色のピクセルが連続する場合は圧縮率が高くなるのが特長です。そのため色数の少ないイラストやシンプルな図形やロゴ・アイコンなどの使用に向いています。

読み方が「ジフ」なのか「ギフ」なのか長い間世界中で議論され続けていましたが、設計者が「ジフが正しい」と発言したことにより「ジフ」に落ち着きました。

GIFの特徴

1. アニメーションが可能

JPEGやPNGと大きく異なるのはアニメーションが可能なことで、「GIF動画」や「シネマグラフ」と呼ばれる場合もあります。画像としてメルマガなどに組み込むことも出来るため、訴求力を高めたいビジネス用途での使用例が多いですが、画像のファイルサイズが肥大化しやすいため、アニメーション使用時はページやメール全体のファイルサイズを気に掛ける必要があります。

例として作成したシネマグラフのファイルサイズは1.18MB程ありますが、仮に動かないGIF画像として書き出した場合は0.1MBほどのファイルサイズになります。また、GIFは256色しか扱えないため、上のように色の多い動画を元にシネマグラフを作成した場合はGIF特有の粗さが目立ちます。

2.透明が使用可能

GIFとPNGは透明が使えますが、GIFは半透明が使えません。GIF画像出力時に背景のマット処理として色を指定することにより、色をシミュレートしてあたかも半透明のように描写することが可能ですが、あくまでシミュレートした色で塗られた状態になるため、背景色を変えたりする場合は画像も再出力しなければ画像の輪郭にジャギー（ギザギザ）が出てしまいます。また、マットは単色での指定しかできないため背景がグラデーションや写真の場合は不向きです。

上の画像ではアイコン上下の辺には白いシミュレート色がありません。パーツの配置座標やサイズに小数点が出ている等、いくつかの要因で画像の境界面に半透明部分が発生します。

3.画質の劣化

不可逆圧縮のため画像の保存を繰り返すと画質が劣化してゆき元に戻せません。仕事上で発生しやすいのが、元画像の所在が不明のためWEB上の画像を保存・修正して再度掲載する、といったケースですが、これを繰り返すと画像が汚くなってゆくためなるべく控えましょう。

JPEGの特徴と基礎知識

JPEGとは

JPEGはJoint Photographic Experts Groupを意味し、フルカラーである1,677万色を表現することが可能なため、多くの色を必要とする写真や複雑なイラストなどに向いています。また、同じくフルカラーを扱えるPNGよりも圧縮率が高いため、ファイルサイズを抑えることが可能です。

JPEGの特徴

1. ファイルサイズの軽量化

多くの画像編集ソフトにおいてJPEGの画像出力時に画質レベル（圧縮率）を変更することが可能で、ファイルサイズを大幅に軽量化することが可能です。ただし、注意すべき点として、ファイルサイズと画質はトレードオフの関係にあります。

例えば画質100と画質90では目視で違いを見分けることがほとんどできませんが、ファイルサイズには大きな違いが生まれるため、「見た目に大きな影響が出ない範囲で画質レベルをどこまで下げれるか」を探すことが必要になります。

最適な画質レベルは画像の内容によって都度異なり、全般的に画質が70を以下になると劣化に気付くことが多くなります。画像の使う場所や内容に合わせ画質90～60あたりで調整するのが理想ですが、ある程度経験が必要になってしまうため、何も考えずに処理を行いたい場合は「画質85」あたりで出力を行えば多くのケースで画質破綻がおきず、かつファイルサイズもある程度抑えられるのでオススメです。

2.画質の劣化

GIF同様不可逆圧縮のため保存を繰り返すと画質が劣化してゆき元に戻せません。JPEGはGIFと比べ高精細な画像などで使うケースが多いため劣化の影響が顕著にでる場合がありますので、繰り返しの保存は控えましょう。

JPEGは単色や輪郭のハッキリしている画像は劣化しやすいため、場合によっては写真でもPNGの方が良いケースが発生します。劣化が進んだり、画質を下げてゆくとモスキートノイズ、ブロックノイズという現象が発生します。

「1. ファイルサイズの軽量化」で例示した東京タワーの写真では、特に空の部分や空と建物の境界部分がが著しく汚くなっていますが、このような見え方にならないようにファイルの再利用・保存時の画質レベル調整に注意しましょう。

3. 拡張子が多い

JPEGは「.jpg」の他にも「.jpeg」「.jpe」「.jfif」「.jfi」「.jif」「.pjpeg」「.pjp」といった拡張子で用いられる場合がありますが、どれも同じJPEGフォーマットファイルを指します。ほとんどの場合「.jpg」もしくは「.jpeg」が使用されていますので、混乱しないようこのどちらかの使用が無難です。

PNGの特徴と基礎知識

PNGとは

PNGはPortable Network Graphicsを意味し、半透明を使用することが出来、可逆圧縮のため保存の繰り返しによる劣化が無いことが大きな特長です。JPEG同様1,677万色を扱え、写真などはJPEG以上に高画質に保存出来ますが、画質レベルの調整ができないためファイルサイズが肥大しやすく、用途に合わせて使用することが必要です。

1. 半透明が扱える

PNGの最大のメリットが半透明を扱えることです。GIFのようにマット色によるシミュレートではないため、背景に合わせて自動的に馴染ませて見せることが可能です。WEBサイト上の企業ロゴ・ショップロゴなどは背景透過の画像を1枚用意しておき共用することで、管理する画像の数を大幅に削減することも可能です。

上の画像はPNGで半透明を使用した際の境界線イメージですが、GIFの見え方で説明した際に発生していたような境界線が浮いてしまうような状態は発生しません。背景色を変えても自動で境界線は馴染んだ状態で表示されるため、違和感のない綺麗な画像になります。

2. PNGの種類

PNGは拡張子が「.png」1つだけにも関わらず、その中身は「PNG-8」「PNG-24」「PNG-32」の3種類が存在します。後ろの数字は扱えるデータ量を示しており、「PNG-8はGIFと同じ256色までを扱える」「PNG-24はJPEGと同様フルカラーの1,677万色まで扱える」「PNG-32はフルカラーかつアルファ値（透明度）までを扱える」といった違いがあります。

種類を気に掛ける必要は殆ど無く、意図的にPNG-8を使用する場合もありますが、指定をしなければいけない場合は基本的に「PNG-24（PNG-32）」を選択して置けば良いケースが大半です。

備考

• 拡張子
  拡張子とはファイルの種類を識別するためにファイル名の後ろに付与される文字列で、WindowsもmacOSも初期設定では表示されていません。常時表示させたい場合は設定を変更する必要があります。
• 圧縮
  画像の話に限りませんが、圧縮には可逆圧縮・不可逆圧縮の2つがあります。圧縮したのち、元のデータに戻す際劣化なく元に戻せるものを「可逆圧縮」、元に戻せないものを「不可逆圧縮」と呼びます。
• 他の画像フォーマット
  GIF・JPEG・PNG以外に多少目にするものとして「BMP（ビットマップ）」や「TIFF（ティフ）」などがありますが、意図的に使い分けない限りはGIF・JPEG・PNGのどれかを使うほうが扱いやすいでしょう。