読了: 約 4 分
スマホのブラウザアプリを作成している中で、画像の重さが気になったり、同じく創られている方も
CSSスプライトやdataURI化などをしてパフォーマンスに気をつけていると思います。
しかし、画像の画質調整の部分だとツールなどで簡単に出来ますが、いくつかあるのでそれの紹介と何が良いのか
何%削減できるか調べてみたいと思います。
はじめに
そもそもPhotoshopでpngを書き出すのとFireworksで書き出すので約2倍くらい違ったりするので、解像度とかあまりこだわらない場合は
Fireworksでも良いと思いますが、そうも行かない場合どうしたらいいのか。
GUIツールやコマンドからどういった事が出来るのかまとめておこうと思って書いています。
スマホのウェブアプリを作成していて、スプライトをすると画像サイズが肥大化してきてしまいますが、
１枚当たり150KB以下を一つの基準として、最適化をしていきます。
おすすめツール
今回はpngの圧縮をメインとしたツールをご紹介します。
GUIとコマンドラインから実行する2つに大きく別れます。
・tinypng
・imageoptim
・punypng
・PNGQuant
・pngnq
試してみた結果
tinypng
今回は一部の画像を切り出して比較してしまっているので参考程度ですが、
結構全体的にがさついてしまうので、微妙かもしれません。
ただ、圧縮率はFreeのツールの中では一番高かったので、時と場合によって使い分けると良いと思います。
| コマンド実行前 |  |
287kb |
|---|---|---|
| コマンド実行後 |  |
104kb |
punypng
150kb制限があるので、違う画像かつjpgのもので試してみました。
cssスプライトとかすると画像が大きくなるので、大きいものは課金をしないとだめですが
freeの150kbのものでも53%とか減るのでGUIツールの中では結構使えるかもしれないですね。
| 実行前 |  |
55kb |
|---|---|---|
| 実行後 |  |
26kb |
pngnq
コマンドラインでの作業になるのですが、optionも多くて256色から色数を変化させたり、
defaultの設定を出来たり結構よいです。
GUIじゃないのでとっつきにくい印象がありますが、非常に便利ですね。
他のアプリケーションだと勝手に圧縮されたものしか出てこないので、
自分でクオリティ管理しつつ画像を最適化することが出来るのでなかなかです。
| コマンド実行前 | |
|---|---|
| コマンド実行後 |  |
上の比較のようにクオリティを管理する下記のオプションで最高の1にしても
グラデーションの色数が減ってしまって綺麗ではないので細かい場合厳しいです。
-s sample factor
オプションでディザリングするとぼつぼつの点々になってしまうので微妙かもしれません。
//-Q dither find ./app/assets/images/ -type f -name '*.png' -print0 | xargs -0 -P4 pngnq -e '.png' -f -Q f -s 1
コマンドの理解が間違っているかもしれませんが、
とりあえずメモ
find ./app/assets/images/ -type f -name '*.png' -print0 //findでimagesディレクトリ以下の.pngとつくファイルを見つけて改行を取る。 | xargs -0 -P4 // |は左で打ったコマンドの結果を右に反映する xargsはその結果に対して、区切ってその後のコマンドを全てに反映 pngnq -e '.png' -f -Q f -s 2 // pngnqのコマンド eはextention .pngのあるファイルのティザリングするかしないか調整. s 2ランクのクオリティで書き出す。 元の状態に戻したいときは git reset --hard HEAD でもとに戻す git status //もとに戻ったかの確認
PNGQuant
pngquantの実行コマンド
find ./app/assets/images/ -type f -name '*.png' -print0 | xargs -0 -P4 -n 1 pngquant --force --ext .png //--ext fs8というファイル名をつかないように
ファイル名以外の指定がない時でもiconのグラデーションがざらつきます。
| コマンド実行前 | |
|---|---|
| コマンド実行後 |  |
–qulity=80-100を加えた場合
find ./app/assets/images/ -type f -name '*.png' -print0 | xargs -0 -P4 -n 1 pngquant --force --quality=80-100 --ext .png --quality=80-100
| コマンド実行前 | |
287kb |
|---|---|---|
| コマンド実行後 |  |
109kb |
英語の記事とかではpngquantとpngnqではoption等が多く、アルゴリズム的にもpngnqの方が優れている
という感じなのですが、実際試してみてグラデーションのかかっているサイズが290kbくらいものを
最大限のクオリティに設定してpngnqで圧縮しようとすると部分的に上記のようになってしまい
使い物にならなくなってしまいます。
まとめ
・コマンドベースで管理出来るツールの方が効率的
・コマンドベースの中で、pngnqとpngquantではpngquantの方が微妙なquality managementが出来るのでこちらの方がよい。
デザイナー・単純なコーダーだとあまりコマンドラインを使わずGUIのツールに頼ってしまいがちですが、
それはツールに依存してしまってより良いものが創れない時点であまり良い事ではないなぁと最近思います。
ものを創る上で自分のスキルが足りないが故に、ユーザーに少しでも不快感を与えてしまうのはナンセンスなので、
コマンドで行えば良いものが出来る可能性があることが分かったので、もっとスキルアップしたいと調べていて学ぶ事が多かった今回でした。