GIF vs PNG
どちらも写真を保存できますが、トレードオフが異なります。実際の違いと、選び方をまとめました。
Short answer
静止画なら、PNG はあらゆる面で GIF に勝ちます。もう二十年そうです。動きのあるものなら、正直な答えはたいてい「どちらでもない」で、動画ファイルを使ってください。
Why this comes up
GIF が生き延びているのは技術的な長所ではなく文化的な惰性のおかげです。PNG と比べられる理由は二つのどちらかです。古い GIF を持っていて今風にしたいか、動くものが欲しくて名前を挙げられる動画形式が GIF しかないか。これは別の問題で、二つめにはこのページの見出しが示すよりも良い答えがあります。
項目別の比較
| 項目 | GIF | PNG |
|---|---|---|
| 圧縮方式 | 可逆 | 可逆 |
| 透過 | 対応 | 対応 |
| 一般的なファイルサイズ | 同等の JPEG のおよそ 200-400% | 同等の JPEG のおよそ 300-500% |
| 互換性 | 数十年前のソフトも含め、どこでも開けます | 数十年前のソフトも含め、どこでも開けます |
| 主な入手元 | ページ容量を最適化しているウェブサイト | スクリーンショット、ロゴ、図版 |
What actually differs
GIF は 1 コマ 256 色まで
これが GIF を決定づける制約で、GIF の写真がざらついてまだらに見える理由です。PNG は 24 ビットフルカラーに 8 ビットのアルファチャンネルを備えます。グラデーションのある画像、写真、微妙な陰影は、GIF のパレットによって実際に損なわれ、その損傷は焼き込まれています。その GIF を PNG に変換しても、ディザリングはそのまま残り、元には戻りません。
GIF の透過は 1 ビット、PNG は 256 段階
GIF の画素は完全に透明か完全に不透明かのどちらかです。半透明がないので、GIF のロゴは想定された背景以外に置くと、階段状のギザギザした縁が出ます。PNG の 8 ビットアルファなら、なめらかにアンチエイリアスされた縁が、どんな色の上でも正しく収まります。ロゴやアイコンなら、この差だけで決まりです。
PNG も動かせる。ただしそれは求めている解決ではない
APNG はアニメーションする PNG で、現行のブラウザーはすべて対応しています。フルカラーと本物のアルファを持つので、画質の面では GIF アニメからの純粋な格上げです。ただし動き補償のない全コマの連なりであることは変わらず、動画のような内容を数秒入れれば依然として巨大になります。同じクリップを MP4 や WebM にすれば、ふつうに 10〜20 倍小さくなります。
Which to use
Use GIF for
新規ではほぼ何もありません。GIF を使う価値があるのは、そこしか受け付けないプラットフォームがある場合か、すでにファイルがあって再エンコードしても得がない場合だけです。
Use PNG for
静止画の用途すべて。ロゴ、アイコン、スクリーンショット、線画、そしてきれいな透過や 256 色を超える色が要るもの。
One thing that catches people out
画面収録のことで来たなら、答えは動画ファイル
GIF で書き出したデモ映像や画面収録は、数秒でも数十メガバイトになるのが普通です。どのコマも丸ごと保存されるからです。同じ収録を MP4 や WebM にすれば容量はその何分の一かになり、画も鮮明で、意味のあるプラットフォームならどこでもその場で再生できます。GIF に残った利点は、動画が禁じられている場所でも無音で自動再生されることですが、その場所の一覧は年々短くなっています。