pngquant について

PNG 画像の最適化ツールと言えば、ウェブブラウザに画像ファイルをドロップするだけで簡単に軽量化が出来てしまう TinyPNG が一般的に良く使われていると思います。

以下の本家サイトを見れば分かるように、pngquant は、TinyPNG を含め、ImageAlphaPngyu など 様々な軽量化ツールの内部エンジンとして使われているコマンドラインベースの PNG 画像最適化ツールとして有名です。

TinyPNG vs pngquant

普通のブロガーならブラウザ上でシンプルかつ、手早く使える TinyPNG でもいいと思いますが、デメリットとして、TinyPNG は、一回にドロップできるファイルの数が 20個までで、各ファイルサイズは、上限 5MB を超えることはできません。

また、Developer API も提供していますが、こちらも毎月 500個までは無料で使えますが、それ以上は、お金を払わないと行けません。

WordPress 用のプラグインも提供していますが、プラグインの内部でも結局 API を使っているため、上限は、変わりません。

TinyPNG Developer API

半面、pngquant は、TinyPNG の内部エンジンとして使われているので、一回導入してしまえば、ファイル数・容量など気にすることなく無制限で自分が使いたいときにいつでも使えるようになります。

また、pngquant は、コマンドラインベースであるため、コマンドに慣れてない方なら最初は少し使いづらいかもしれませんが、オプションがシンプルなので、直ぐなれると思います。

作業の流れ

作業の流れは、以下の通りです。

  • libpng ソースファイルダウンロード、及びインストール
  • pngquant ソースファイルダウンロード、及びインストール
  • PNG 画像ファイルを最適化してみる

Step 1. libpng ソースファイルダウンロード、及びインストール

pngquant をインストールする前に、まず、事前準備として、libpng 1.6 以上をインストールする必要があります。

以下を実行し、libpng をダウンロードし、コンパイル後、インストールします。

libpng インストールRaw Code(S)Raw Code(T)
# wget http://sourceforge.net/projects/libpng/files/libpng16/1.6.17/libpng-1.6.17.tar.gz/download

# tar xvzf libpng-1.6.17.tar.gz

# cd libpng-1.6.17

# ./configure
# make
# make install

libpng のバージョンについて

libpng のバージョンが 1.6 より小さいと pngquant 実行時に以下の警告メッセージが表示されます。

WARNING: Your version of libpng is outdated and may produce corrupted files.

Please recompile pngquant with the current version of libpng (1.6 or later).

libpng は、1.6 以上を使ってくれと。 そして pngquant を再コンパイルしないといけなくなるので、最初から libpng 1.6 以上を入れておく必要があります。

libpng 最新バージョン確認

libpng 最新版をダウンロードする場合には、こちらの URL を確認してください。

PNG reference library: libpng

Step 2. pngquant ソースファイルダウンロード、及びインストール

次に、pngquant ソースファイルをダウンロードし、コンパイル後、インストールを実施します。

README.md は、ドキュメントファイルなので、軽く一読してください。

./configure を実行したときに表示される情報を確認し、libpng: shared (1.6.17) のように libpng のバージョンが 1.6 以上であることと libpng: error … not found のようなエラーメッセージが出てないことを確認します。

pngquant インストールRaw Code(S)Raw Code(T)
# wget --no-check-certificate https://pngquant.org/pngquant-2.4.0-src.tar.bz2

# ls -l
合計 244
-rw-r--r-- 1 root root  54081  4月 14 05:12 2015 pngquant-2.4.0-src.tar.bz2

# tar xvf pngquant-2.4.0-src.tar.bz2

# ls -l
合計 248
drwxr-xr-x 3  502 games   4096  4月 12 07:19 2015 pngquant-2.4.0
-rw-r--r-- 1 root root   54081  4月 14 05:12 2015 pngquant-2.4.0-src.tar.bz2

# cd pngquant-2.4.0

# ls -l
合計 104
-rw-r--r-- 1 502 games  4454  4月 12 07:19 2015 CHANGELOG
-rw-r--r-- 1 502 games  2779  4月 12 07:19 2015 COPYRIGHT
-rw-r--r-- 1 502 games  1693  4月 12 07:19 2015 INSTALL
-rw-r--r-- 1 502 games  1633  4月 12 07:19 2015 Makefile
-rw-r--r-- 1 502 games  3561  4月 12 07:19 2015 README.md
-rwxr-xr-x 1 502 games 11285  4月 12 07:19 2015 configure
drwxr-xr-x 2 502 games  4096  5月 23 14:29 2015 lib
-rw-r--r-- 1 502 games  3608  4月 12 07:19 2015 pngquant.1
-rw-r--r-- 1 502 games 29777  4月 12 07:19 2015 pngquant.c
-rw-r--r-- 1 502 games 20459  4月 12 07:19 2015 rwpng.c
-rw-r--r-- 1 502 games  3917  4月 12 07:19 2015 rwpng.h
-rw-r--r-- 1 502 games  2169  4月 12 07:19 2015 rwpng_cocoa.m

# ./configure
  Compiler: gcc
     Debug: no
       SSE: yes
    OpenMP: no
    libpng: shared (1.6.17)
      zlib: shared (1.2.3)
     lcms2: no

# make
# make install

pngquant 最新バージョン確認

pngquant 最新版をダウンロードする場合には、こちらの URL を確認してください。

pngquant: Releases

--no-check-certificate について

wget する際にこのオプションを指定しないと以下のような証明書関連エラーでファイルダウンロードに失敗します。

エラー: 証明書に記載されている名前 `imageoptim.com’ とホスト名 `pngquant.org’ が一致しません。

pngquant.org に安全の確認をしないで接続するには、`–no-check-certificate’ を使ってください。

Step 3. PNG 画像ファイルを最適化してみる

まず、どんなオプションが使えるか確認します。

意外とシンプルなオプション構成になっています。

オプション 機能
--force 最適化したファイルを元のファイルに上書きする
--skip-if-larger 最適化したファイルの容量が元のファイルより小さい場合のみ保存する
--output 最適化したファイルの出力先ディレクトリ
--ext 最適化したファイル名 ( [ex] –ext “-new.png” )
--quality 0~100 まで画質を指定して最適化する
--speed 1~11 まで最適化スピードと画質を指定する (遅いほど高画質)
--nofs 標準で採用している Floyd-Steinberg 方式のディザ処理を無効化する
--posterize 低画質用として出力する
--verbose 最適化中に詳細内容を表示する
オプション確認Raw Code(S)Raw Code(T)
# pngquant --help
pngquant, 2.4.0 (March 2015), by Greg Roelofs, Kornel Lesinski.
   Compiled with SSE instructions.
   Using libpng 1.6.17.

usage:  pngquant [options] [ncolors] -- pngfile [pngfile ...]
        pngquant [options] [ncolors] - >stdout <stdin

options:
  --force           overwrite existing output files (synonym: -f)
  --skip-if-larger  only save converted files if they're smaller than original
  --output file     output path, only if one input file is specified (synonym: -o)
  --ext new.png     set custom suffix/extension for output filenames
  --quality min-max don't save below min, use fewer colors below max (0-100)
  --speed N         speed/quality trade-off. 1=slow, 3=default, 11=fast & rough
  --nofs            disable Floyd-Steinberg dithering
  --posterize N     output lower resolution color (e.g. for ARGB4444 output)
  --verbose         print status messages (synonym: -v)

Quantizes one or more 32-bit RGBA PNGs to 8-bit (or smaller) RGBA-palette
PNGs using Floyd-Steinberg diffusion dithering (unless disabled).
The output filename is the same as the input name except that
it ends in "-fs8.png", "-or8.png" or your custom extension (unless the
input is stdin, in which case the quantized image will go to stdout).
The default behavior if the output file exists is to skip the conversion;
use --force to overwrite. See man page for full list of options.

次に、どれくらい圧縮効率が良いか確認するために、MAC の壁紙画像の一部をキャプチャした 250x250px、103KB のファイルを使って、最適化を実施してみます。

以下の例では、結果物のファイル名が、元のファイル名-pngquant.png になるようにし、画質は、一番良い 1を指定しています。

pngquant <オプション> <png 画像ファイル名>Raw Code(S)Raw Code(T)
# ls -lh
合計 104K
-rw-r--r-- 1 root root 103K  5月 23 16:07 2015 test.png

# pngquant --ext "-pngquant.png" --speed 1 test.png

# ls -lh
合計 328K
-rw-r--r-- 1 root root  28K  5月 23 16:18 2015 test-pngquant.png
-rw-r--r-- 1 root root 103K  5月 23 16:07 2015 test.png

最適化スピードと画質について

圧縮率は、上記の help でも確認できますが、--speed オプションに 1 ~ 11 まで指定できます。 11が早い、かつ 雑な画質になるので、少し遅くても高画質を維持したいなら 1を指定します。

複数ファイルの最適化について

複数ファイルを最適化したいときには、以下のように対象ファイルとして *.png を指定します。

# pngquant --ext “-pngquant.png” --speed 1 *.png

終わりに

この前に書いた記事 OptiPNG を使って PNG 画像を最適化する に比べると pngquant のほうがオプションもシンプルでとても使いやすいことが分かります。

以下は、pngquant を使って最適化した圧縮前・後の png 画像です。

pngquant 圧縮前後比較

少し使ってみた感想としては、

  • pngquant は、減色しながら高画質で最適化するので、最適化前・後の画像を見てもそんなに気にならない程度で WEB 公開用としては十分
  • 上記のテスト画像を pngquant で最適化した場合、103KB が 28KB まで軽量化(圧縮率 73%)
  • 上記のテスト画像を TinyPNG で最適化した場合、103KB が 25KB まで軽量化(圧縮率 76%)
  • TinyPNG と pngquant を比較した結果、圧縮率は TinyPNG が少し良かったが、画質的にはあまり違いが分からなかった
  • pngquant で最適化する際に画質を調整することによって TinyPNG より良い圧縮率が期待できそう
  • 画像ファイル数が多くなるほど作業効率面では、TinyPNG より pngquant のほうが良い

TinyPNG だけじゃ物足りない。 もっと効率よく自由に好き勝手に PNG 画像を軽量化したい。 といった方には、pngquant をオススメします。

以上、シンプルで強力な PNG オプティマイザ pngquant 導入方法でした。