WordPress で利用する画像ファイルを最適化するメモです。
前回、ImageMagick を使って、圧縮率や色数を変えて画像ファイルのバイト数を削減するという事をやっていましたが、多かれ少なかれ画像が劣化してしまうという問題点もありました。
そこで今回は Pngcrush を利用して、PNG 画像の最適化を行う事で劣化をさせることなくバイト数を削減させてみようというテストになります。
Pngcrush のインストールと簡単なテストを行ったので以下に書いていきます。
スポンサーリンク
Pngcrushのインストール
以下のような感じで Pngcrush のインストールをしました。
# wget http://jaist.dl.sourceforge.net/project/pmt/pngcrush/1.7.65/pngcrush-1.7.65.tar.gz # tar xfz pngcrush-1.7.65.tar.gz # cd pngcrush-1.7.65 # make /* pngcrush のバイナリを任意のディレクトリへコピー */ # cp pngcrush /usr/local/bin/
今回は FreeBSD 8.3 の環境でテストしていますが、Linux 系でも同じ手順でインストールできると思います。
# pngcrush -version pngcrush 1.7.65, uses libpng 1.5.17 and zlib 1.2.8 Check http://pmt.sf.net/ for the most recent version.
libpng, zlib は依存するようですのでなければ事前にインストールが必要です。
PngcrushでPNG画像の最適化
PNG 画像には表示に影響しないデータが含まれているそうで、最適化はそれらを削除したりして行うそうです。
とりあえず調べた感じだと以下のオプションが使うといいみたいです。
- -rem alla = 透過情報以外のチャンクデータを削除
- -reduce = カラーパレットの色数を削減
- -brute = PNG データの最適化 ?
使い方はこんな感じ。
# pngcrush -rem alla -brute -reduce src.png dest.png
よくわかっていない部分もありますがとりあえず試してみます。
Pngcrushの動作テスト
以下の PNG ファイルを用意してそれぞれ最適化してみたいと思います。
- sample-01.png (18KB)
- sample-02.png (159KB)
sample-01.png (最適化前)
sample-01.png (最適化後)
ファイルサイズは 18KB → 11KB となり、約 38.8% バイト数を削減できました。
画像自体の見た目にも劣化はないように思えます。
sample-02.png (最適化前)
sample-01.png (最適化後)
ファイルサイズは 159KB → 119KB となり、約 25% バイト数を削減できました。
こちらも上記と同様に劣化は見られません。
劣化せずにこれだけバイト数を削減できるのは素晴らしいです。ImageMagick は場合によっては劣化が激しかったりしていたのですがこれなら安心して使えそう。
ただ、ネックとしては最適化処理はサーバリソースの消費が大きいです。sample-01.png で3秒、sample-02.png で10秒といった感じです。
Web サイトの高速化、無駄な転送量削減のためであればこの処理時間も致し方ないとは思いますが、実装方法は少し考える必要がありそうです。
簡単ですが Pngcrush のインストールとテストは以上になります。
参考にしたページ
PNG and MNG tools – Pngcrush
Image Optimization, Part 3: Four Steps to File Size Reduction
Stefanov氏、画像サイズを縮小化する4つの手順を紹介 – 画質劣化一切なし