かしこくもなりたいし、女の子にもなりたかった。

とってもガーリーなゆるふわ愛され何でも屋を目指す、30代男性がお送りするファビュラスなブログ。

描き方一つでファイルサイズは変わる (PNG編)

PNG(orGIF)の描き方によるサイズの変化

いつの時代も画像ファイルは大きいものです。でもこうしたものを小さくする工夫を、保存時の減色ツールとか保存オプション以外知らなかったりする人、けっこういるんですよね。今日はPNGを小さくするtipsとして、ノイズを取り除く事によって如何にファイルサイズを小さく出来るか?を見てみましょう。

実例から見てみましょう。

f:id:takustaqu:20140312005958p:plain f:id:takustaqu:20140312010008p:plain f:id:takustaqu:20140312010012p:plain

はい、なんのこっちゃか分かりませんね。 上のグラデーションはそれそれ描き方を変えているのですが、左から1046byte, 3086bytes, 14903bytesとなっています。ちなみに減色などは一切せず、そのままPhotoshopで24bit PNGとして出力しています。

それぞれ何をしているのか?というと、

  • レイヤースタイルにグラデーション適用
  • グラデーションツール+ディザつきのものを左8px分をリピートしたもの
  • グラデーションツールにディザを掛けて描画

という具合です。 ちなみに1枚目のやつは幅を8000pxとかにしてもファイルサイズは7kbだったりします。 なしてこんな事になるのかというと、「これが可逆圧縮特性だから」というのがその答えになります。

ではこの理屈を考えてみましょう。

さて、ではこれを現実世界に置き換えてみましょう。 同じ事を10回言う人、同じようなことを10回言う人。これらを方々の言うことを簡潔にまとめる方法にたとえると簡単かと思います。

  • 前者の人は信じられない事に「おはようございます」と正確に10回言います。

  • 後者の人は「おはようございまっさ」「おはようさん」「ボンジョルノ」「ぐっもーにん」など、意味はおはようございますながら、言うことを微妙に変化させながら10回言います。

はい、これで既に分かったかと思います。既に後者は前者の状況説明の倍の文字数を使っていながら、それでまだ状況を正確に伝え切れていません。正確に全てを書き出したら、この倍程度になるでしょう。つまり、同じものの連続は情報の正確さを保ったまま情報を物理的に小さく出来るのです。逆にノイズのような情報揺れは、その記録を正確にしようとする故にどうしてもファイルサイズが肥大化に繋がってしまうのです。これが、可逆圧縮特性です。これはPNGに限らず、ZIPやLZHも該当します。

んじゃ2番目の意味は?

ディザは基本的にはノイズです。勿論パターンディザを取る事でパターン化はできますが、これはこまったもんで人間の目にも知覚しやすいという欠点があります。しかしディザは決して減色の為のテクニックというわけではありません。限られた色の中で階調を自然に見せる技術です。故にディザを掛けたい場合は決して0ではないのです。 しかしここでディザそのものをある程度のパターンを繰り返す事で、左8px分のノイズパターンの繰り返しとして圧縮され、結果としてファイルが小さく出来るのです。色の連続の他にパターンの連続という方法もあることを覚えておいてください。

まとめ

実はこれらが一般的に「ロゴはPNG,写真はJPEG」というざっくりした説明に繋がってきます。写真は均一な部分が存在しえないからです。勿論これはほんの一面であり、これだけでフォーマットを選定できるほど単純な話でもありません。可逆性を求められる場合はPNGを選択する必要が出てくるわけですし、そもそもJPEGはアルファチャンネルを持てません。

ここで覚えていただきたい事は、PNGのような可逆は圧縮の効率を考えてちょっと意識してノイズのない絵を作る事で下手な減色を行うより、描き方を最適かした方がファイルサイズを小さくまとめる事ができるという事です。 特に最近はイメージスプライトで巨大なPNGを作る事も多々あります。今回のはほんの一面ですが、「これはコンピューター目線で考えたときに小さく表現為うるか?」と考えてみると良いかと思います。