AzPainter使い倒し HOME小技・豆知識

Web掲載のイラストやロゴに良く使われるGIF(ジフ)について、その特徴や注意点を説明します。

GIFは、最大256色が使えるインデックスカラーという仕組みで、画像を記録します。
画像に使われている色を元に「パレット」を作り、そのの1つ1つの色に「番号」を割り当てて、その番号で記録するのがインデックスカラーです。
この番号が、いわば色の「名札」(インデックス)というわけですね。

色数が少なく、同じ色が連続している(ベタ塗り)部分が多い、比較的小さなイラストや説明図、ロゴ画像等の保存に適しています。
一方、色数が多く微妙に変化しているような写真や、グラデーションを多用した画像には向いていません。

画像の中の1色を透過色に指定して、ブラウザ等で表示させないようにすることができます。
2枚以上の画像に表示順や時間を指定して、アニメーションが作れます。
(AzPainterでは、このGIFアニメーション保存はできません・・・専用ソフトが必要になります)



左図は、AzPainterで描いて文字入れした画像を、GIF保存したものです。
大変きれいに保存でき、しかもファイル容量も10.06KBと少なく済んでいます。

このような、ベタ部分が多く輪郭がはっきりした画像は、GIF向きです。



同じ画像をJPEGで保存すると、左図のように色ムラが出たり、文字の周りが汚くなったりします。
しかもファイル容量は16.51KBと、GIFより多くなっています。

適切な形式で保存することの大切さがわかりますね。


色数が256色を超える画像をGIF保存すると、AzPainterでは自動的に減色されます。
減色方法には色々ありますが、AzPainterでは「メディアンカット(中央値分割)」という方式を使っているそうです。
多く使われている色が優先される一方、微妙に色が変化している部分は、色の階調が大雑把になります。

左は写真をGIF保存してみたものですが、栗の甘露煮や寿司ネタの表面がザラザラになっているのはこのためです。



イラストやロゴでも、グラデーションやぼかしが多い画像だと、GIFでは厳しい場合があります。

例えば左のような画像・・・GIFで保存しましたが、編集中の画像と比べると、グラデーションのなだらかな変化やぼかしの柔らかさが、だいぶ損なわれています。
特に大きな画像をGIF保存すると、グラデーション部分のガタガタが目立つようになります。


← 上の画像の左下部分を拡大してみました。
白いぼかしやグラデーションの部分、隣り合っているピクセルの色の違いがはっきりわかりますね。
256色しか使えない仕様の影響が出ています。

このような画像の場合、イラストやロゴでもJPEGの方が向いていることもあります。

AzPainterでのGIF保存では、次のことに注意しましょう。

●色数の多い画像は、保存前に「フィルタ」⇒「カラー」⇒「減色」で256色に減色してみると、GIF保存後の色の状態がわかります。
 必要なら「誤差拡散」にもチェックを入れて試してみます。
 この状態で納得いかなければ、(元に戻して)他の形式で保存した方がいいでしょう。

●GIFは64色、16色などのモードもありますが、AzPainterでは256色モードでしか保存できません。
 色数が少ない画像の場合は、それに適した色数モードの方が、一般にファイル容量が少なくて済みます。
 容量にこだわる方は、AzPainterではとりあえずBMPで保存し、別のソフトでGIFに変換した方がいいでしょう。
 別の減色方法を試したい時も同様です。

横縞のGIF画像 縦縞のGIF画像

ファイル容量の話が出たついでに、ちょっとオマケです。
上の画像は、どちらも300×150pixelのGIF画像で、AzPainterのテクスチャONで塗りつぶして、横縞と縦縞にしたものです。
横と縦の違いだけですが、横はファイル容量が0.53KB、縦は1.54KBもあります。
縦縞は横縞の約3倍の容量ですね・・・何故だと思いますか?

GIFでは画像情報を記録する時に、同じ色が横に並んでいるとまとめて記録するのです。
いわばこれがGIFの「圧縮」です。
ですから横の連続が多いほど、「まとめ度」が高いので、容量が節約できます。
つまり上の横縞画像は横一列が、例えば「緑が300ピクセル」だけで済んでるわけですね。
それに対して縦縞の方は、「緑が●ピクセル」「青が●ピクセル」「緑が・・・」と何度も繰り返して記録しています。
だから容量が増えるのです。

このことを知っていると、GIF画像を作る時に、無駄に容量を増やさないコツがわかりますね。

BMPについてJPEGについてPNGについてGIFとPNGの透過色