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

ソフトウェア 約5分で読めます 投稿 2011/03/04 更新 2019/12/27

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ではうまい具合にファイルサイズが縮小されるというわけです。

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

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

このページの先頭へ