Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 4 分

スマホのブラウザアプリを作成している中で、画像の重さが気になったり、同じく創られている方も
CSSスプライトやdataURI化などをしてパフォーマンスに気をつけていると思います。
しかし、画像の画質調整の部分だとツールなどで簡単に出来ますが、いくつかあるのでそれの紹介と何が良いのか
何%削減できるか調べてみたいと思います。

はじめに

そもそもPhotoshopでpngを書き出すのとFireworksで書き出すので約2倍くらい違ったりするので、解像度とかあまりこだわらない場合は
Fireworksでも良いと思いますが、そうも行かない場合どうしたらいいのか。
GUIツールやコマンドからどういった事が出来るのかまとめておこうと思って書いています。

スマホのウェブアプリを作成していて、スプライトをすると画像サイズが肥大化してきてしまいますが、
1枚当たり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で圧縮しようとすると部分的に上記のようになってしまい
使い物にならなくなってしまいます。

まとめ

・PhotoshopのpngよりFireworksのpngの方が大きさが約2倍違う
・コマンドベースで管理出来るツールの方が効率的
・コマンドベースの中で、pngnqとpngquantではpngquantの方が微妙なquality managementが出来るのでこちらの方がよい。

デザイナー・単純なコーダーだとあまりコマンドラインを使わずGUIのツールに頼ってしまいがちですが、
それはツールに依存してしまってより良いものが創れない時点であまり良い事ではないなぁと最近思います。
ものを創る上で自分のスキルが足りないが故に、ユーザーに少しでも不快感を与えてしまうのはナンセンスなので、
コマンドで行えば良いものが出来る可能性があることが分かったので、もっとスキルアップしたいと調べていて学ぶ事が多かった今回でした。

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'