xserverでpngquantを使ってpngを圧縮

wordpressのプラグインやtinypng等のwebサービス以外の方法を調査

WordPressサイトの画像を圧縮する場合には以下の方法があると思います。

1. 画像アップロード前にプログラムで圧縮
2. webサービスにアップロードして圧縮
3. WordPressのプラグインで圧縮

1画像アップロード前にプログラムで圧縮

利点：選択肢豊富、ローカルに保存
欠点：cliの選択肢少ない？ローカルにインストール必要

画像圧縮ソフトは「画像　圧縮　ソフト」とググれば色々ある。
手元のPCにインストールは嫌で、良さげな設定を見つけるのに苦労しそうということで却下

2.webサービスにアップロードして圧縮

利点：インストール不要
欠点：都度アップロードは面倒、セキュリティ不安、一部有料

「TinyPNG」や「squoosh」が良さそう。
CliやAPIを使用できるものもある。
TinyPNGは月50ファイル制限があるので避ける

google作のsquooshはローカルで処理するのでアップロード不要で高機能みたいだけど、良さげな設定を見つけるのが大変そう。

色々考えたがやっぱりアップロードが面倒なので却下。

3.WordPressのプラグインで圧縮

利点：wordpress使ってるなら最も気軽
欠点：うまく動作しない？選択肢は少ない？

wordpressのプラグインとして入れればすぐ利用できて最もおすすめ。

今回は使用しているプラグインがうまく動作しない
というのが始まりなので、プラグインは使用しない。

結局色々考えてサーバ上で圧縮してしまうのが楽では？

という結論に至る

pngquantをxserverで動かす

アプリケーションでpngを圧縮するフローを考える

サーバ側のアプリケーションで圧縮するなら適当なスクリプトを作って定期実行すれば自動的に圧縮できそう。

以下のフローで実施する予定とした

1. サーバ側にアップロードした.png画像をファイル変更日で抽出
2. 圧縮して同名で上書き保存する定期バッチをcron

圧縮前の画像を適当にバックアップ(S3とかにあげる？）するようにスクリプトを書いておけばより安心かもしれない。

ファイル判定が大雑把なので一度圧縮した画像を再処理する可能性が大有りなのでその辺りの処理は考える必要がありそう。

アップロード時のファイル名と違ってもよければ設定したprefix付きのファイル名があると処理を停止するように設定することで回避はできそう。

どのアプリにするか？

• imagemagic
• pngquant

画像のリサイズや圧縮など何でもこなせそうなimagemagicなどが候補に上がるがpngの圧縮はpngquantが良いらしい。絶賛されている「TinyPNG」にも引けを取らなそうなのでこれを試す。

他にもpngcrush や optipng があるがこれは可逆圧縮で品質を落とさない形式のためデータサイズ圧縮効率は低いと判断して検討しなかった。

xserverにpngquantを入れる homebrewではまる

レンタルサーバのxserverはroot権限は使えないのでyumなどのパッケージ管理システムを使ってインストールはできない。

ユーザ権限で簡単にインストールできる方法としてhomebrewが使えそうなのでhomebrew環境を導入しようとする。

xserverにhomebrewを導入した事例がいくつかあったので入れられると思ったがところどころつまづいてめんどくさくなったので諦めました。

ポイントとしては

• curlではなくgit cloneで落とす
• git, curlのバージョンがxserverは古いのでアップデートの必要がある
• git, curlはソースからビルドしてインストール
• パスを通し、homebrewで利用できるようにHOMEBREW_FORCE_BREWED_CURL=”1″などの環境変数を設定
• brew installで curlのエラーが出る
• curl がhttpsを使えないのでopensslの新しいバージョンをインストールして再度ビルドする必要がある→諦める

そもそもpngquantにしかhomebrewは使わない予定なのでソースからインストールすることにする

pngquantのインストール

パッケージ管理ツールは使えないので自前でソースコードからビルドする

githubに置いてある最新のpngquantはrustで書き換えられており、ビルドするのにcargoが必要になっている。rust環境作るのがめんどくさそうなので旧c版をインストールする

# wget http://pngquant.org/pngquant-2.17.0-src.tar.gz
# tar xvf pngquant-2.17.0-src.tar.gz 
# cd pngquant-2.17.0
# ./configure
 →怒られる。libpng-1.6.37が必要。ただsourceforgeからインストールなので一旦ローカルに落としてからサーバにscpでpngquantのlib配下に設置してmakeする

# tar xvf libpng-1.6.37.tar
# cd libpng-1.6.37
# ./configure --enable-static
# make

# cd../
# ./configure
# make

# ls
 -> pngquantのバイナリができているはず

適当なpng画像を圧縮してみる

# ./pngquant test.png 
↓新しくファイルが作られて23KBに圧縮されている。
23K   test-fs8.png
74K   test.png

上書きしたい場合は以下のようにする
# ./pngquant --ext .png --force test.png 

pngnq というもっと効率の良いものがあるらしいが？

pngquantについて調べているとpngnqというもっと効率の良いものがあるらしい。neuquant アルゴリズムというものを使っており、一般的にpngquantよりも効率が良いらしい。

下記のサイトでは可逆圧縮のoptipngなどは品質は高く保ったものの圧縮効率は総じて低く、pngquantとpngnqを比較するとpngquantの方が同程度の圧縮効率で高い品質だったようです。設定値によっても変わると思いますがそこまで気にする必要はなさそうです。

TinyPNGとの比較

気になるのがTinyPNGとの比較です。

TinyPNGはアップロードで簡単に利用可能な優秀なツールで有料枠でも安価でお金を払って使用しても良いくらいです。

そんなtinypngとの比較を行ってみました。

元画像 74KB

これを圧縮したところ

・Tinypng： 21KB (72%圧縮)

・pngquant：23KB (69%圧縮)

圧縮効率はTinyPNGがわずかに上まっているもののほとんど同じ結果が得られています。