PNG vs GIF

静止画は PNG。GIF は動くものがあるときだけです。

PNGが向いている場面

静止画はすべて PNG。同じ中身の GIF と比べて、色数は多く、輪郭はきれいで、ファイルは小さくなります。

GIFが向いている場面

アニメーションが必要で、送り先が動画を受け付けないときだけ GIF——メール、README、課題のコメント。

見落とされがちなところ

GIF は 256 色までです。この形式で保存した写真は縞とまだらだらけになり、その劣化は元に戻りません。

PNGからGIFに乗り換えるとき

失われるもの

GIF が 1 枚の画像に持てる色は最大 256 色です。写真はここでパレットまで減らされ、空に縞が出るのはそのためです。これは品質の設定ではなく、形式そのものです。

PNG は 1 チャンネルあたり 16 ビットまで扱え、GIF に残るのは 8 ビットです。この余裕こそが、思い切った補正をかけてもトーンジャンプを出さずに耐えるぶんです。ですから変換は編集のあとに行ってください。先ではありません。

残るもの

失われるものはありません。PNG も GIF も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。PNG も GIF もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

変換先の形式が追加で扱えるもの

GIF はアニメーションを持てますが、PNG ファイル は 1 フレームしかありません。出てくるのは絵 1 枚のファイルで、それがもっと多くを扱えたはずの形式に入っている、という状態です。

結果を開く

Adobe PhotoshopとGIMPは PNG と GIF のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

PNG は PNG Development Group の形式です(1996 年に登場)。 記録は 1 チャンネルあたり 16 ビットです。

GIF は CompuServe の形式で、1987 年から使われています。規定は GIF89a です。GIMP、Adobe Photoshop、ImageMagickがこの形式を読めます。

GIFからPNGに戻すとき

失われるもの

PNG が持てるのは静止した 1 フレームだけです。動く GIF ファイル からは最初のフレームだけが残り、あとは落ちます。この変換はそこから 1 枚の絵を取り出すもので、動きを運ぶものではありません。

残るもの

失われるものはありません。GIF も PNG も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。GIF も PNG もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

結果を開く

GIF は 1987 年のもので、今ではほとんど使われていません。PNG は今のプログラムが書き出す形式なので、この変換は「読める状態を保つ」という話でもあります。

GIMPとAdobe Photoshopは GIF と PNG のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

GIF は CompuServe の形式です(1987 年に登場)。 記録は 1 チャンネルあたり 8 ビットです。

PNG は PNG Development Group の形式で、1996 年から使われています。規定は ISO/IEC 15948 です。Adobe Photoshop、GIMP、Paint.NETがこの形式を読めます。

PNGからGIFへの変換で実際に起きること

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG.

PNG139 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as GIF.

GIF36 KB3.8 分の 1

なだらかな階調、やわらかい輪郭、粒状感のある写真です。GIFが想定している、あるいは想定していない典型例で、数値がどちらなのかを示します。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG.

PNG7 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as GIF.

GIF8 KB8% 大きい

背景が透明で、図形にグラデーションがかかっています。GIFは両方を保持するか、片方だけ保持するか、透明部分を単色で塗りつぶすかのいずれかです。ここが見落とされがちな差です。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG.

PNG3 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as GIF.

GIF6 KB2.4 倍

インターフェース、グラフ、ロゴのような、平坦な色と硬い輪郭です。上の写真とは挙動がまったく違い、答えが「ファイルの中身による」になる理由でもあります。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。

並べて比べる

PNGとGIFを項目ごとに比較 — 何を保持し、その代償は何か。
PNGGIF
Full namePortable Network GraphicsGraphics Interchange Format
拡張子.png.gif
メディアタイプimage/pngimage/gif
圧縮方式可逆 — 何も捨てない可逆 — 何も捨てない
当サイトで書き出せるかはいはい

決まりましたか。ここで変換できます

これらのフォーマットについて

この数値の出典

このページがPNG and GIFについて述べていることは検証できます。根拠となる資料は次のとおりです。