小粋空間  -  a cheap joke and a play on words site

PNG画像を最適化するツール「OptiPNG」

PNG画像を最適化するツール「OptiPNG」について紹介します。

OptiPNG

１．OptiPNGとは

OptiPNGとはタイトルに記したとおり、PNG画像を最適化するためのツールで、内部情報を失わずに画像ファイルをより小さなサイズに再圧縮してくれます。

Googleの「PageSpeed Insights」に「Optimize Images」という章がありますが、OptiPNGはその中でも推奨されています。

Optimize Images

その他、BMP/GIF/PNMおよびTIFFといった形式についても最適化されたPNGに変換する機能を有します。

MacやWindowsで利用することもできますが、Linuxにインストールしてコマンドラインから実行すれば、サーバ上の画像を一気に最適化できるというメリットがあります。

ここではさくらのVPS（CentOS）にインストールする手順で紹介します。

WindowsについてはOptiPNGのページからバイナリをダウンロードできます。

optipngのコマンドオプションについてはLinux/Windows/Mac共通ですが、オプションについては多岐にわたるため別エントリーしたいと思います。

２．インストール

OptiPNGをインストールするには、TeraTermなどのターミナルを開いて以下のコマンドを実行するだけです。

$ sudo yum install optipng

イントール時のログを掲載しておきます。途中で「y」を入力する箇所があります。

[hoge@wwwxxxxxx ~]$ sudo yum install optipng
[sudo] password for hoge:
Loaded plugins: fastestmirror, priorities, security
Determining fastest mirrors
epel/metalink                                                      | 6.2 kB     00:00
 * base: www.ftp.ne.jp
 * epel: ftp.kddilabs.jp
 * extras: www.ftp.ne.jp
 * updates: www.ftp.ne.jp
base                                                               | 3.7 kB     00:00
base/primary_db                                                    | 4.4 MB     00:00
epel                                                               | 4.2 kB     00:00
epel/primary_db                                                    | 5.6 MB     00:00
extras                                                             | 3.4 kB     00:00
extras/primary_db                                                  |  18 kB     00:00
updates                                                            | 3.4 kB     00:00
updates/primary_db                                                 | 5.1 MB     00:00
79 packages excluded due to repository priority protections
Setting up Install Process
Resolving Dependencies
--> Running transaction check
---> Package optipng.x86_64 0:0.6.4-1.el6 will be installed
--> Finished Dependency Resolution
 
Dependencies Resolved
 
==========================================================================================
 Package             Arch               Version                    Repository        Size
==========================================================================================
Installing:
 optipng             x86_64             0.6.4-1.el6                epel              82 k
 
Transaction Summary
==========================================================================================
Install       1 Package(s)
 
Total download size: 82 k
Installed size: 181 k
Is this ok [y/N]: y ←「y」を入力
Downloading Packages:
optipng-0.6.4-1.el6.x86_64.rpm                                     |  82 kB     00:00
Running rpm_check_debug
Running Transaction Test
Transaction Test Succeeded
Running Transaction
  Installing : optipng-0.6.4-1.el6.x86_64                                             1/1
  Verifying  : optipng-0.6.4-1.el6.x86_64                                             1/1
 
Installed:
  optipng.x86_64 0:0.6.4-1.el6
 
Complete!

このツールはlibpngとzlibを利用します。

３．optipngのバージョン確認

optipngに「-version」をつけて起動してみます。

% optipng -version

以下出力メッセージです。

OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright (C) 2001-2010 Cosmin Truta.
 
This program is open-source software. See LICENSE for more details.
 
Portions of this software are based in part on the work of:
  Jean-loup Gailly and Mark Adler (zlib)
  Glenn Randers-Pehrson and the PNG Development Group (libpng)
  Miyasaka Masaru (BMP support)
  David Koblas (GIF support)
 
Using libpng version 1.2.49 and zlib version 1.2.3

エントリー投稿時点では0.6.4がインストールされていることが分かります。

また、optipngが利用するlibpngとzlibのバージョンも表示されます。

４．PNGファイルの最適化

サーバ上にある「test.png」というファイルを最適化してみます。このファイルのサイズは約134KBです。

[hoge@wwwxxxxxx tmp]$ ls -l
total 132
-rw-r--r-- 1 hoge hoge 134411 Oct 23 01:00 test.png
[hoge@wwwxxxxxx tmp]$

最適化は次のようにファイル名を指定するだけです。最適化された内容は同じファイルに上書きします。

% optipng test.png

以下、実行時のログです。

[hoge@wwwxxxxxx tmp]$ optipng test.png
OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright (C) 2001-2010 Cosmin Truta.
 
** Processing: test.png
470x271 pixels, 3x8 bits/pixel, RGB
Input IDAT size = 134232 bytes
Input file size = 134411 bytes
 
Trying:
  zc = 9  zm = 8  zs = 0  f = 0         IDAT size = 133510
  zc = 9  zm = 8  zs = 0  f = 5         IDAT size = 115521
  zc = 9  zm = 8  zs = 1  f = 5         IDAT size = 111629
  zc = 9  zm = 8  zs = 3  f = 5         IDAT size = 111532
 
Selecting parameters:
  zc = 9  zm = 8  zs = 3  f = 5         IDAT size = 111532
 
Output IDAT size = 111532 bytes (22700 bytes decrease)
Output file size = 111663 bytes (22748 bytes = 16.92% decrease)

ログをみると、サイズが一番小さくなる最適なパラメータを見つけ出して実行していることが分かります。

lsコマンドで表示するとファイルサイズが112KBに圧縮されています。

[hoge@wwwxxxxxx tmp]$ ls -l
total 112
-rw-rw-r-- 1 hoge hoge 111663 Oct 30 23:08 test.png

オプションなしで実行しても普通に最適化してくれていることが分かります。

５．PNGファイルをまとめて最適化する

カレントディレクトリ配下にあるPNGファイルをまとめて最適化するには、次のコマンドを実行するといいでしょう。

$ find . -name "*.png" -print | xargs optipng

findコマンドは指定したディレクトリ（ここではカレントディレクトリなので「.」）に対し、-nameで指定したファイルを全検索し、-printで標準出力します。

その出力をxargsコマンドでoptipngの引数とすることで、一括最適化が行えます。

次のような形式で指定してもいいのですが、コマンド実行時の引数の総バイト数には上限があり、エラーになる可能性があります。

% optipng `find . -name "*.png" -print`

６．参考サイト

参考サイトは以下です。ありがとうございました。

• optipngでPNG画像を最適化する方法
• optipngでpngの最適化、ファイルサイズ縮小
• いまさらxargsの便利さを主張してみる