呑みながらでもわかる! これくらいなら知っておきたい「PNGのしくみ」

こんにちは、開発の小野知之です。

つい先日、当社製品「OPTPiX imesta 7 for Mobile & Social」の最新版「Ver.7.55」において、PNGファイルのサイズを更に小さくする「PNG オプティマイザー」という機能をパワーアップしました。
» プレスリリースはこちら
そこで今回は、この機能に関連して、「そもそもPNGって、どんなふうに画像データを圧縮し、ファイルサイズを小さくしているの?」というお話をしたいと思います。

でも、あまり専門的なことは書かずに、「誰もがサラッと読めて、呑みながらでもなんとなくわかる」 ような感じに説明したいと思います。

呑みながらでもわかる! これくらいなら知っておきたい「PNGのしくみ」特に、ウェブページデザインやアプリ開発などでPNGを使っている方は、この機会に是非、知っておいてください。

1: 「PNG」って、どんなのだっけ

「PNG (Portable Network Graphics) 」は、1996年に誕生した画像形式です。当時、特許問題などで利用しにくくなっていた「GIF」に代わるものとして作られました。
現在では「JPEG」と並んで広く使用されています。

PNGの特長を、JPEGと比較して簡単にまとめると、こんな感じです。

JPEGよりも優れている点

くっきりキレイ

特に、文字や図形などのような輪郭のハッキリした絵(画面キャプチャなど)の画像では、JPEGよりも圧倒的に高画質です。

半透明アルファ対応

アルファは、美しいウェブページやアプリUIのデザインには必須と言えますが、JPEGはアルファに非対応です。

無劣化(可逆圧縮)

PNGは、何度保存しなおしても画質が劣化しない「可逆圧縮」な画像形式です。

一方、JPEGは「非可逆圧縮」な画像形式で、保存し直す度に画質がどんどん劣化しますので注意が必要です。

インデックスカラー対応

特にバナーやUIパーツなどのようなやや小さめの画像では、256色以下に減色し、インデックスカラーのPNG (PNG8) で保存してみてください。JPEGとあまりファイルサイズが変わらないのに、見た目はずっとキレイになります。

ただし、OPTPiX iméstaを使った場合です。減色を行うツールによっては、あまり綺麗にならない場合もあります。

JPEGよりも劣っている点

自然画ではJPEGが有利

写真などの画像では、JPEGとPNGの画質の差はほとんどわかりませんが、JPEGのほうが圧倒的にファイルサイズが小さくなります。

そのため、デジタルカメラの撮影画像にはJPEGが採用されています。

ちなみに「PNG」は、英語では「ping」と発音するのが正式であると仕様書には書かれています。
でも一般的には、「ピング」または「ピーエヌジー」と読む人が多いようですね。海外でも”pee en gee”と発音する人が多いという話を聞いています。

以上、「PNG」のおさらいでした。

2: PNGファイルができるまで

PNGファイルは、保存しようとしている元画像に対し、大きく分けて3つの処理を施すことで作られます。

  • [Step 1] フィルタ処理
  • [Step 2] 圧縮処理
  • [Step 3] ファイル保存処理

まず、「フィルタ処理」では、画像の各画素のデータを、「圧縮しやすい」ように加工します。加工とは言っても、画像の内容が変わるわけではありません(劣化しません)。

続いて「圧縮処理」で、より少ない量のデータへと「圧縮」します。もちろんこのときも画像が劣化することはありません。

最後に「ファイル保存処理」で、圧縮したデータをPNGファイルとして保存します。

では次からは、それぞれの Step についてもう少し詳しく説明していきます。

3-1: [Step 1] フィルタ処理

「フィルタ」とは言っても、ボカしたり色を変えたりするような「特殊効果」のことではありません。

まず、画像データの内容を、このあとの「圧縮処理」の都合が良いように加工します。この加工処理のことを「フィルタ」と呼んでいます。

とにかく、具体的な例を見てみましょう。

例えば、このような10個の数値が並んでいたとします。それぞれの数値は画像の各画素の「色の値」を表わしていると思ってください。

image02

これらの数値を、全部覚えなくてはならなかったら、どうしますか? 10個もあると、暗記するのはちょっと大変そうですね。

でも良く見るとこれ、「左から順に、1 ずつ増えている」ことに気がつきます。

だから、こう書き換えてみたらどうでしょう。

image03

数値そのものではなく、差分を取ってその数値に置き換えてみました。また、この数値が「左隣との差分」であるというメモも書き添えます。

数値は10個のまま変わりませんが、急にスッキリして、なんだかとても覚えやすそうになりましたね。

これが「フィルタ」により加工した例です。

あんまり酔ってない人向けの補足

フィルタには「Sub」「Up」「Average」「Paeth」「None」という5種類が定義されています。
今回の例で使った「左隣の数値との差分に置換する」という加工は「Sub」というフィルタによるものです。

また、フィルタは画像の1ラインごとに個別に指定できます。このため、PNGファイルを出力するアプリが「各ラインにどのフィルタを適用すれば圧縮率が最も向上するか」をいかに適切に決定しているかによって、最終的なファイルサイズに差が出るわけです。

3-2: [Step 2] 圧縮処理

さて、[Step 1] の「フィルタ処理」でデータを加工したわけですが、相変わらず「10個の数値」のままなので、データ量はちっとも減っていません。むしろ1ラインごとにメモを付けた分だけ増えています。

では次に、「圧縮」してデータ量を減らす例を見てみましょう。

先程「フィルタ処理」で加工したデータは、このようになっています。

image04

さて、あなたならこの10個の数値を、どうやって暗記しますか?

10個の数値を一つずつ覚える必要はありませんよね。

image05

覚えるのは、これだけの情報で済みます。

もう一度、一番最初の元データから順に見比べてみましょう。

image06

暗記しなくてはならないことが、大きく減ったのがわかります。
でも、元の10個の数値を完全に復元することができるのです。

これが、「データ圧縮」の非常に簡単な例です。

このようにしてPNGは、「フィルタ処理」と「圧縮処理」を組み合わせて、元の画像データの情報を失うことなく、小さく圧縮しているのです。

あんまり酔ってない人向けの補足

実際のPNGの圧縮では、上記の例のような単純なものではなく、「Deflate」というもっと複雑な圧縮アルゴリズムを使っています。
この圧縮アルゴリズムは、よく電子メールへのファイル添付などで使う「ZIP圧縮」とほぼ同じことをしている、と覚えておいてください。

ところで、「PNGファイルをZIP圧縮しても、ちっとも小さくならない」という体験をしたことはありませんか?
これは、PNGファイルが「既に圧縮済み」だからなのです。

3-3: [Step 3] ファイル保存処理

圧縮した画像データには、最後に「ヘッダ」と「チャンク」という情報をくっつけます。

「ヘッダ」と「チャンク」は、例えるなら「画像データの取り扱い説明書」のようなもので、画像の縦横サイズ、ビット深度、パレット、コメントなど、様々な情報がが書かれています。
ウェブブラウザなどは、これらの情報を元にして画像データを復元し、画面に表示しているわけです。

こうして出来上がったデータのカタマリを、名前を付けてファイルとして保存すれば、「PNGファイル」のできあがりです。

あんまり酔ってない人向けの補足

チャンクには、必須のチャンクとそうでないチャンクがあります。更に、自分で独自のチャンクを定義して情報を埋め込むことも可能です。
当然ですが、必須以外のチャンクが書き込まれていると、その分だけファイルサイズは大きくなってしまいます。

以上で、「PNGのしくみ」についてのお話しは終わりです。
どうでしょう、なんとなくわかりましたか?

覚えておいて、呑みの席でお披露目すれば、皆の注目の的! (※保証外です)

4: もっともっと小さくしたい!

当社製品「OPTPiX imesta 7 for Mobile & Social」の「PNG オプティマイザー」では、これら3つのそれぞれの Step において、「少しでも小さいファイルサイズのPNG」になる工夫をしています。

しかし、「まだまだ、もっと小さくしたい!」という方もたくさんいると思います。そういう方のための機能も OPTPiX imesta には用意していますので、最後にご紹介して終わりたいと思います。

「PNG24高圧縮化加工」

写真のような自然画のダイレクトカラー画像を、ダイレクトカラーのまま更にファイルサイズを小さくしたいときに適した機能です。

この機能では、ダイレクトカラーの画像に対し、「人間の目ではわからない程度」の「PNGの圧縮率が向上する」変更を加えます。
画像に変更を加えるので、正確には「非可逆圧縮」です。

しかし、元画像の見た目をほとんど変えずに、PNGのファイルサイズを「最大約30%削減」できるのです

下記のブログエントリにサンプル画像がありますので、是非ご覧ください。
» https://www.webtech.co.jp/blog/products/optpix-imesta/3106/

 

「減色」

バナーやUIパーツのような、やや小さめでクッキリした画像では、OPTPiX imseta の「減色」機能の効果が絶大です。
画像で使用している色数を256色以下に減らし、インデックスカラーにしてからPNGで保存することで、ファイルサイズを大幅に削減できます。

特に、「減色」と「PNG オプティマイザー」をセットで使うことで、画質をほぼ保ったまま、PNGファイルサイズを「最大約80%削減」することが可能です。

下記のプレスリリースにサンプル画像がありますので、是非ご覧ください。
https://www.webtech.co.jp/information/imesta/imesta_Press_20131225.html

タグ , , , , | 2020/06/16 更新 |