PNG画像をガッツリ圧縮して出力できるPhotoshopプラグイン『SuperPNG』を紹介｜比較画像もあるよ！

こんな便利なプラグインがあったなんて… この記事を見てる人に説明は不要だと思いますが、画像のサイズを小さくすることの恩恵は絶大です。Webページを構成する大部分はテキストですが、ページのファイルサイズの大部分は画像なので、画像の軽量化はページ表示速度の高速化に直結します。

今までLeoTiger_7はPhotoshopCCでロゴやバナーを作った際、「Web用に保存」→「PNGoo」で圧縮するという手順を踏んでいたんですが、そんなめんどくさいことをしなくても一発で圧縮して出力してくれるプラグインを見つけました。それが『SuperPNG』です。

もちろん、容量が小さくなる代わりに画質が損なわれる…なんてことはなく、むしろPhotoshopで出力したほうが画質が悪いという結果になりました。

ダウンロード

下記サイトのサイドバーにダウンロードのリンクがあります。

インストール

ダウンロードしたファイルを解凍し、出てきた「SuperPNG.8bi」というファイルを以下のフォルダに突っ込みます。 これでインストールは完了です。Photoshopを起動している最中に操作を行った場合、一度Photoshopを再起動すれば反映されます。

使い方

ファイル→別名で保存を選ぶと、ファイルの種類一覧の中に「SuperPNG」という項目が増えているので、選択して保存をクリック。 するとファイルの圧縮に関する設定画面が出てきます。 圧縮率は「Quantize」というバーで調整できるので、画質とファイルサイズを天秤にかけて選択しましょう。どうせならメタデータも消したほうがいいですね。
あとは「OK」を押すだけです。

次に、Photoshopの「Web用に保存」と「SuperPNG」の画質、ファイルサイズを比較してみます。

画質とファイルサイズの比較

サンプルで用意した画像がこちら。 これを色々な設定で出力してみます。

Web用に保存（PNG-24）：252KB

画質は最高ですが、ファイルサイズ的にWebでは使えません。

Web用に保存（PNG-8）：82.5KB

PNG-8でも綺麗に見えますが、背景を暗くするとトラップが仕掛けられています… 背景が白なら気になりませんが、暗い背景だったら使い物になりません。

SuperPNG（Highest Quality）：101KB

画質に関してはPNG-24と全く見分けがつかないですが、ファイルサイズは60%ほど圧縮されています。

SuperPNG（High Quality）：75.0KB

PNG-24と比較して70％ほど圧縮されましたが、まだまだ画質は損なわれていません。

SuperPNG（Medium Quality）：61.1KB

圧縮率は約76％です。よーく目を凝らせば気付きそうな変化が細部に現れていますが、普通の人は気付かないです。

SuperPNG（Low Quality）：50.5KB

ここまでくると、さすがに左上のテープ部分や文字の輪郭に劣化が見えてきます。まぁ言われなきゃ気付かないですが…

SuperPNG（Lowest Quality.1）：49.9KB

とうとう言われなくても気付くレベルで画質の劣化が現れてきました。文字の輪郭のカクつきが目立っていますね。

SuperPNG（Lowest Quality.2）：1.97KB

---

一通り試してみましたが、High Quality～Low Qualityあたりが実用的だと思います。画質を取るかファイルサイズを取るかはお好みで…

とにかく「Web用に保存」を使う機会が減るのは確実なので、Photoshopでロゴやバナーを作成している人は是非一度使ってみてください！