PNG画像をより美しく、より軽量に最適化するPhotoshopの機能拡張 -PNG Hat

Photoshopで作成したものをCSS3に書き出す「CSS Hat」、Subtle Patternsのパターン素材を簡単に利用できる「Subtle Patterns」、各ソーシャルメディアのテンプレートを1クリックで作成できる「Social Kit」などをリリースしているmadeby sourceから、これもまた便利なPhotoshopの機能拡張がリリースされたので紹介します。

PNG Hatは有料の機能拡張で、機能はそのお値段以上の価値がある優れものですよ！

PNG Hat

PNG HatはWin/Mac対応、Photoshop CS5以降で利用できます。

• PNG Hatの主な特長
• PNG Hatの利用シーン
• PNG Hatのインストール
• PNG Hatの他のレビュー記事

PNG Hatの主な特長

PNG Hatは、PhotoshopでのPNG, JPEGの書き出しを強力に最適化する機能拡張で、標準機能と比べ、より美しく、より軽量に書き出すことができます。

PhotoshopとPNG Hatの比較

当方の環境でもさっそく試してみました。

左から、Photoshop PNG8(223KB), PNG24(829KB), PNG Hat(419KB)
画像：Rubia

これは書き出した画像をそれぞれ300%に拡大したもので、PNG Hatの画像はクオリティが高く、しかも軽量というのが分かると思います。

より美しく、より軽量の秘密は、使用している3つの圧縮プロセッサです。

• PNGCRUSH
• pngquant
• OptiPNG

PhotoshopではPNG8（インデックスカラー）、PNG24（Trueカラー）、PNG24透過の3種類しかサポートしていませんが、PNGには5種類のイメージタイプがあります。

• グレースケール
• Trueカラー
• インデックスカラー
• グレースケール（透過アリ）
• Trueカラー（透過アリ）

このことは画質自体には大きな影響は与えませんが、ファイルサイズ自体に大きな影響を与えてしまいます。PNG Hatではこれらの最適なタイプを自動判別し、最も良いデルタ フィルターを適用し、最も良い圧縮を選択します。

PNG Hatを使うために難しい仕組みをマスターする必要はありません。画像の書き出しは、1クリックでOKです。

書き出しの時間も短い！

対応フォーマットはPNG8, PNG24, JPEGだけでなく、Base64にも対応しています。

文字列で画像になるBase64エンコードもPhotoshopから作成可能

画像を使用するHTML, CSS, Objective-Cなどのテンプレート用にスニペットを作成することもできます。

テンプレートの作成も可

PNG Hatの利用シーン

書き出すだけでも、さまざまなバリエーションが用意されています。

まずは、左上のクラウド。登録することで1024MBのクラウドを利用できます。

クラウドが心配な人にはもちろん、ローカルも用意されています。

対応フォーマットは、PNG8, PNG24, JPEG

余白をカットするトリミング機能

Retinaディスプレイ用の画像も同時に書き出せます

PNG Hatのインストール

Photoshop CS6 for OS Xにインストールしたので、そのやり方を簡単に。

1. ダウンロードした「pnghat-1.0.1.dmg」をダブルクリックします。
2. PNG Hatのインストーラーが起動するので、ダブルクリックします。
3. あとは、Photoshopを再起動して、完了です。

Photoshopのメニューから[ウインドウ - エクステンション]から、「PNG Hat」を起動します。

左が操作パネル、右が設定パネルです

PNG Hatの他のレビュー記事

PNG Hatのプレゼントを実施し、その当選者さま達のレビュー記事です。
インストール方法や使用感など、参考にしてください！

• PNG画像の軽量化に活躍！Photoshop拡張機能「PNG Hat」をレビュー | Design Color
• Photoshopの拡張機能PNG Hatを使ってみました。 | TryCargo blog