PNGの画質を劣化せず極限までファイルサイズを落とす、たった1つの方法

PNG

ウェブ上で使用される画像ファイルのフォーマットには、主にJPEG、GIF、PNGという3種類の圧縮形式があり、この中で可逆圧縮かつフルカラー、つまり元画像の画質を見た目上一切劣化させることなくファイルサイズを縮小できるのがPNGですが、欠点は高画質な分ファイルサイズが大きくなってしまいがちなこと。

このため、フルカラーのPNGをウェブ上で使用する場合は専用ツール(有名なものではAzConvPNGなど)を使用してファイルサイズの最適化を行い、画質を劣化せずにできる限りサイズを落とした上でサーバーにアップロードされることがよくありますが、それでも削減できるファイルサイズは良くて1割といったところでしょう。

実は、一般にはほとんど知られていませんが、この他にもフルカラーPNGを画質劣化なしに、さらに大幅にファイルサイズを削減できる裏技的な方法が存在します。やり方は少し面倒ですが、うまく使えば非常に有益なテクニックなので、ここではその方法を詳しく紹介してみたいと思います。


実際にどれくらいの効果があるのか?

Browsers

まずは、上の画像を見てみましょう。この画像は説明用に試しに作ってみたもので、GIMPというフォトレタッチソフトを用いて編集しフルカラーPNG形式で保存した後、さらにAzConvPNGを使ってファイルサイズの最適化を行ったもので、保存ファイルサイズは約75.67KBとなっています。

Firefoxなどを使っている人はコンテキストメニューから画像のプロパティを確認してみると良いでしょう。(今回は、ファイルサイズ最適化ツールにAzConvPNGを使用しましたが、同類のツールであっても搭載するアルゴリズムの違いによって多少効果が異なる場合があります。)

一般的に、ここまではフルカラーPNGを圧縮保存する際の常識的なテクニックなので、WEBデザイン・WEB制作などに携わっている人ならば、おそらく誰でもやっていることでしょう。

Browsers

次に、こちらの画像を見てみましょう。1つ目と同じくフルカラーPNGで保存したもので、JPEG形式で保存した際に見られるようなモスキートノイズやGIFのようなグラデーションの荒さ(マッハバンド)もなく、見た目上の画質などは全く同じに見えます。ところが、ファイルサイズはなんと61.06KBまで縮小することに成功しています。

つまり、普通のやり方では同じフルカラーPNG形式のままでは75KB程度までファイルサイズを落とすのが限界だったところを、”ある特別な方法”を用いることで、画質を保ったままさらに15KB近くも縮小できてしまったというわけです。

私は普段から、ブログ記事にフルカラーPNG画像を使用する際には、必ずこの方法を使ってファイルサイズを縮小してからアップロードしていますが、平均で2~3割程度、場合によっては4割程度の縮小が可能です。

そもそも、「ファイルサイズの大きさをを気にするならフルカラーPNGを使わない方が良い」と考える人も多いと思いますが、デザイン上の理由で画質の劣化を避けたいときなど、どうしても使わなければならないこともあるでしょう。

また、WEBデザイナー・デベロッパーなど業務でウェブ制作に携わっている人ならば、わずか2~3割のファイルサイズの縮小がどれほど重要なものであるかということは十分に理解されていることでしょう。

というわけで、やり方は少し面倒ですが使い方によっては非常に有効な方法なので、以下に順を追ってこのファイルサイズ縮小テクニックの解説を進めていきます。

また、あらかじめ注意書きしておきますが、この方法が有効なのは「フルカラー」で保存されたPNG画像ファイルのみになります。同じPNGフォーマットの画像でも256色以下で保存されている場合、またはJPEGやGIFで同じ事をしても、逆にファイルサイズが大きくなってしまいます。

フルカラーPNGの画質を劣化なしに極限までファイルサイズを落とす方法!

1、ファイルサイズを縮小したい画像を用意します。ここでは説明のため、先ほどと同じ画像を用います。この画像は既にファイルサイズの最適化を行ったもので、この時点では75.67KBとなっています。
Browsers

2、画像ファイルに”電子透かし”を入れるソフトステガノグラファーをダウンロードします。(”電子透かし”とは、あるファイルに別のファイルを表面上は分からないように埋め込む技術のことです。)
ステガノグラファー

3、ステガノグラファーのダウンロードが完了したら、インストールしてください。(注意:KINGSOFT Internet Securityを有効化しているとマルウェアとして誤検出されるようです。)
ステガノグラファーのインストール

4、インストールが完了したら、ステガノグラファーを起動します。(このソフトを使って、ファイルサイズを縮小したいPNG画像を高画質に保ったまま、”電子透かし”を埋め込みます)
ステガノグラファー

5、画像をステガノグラファーにドラッグ&ドロップしてください。
ステガノグラファーに画像を追加

6、メニューから[電子透かし] – [電子透かし情報の埋め込み]を選択。
電子透かし情報の埋め込み

7、設定画面が開きます。「パスワード設定」の項目は、[パスワードを設定しない]を選んでください。
パスワードを設定しない

8、「追加」をクリックします。
電子透かしの追加

9、「OK」をクリックします。
電子透かし情報の埋め込み

10、「ファイルを追加」ダイアログが開きます。「ファイル選択」をクリックして、”電子透かし”として埋め込むための何か適当なファイルを選びましょう。埋め込むファイルの種類は何でもかまいませんが、できるだけファイルサイズの小さいものが適しています。例えば、自分の著作権情報を短く記入したテキストファイルなどが良いでしょう。
電子透かし情報の埋め込み

11、「圧縮」の項目は、[効率優先で圧縮]を選んでください。
効率優先で圧縮

12、埋め込むファイルを選択したら、「OK」をクリックしてダイアログを閉じます。
電子透かし情報の埋め込み

13、「透かしデータ」の欄に先ほど選択したファイルが追加されていることを確認したら、「OK」をクリックします。
設定の完了

14、ダイアログが表示されたら、「OK」をクリック。
ダイアログ

15、「埋め込み結果のレポート」が表示されたら、「OK」をクリックします。
電子透かし情報の埋め込み

16、名前を付けて保存します。
名前を付けて保存

17、オプションの「インターレース」のチェックは外しておいてください。
インターレース

18、保存された画像のファイルサイズを確認してみましょう。今回は、見た目の画質は変わっていませんが、75.67KBだったものがこの時点で71.23KBまで縮小されています。
Browsers

19、さらにファイルサイズを縮小するため、PNGファイルサイズ最適化ソフトを使います。AzConvPNGをダウンロードしてください。
AzConvPNG ダウンロード

20、ダウンロードが完了したら解凍して、「AzConvPNG」を起動します。
AzConvPNG

21、ファイルサイズを縮小したいPNG画像ファイルをドラッグ&ドロップします。
AzConvPNG

22、「上書き保存」をクリック。
AzConvPNG

23、ファイルサイズがなんと71.23KBから61.06KBまで縮小されました!
AzConvPNG

なぜ画質を落とさずにファイルサイズを大幅に縮小できるのか?

というわけで、今回のケースではもともと75KB程度までファイルサイズを縮小するのが限界だったところを、画質を落とさずにさらに15KB近くも削ることができました。なぜこんなことが可能なのでしょうか?

実は、上に解説したファイルサイズ縮小テクニックの適用前と適用後では見た目の画質は全く変わっていないように見えますが、実際には見た目にはほとんど分からないレベルでがわずかに変化しています。

皆さんは、携帯電話のカメラで撮影するとデジタル情報を読み取ってくれる「QRコード」というものをご存じでしょう。今回、”電子透かし”の埋め込みに用いた「ステガノグラファー」というソフトは画像ファイルに別のファイルをくっつけるためのものですが、仕組みはちょうどQRコードと同じように、「絵」の中にデータを埋め込むというものです。

本来は画像ファイルをダミー(器)として、埋め込んだ透かしデータを隠蔽するためのソフトウェアですが、これをうまく利用すると、もとの画質を保ったまま、埋め込んだファイルのデータを「絵」の中に書き出してくれるため、その結果として画像の内容がわずかに変化し、フルカラーPNGではうまい具合にファイルサイズが縮小されるというわけです。

この方法は、毎回ステガノグラファーを起動して”電子透かし”を埋め込まなければならないが少し面倒ですが、例えばコピーライトなどを記入したテキストファイルを埋め込んでおけば、自分のウェブサイトなどで公開している画像ファイルを誰かに無断使用されたときに、自分が著作権者であることを証明できるなど、一石二鳥です。

なお、事前に調べてみたところ、(少なくとも日本語サイトでは)このような方法を紹介しているサイトは一件も見つからなかったので、ウェブデザイナー・ウェブデベロッパーなど業務で画像ファイルの扱いに携わっている人でも、このようなテクニックを実践している人は少ないと思われますが、知っていると非常に便利な方法なので、ぜひうまく活用してみてください。

関連する記事

当ブログを気に入っていただけたら RSS の登録をよろしくお願いします!
また、Twitter のフォローや Facebookページ でも更新通知を受け取れます。

Facebook ページ (更新情報を配信しています)

タグ

2011 年 3 月 4 日 | コメント/トラックバック(9)|

カテゴリー:Tips

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1. yo より:

    はじめまして、はてブからきました。
    この方法って要は電子透かしを入れると、見た目を変えずにうまく色数を減らせるってことですよね?

    確かに他にそういうことができる方法は私も知らないので、このアイデアは斬新だと思いますが
    見た目はほとんど変わりませんがファイル自体は劣化していないわけではないですし、
    非可逆なのに「画質を劣化なしに…」というタイトルはどうかと思います。

    あと、QRコードの話が電子透かしとどう関係あるのかよく分かりません。

  2. 管理人 より:

    >>yoさん

    >この方法って要は電子透かしを入れると、見た目を変えずにうまく色数を減らせるってことですよね?

    はい、その通りです。記事内での説明の仕方が悪かったかもしれません。暇なときにもっと分かりやすい説明に修正しておきます。

    >ファイル自体は劣化していないわけではないですし、非可逆なのに「画質を劣化なしに…」というタイトルはどうかと思います。

    確かにファイル自体は劣化しますが、
    いわゆる「見た目の劣化」はないと言っていいレベルなので、このようなタイトルにしました。
    可逆非可逆云々よりも、この記事自体は「実際の使用において実用性があるかどうか」
    という視点から書いたものなので、見た目さえ変わらなければ問題ないという認識です。

    >QRコードの話がどう関係あるのかよく分かりません。

    ならば試しに電子透かしを埋め込んだ画像を、
    まったく同じサイズできれいにスクリーンショットを撮って保存してみてください。
    ステガノグラファーで見ると透かしデータが抽出できるのが分かるはずです。

  3. MO より:

    フルカラー32bitの画像がステガノグラファーによって31~30bitに劣化しているので、判る人には判ります、というか、これでOKなのであれば、フルカラー32bitはいらなくて30bit程度でも充分なのかもしれませんね。もちろんコンピュータで扱うには不便なbit数ですが。この方法は原理的にはjpgの情報量を削る処理に近いものがあります。

    ちなみにこの画像をJPG形式で圧縮率をギリギリまで下げて保存すると48Kbyteになり「見た目」には劣化しませんでしたので(圧縮ソフト次第ですが)、この画像の場合はJPG形式でもいいかもしれませんね。

  4. Syota より:

    劣化しないという表現はおかしいでしょう。
    ステガノグラファーを使用した時点でファイルはデータの欠損を起こしているわけですから、
    見た目がどうあれ欠損も劣化もしています。

    また、劣化や非可逆を許すのであれば、ただ減色すればいいのでは?
    それこそ見た目を変えずに原色する方法はあるでしょう?

    勘違いなさらぬように言っておきますが、
    この方法は「誰もやっていない新しい方法」なのではなく、ただ「見当違いな方法」であるから誰もやってないだけですよ。

    あと、電子透かしのような技術とQRコードのような技術はまったくの別物で、無関係のものですよ。
    混同していませんか?

  5. 管理人 より:

    >>MOさん

    確かに、使っているPCの環境(グラフィックカード・ドライバ)や液晶ディスプレイの品質にもよると思いますが、
    じっくり見比べれば微妙に劣化してるのが判らないこともないかもしれませんね。

    今回の画像では、おっしゃる通り本来JPGの方が適していると思います。
    ただJPGだとどうしても色のにじみが避けられず、
    特に、模様の細かい画像の場合は最も高画質に設定してもかなり劣化が目立ってしまうことがあるので、
    そういう場合にはこの記事のような方法で圧縮したPNGが役に立ちそうですね。

    >>Syotaさん

    まあ確かに、ImageMagickなどを使えばフルカラーのPNGを
    257色以上で任意の色数に減色できないこともありませんが、
    その場合、ここで紹介した方法を利用するよりも圧倒的に時間と手間がかかります。

    なので、「たった一つの方法」は言い過ぎたかもしれませんが、
    誰でも簡単に実践できる方法で、うまい具合にフルカラーPNGを減色するには
    私の知っている限りでは今のところこの方法しかありません。
    そういう意味では、まったく見当違いな方法とは思いません。

    QRコードの件については、技術的なことを言っているのではなく、
    絵の中にデジタル情報を埋め込むという点では、
    画像ファイルに電子透かしを埋め込むのも同じことだと伝えたかったのです。

  6. Syota より:

    >誰でも簡単に実践できる方法で、うまい具合にフルカラーPNGを減色するには
    >私の知っている限りでは今のところこの方法しかありません。
    >そういう意味では、まったく見当違いな方法とは思いません。
    減色するなら専用のグラフィック系のソフトがあると思いますが。
    なぜ減色するために、データを欠損させて任意のデータを埋め込むためのソフトを使うのですか?
    減色したいなら減色するためのソフトを使えばいいのではないでしょうか。
    それこそ見当違いの方法というのではないでしょうか。

    QRコードは「絵の中にデジタル情報を埋め込む」ものではありません。
    QRコードはバーコードです。デジタルデータをパターン化したものです。
    「画像ファイルに電子透かしを埋め込む」ことでデジタルデータを保持しているわけではありません。
    なので、QRコードと電子透かしはまったく無関係のものです。

  7. 管理人 より:

    >>Syotaさん

    >減色したいなら減色するためのソフトを使えばいいのではないでしょうか。

    実用的なものが見つからないので、あえてこのような方法をとっているという訳です。
    それにこの方法なら、汎用的に見た目に判らない程度に色数を減少させられるので、
    いちいち数値を気にする必要がなく素人にもわかりやすいというメリットもあります。
    もし何か良さそうなソフトがあったら、ぜひ教えてください。

    >QRコードはバーコードです。デジタルデータをパターン化したものです。

    はい、つまり絵の形状によってデジタルデータをパターン化しているわけですね。
    ステガノグラファーで画像ファイルに電子透かしを入れる場合も、
    錯乱画像の色や形状によってデジタルデータをパターン化させます。

    つまり、メタデータのようにファイルそのものが透かしデータを保持するわけではないので、
    グラフィックをほんの少し書き換えるだけで透かしデータは消失します。
    先に申し上げた「絵の中にデジタル情報を埋め込む」とは、そういう意味です。

    これらの点は電子透かしもQRコードも同じですから、無関係ではありません。
    勘違いされていたようですが、理解していただけたでしょうか?

    コメント欄で議論し合うのは当サイトのポリシーに沿わないので、この話題は以上で締めくくらせていただきます。

  8. yo より:

    管理人さんへ

    返信ありがとうございます

    なるほど~、QRコードと電子透かしの説明とてもよく分かりました^^

    Syotaさんは向きになって噛み付いて少し大人げない…。

    情報としてはそれなりの価値がある記事だと思いますよ。

  9. mdr より:

    ステガノグラファーはなぜか「自己解凍に失敗しました」となりますね。
    (XPです)


コメントをどうぞ

このページの先頭へ