GIFの画質が悪い原因｜色がざらざら・縞になる理由と直し方
GIFの画質が悪く見えるのは、1コマに使える色が256色までだからです。写真やグラデーションは近い色に置き換わり、縞かざらざらした点の混ざりになって現れます。症状ごとの直し方と、ファイルの大きさとのつり合い、縁がギザギザになる理由まで、実際に作った数字で説明します。
公開読了目安 約5分
この記事の要点
- GIFは1コマ256色までで、写真やグラデーションは近い色に置き換わる
- 縞は色の境目、ざらつきは誤差拡散の点の混ざりで、どちらも256色に収めた跡
- 256色の例のグラデーションでは、誤差拡散をかけるとファイルが約2.7倍になった
- 色合いの違う写真を並べるなら、色の表をコマごとにするとずれが小さくなりやすい
- 縁がギザギザなのは、GIFの透明が透明か不透明の2段階しかないから
目次
GIFの画質が悪く見える一番の理由は、1コマに使える色が256色までしかないことです。 写真やグラデーションは何万色も使っているので、GIFにすると近い色にまとめて置き換わります。
その跡は、なめらかな部分の「縞」か、細かい点の「ざらつき」のどちらかで現れます。 この記事では、2つの症状がどこから来るのかと、症状ごとの直し方を、実際に作ったGIFの数字で説明します。
GIFの色は1コマ256色まで
GIFは、画像の中で使う色を「色の表」に並べ、画素ごとに表の番号を書く形式です。 この表に入る色は、仕様で256色までと決まっています。
例として、左上の青から右下の橙へ色がなめらかに変わる画像（480×160px）を用意しました。 この画像には25,025色が使われていて、GIFにすると256色以下に減らすしかありません。
このツールは、似た色をまとめて1つの色にする方法（メディアンカット）で減らします。 まとめた色と元の色との差が、画質の落ち方として目に見えます。
縞とざらつきは、256色に収めた跡
色をまとめたまま置くと、なめらかに変わっていた部分に、色の境目が段になって出ます。 これが「縞」です。
段を目立たなくする方法が「誤差拡散（ディザ）」です。 置き換えでできた色の差を周りの画素に少しずつ配り、細かい点の混ざりで中間の色を表します。
縞が消える代わりに、近くで見ると点がざらざらして見えます。 写真をGIFにしたときのざらつきは、この点の混ざりです。
色のずれを数で比べると、誤差拡散をかけたほうが1画素ごとのずれは大きく出ます。 例のグラデーションで、元の色からのずれ（RGBの距離）の平均は次のとおりでした。
- 256色: 誤差拡散なし 3.9・あり 4.8
- 32色: 誤差拡散なし 10.3・あり 13.1
数が大きくても、離れて見ると誤差拡散のほうがなめらかに見えます。 数字ではなく、実際の見え方で選ぶのが確実です。
症状から直し方を選ぶ
困っている症状ごとに、変えるところをまとめます。
- なめらかな部分に縞が出る: 色数を256色に戻し、誤差拡散をかけます
- 点のざらつきが気になる: 誤差拡散を外します。その代わり縞が出やすくなります
- 写真ごとに色がくすむ: 色の表を、全コマで1つから「コマごと」に変えます
- 縁がギザギザで、白や黒のふちが出る: 余白を、GIFを貼る先の背景と同じ色にします
- ファイルが大きすぎる: 誤差拡散を外す・色数を減らす・大きさを小さくする、の順に試します
色の少ないイラストやスクリーンショットは、そもそも256色に収まることがあります。 半透明の画素が無く、256色（透明を使うときは255色）以下に収まる画像なら、元の大きさのまま作れば色を減らさずに済みます。
ただしこのツールで大きさを変えると、隣り合う色のあいだに中間の色ができて、色の数が増えます。 イラストを色のままGIFにしたいときは、元の大きさで作るのがおすすめです。
誤差拡散はファイルを大きくしやすい
GIFは、同じ番号の並びがくり返し出てくると、それを短い記号に置き換えてファイルを小さくします。 誤差拡散で点が混ざると、同じ並びが出にくくなるので、縮みにくくなります。
例のグラデーションで、ファイルの大きさは次のようになりました。
| 色数 | 誤差拡散なし | あり |
|---|---|---|
| 256色 | 14 KB | 36 KB |
| 32色 | 4 KB | 21 KB |
256色では、誤差拡散をかけると約2.7倍になりました。 大きさに上限がある送り先なら、先に誤差拡散を外してみるのが手早い方法です。
写真を並べるなら、色の表をコマごとに
GIFには、全部のコマで1つの色の表を使う方法と、コマごとに表を持たせる方法があります。 全部で1つだと、夕焼けと海と森のように色合いの違う写真が、256色を分け合うことになります。
色合いの違う3枚（各240×160px）で比べると、誤差拡散なしでのずれの平均は次のとおりでした。
- 全コマで1つの表: ずれの平均 4.0・ファイル 24 KB
- コマごとの表: ずれの平均 2.7・ファイル 37 KB
コマごとにすると色のずれは小さくなりましたが、ファイルは大きくなりました。 大きさを優先するなら全コマで1つ、色を優先するならコマごと、と選び分けます。
縁がギザギザになるのは、透明が2段階だから
PNGは、縁の画素を半分だけ透明にして、なめらかな輪郭を作れます。 GIFの透明は「透明」か「不透明」の2つしかないので、半透明の画素はどちらかに倒すしかありません。
例の丸（160×160px）には、縁に半透明の画素が364個ありました。 不透明度が約50%以上の184個を不透明に、残りの180個を透明にしたので、縁が階段状になります。
このツールは、不透明にした画素の色を「縁をなじませる色」と混ぜて決めます。 混ぜた色と貼る先の背景が違うと、白いふちや黒いふちが出ます。
貼る先の背景が決まっているなら、透明を使わず、余白をその背景の色にするのが確実です。 半透明の画素がその色と混ざって不透明になり、縁がなじみます。
GIFを作り直すときは
ここまでの直し方は、GIFアニメ作成の詳細設定ですべて試せます。 作ったあとに色を変えた画素の割合と、作る前とGIFの絵の見比べが出るので、設定を変えながら比べてみてください。
関連記事
- 画像からGIFアニメを作る手順：ツールの操作を順に説明しています
- GIFアニメが遅い原因：0.01秒以下の待ち時間が0.1秒で再生される理由です
- GIFアニメを1コマずつ画像にする手順：既にあるGIFをコマに分けます
あわせて読みたい
同じテーマ・関連ツールの記事です。