今回はAdobe Photoshopを使ったアプリの背景画像などのファイル容量を削減する方法についてエントリしたいと思います。
…と言うのも現在、
AppBankさんや他のクライアント様のアプリ(詳細はまだ秘密^〜^)で
デザインを手がけさせて頂いていて
その際に、iPhone4で仕様となったRetinaディスプレイ対応の画像を用意する必要が出てきました。
1MB近いファイル(png)になってしまいます。
さすがに1MB近くの画像を扱うとなるとアプリの操作性に悪影響を与えかねませんよね^^;
そこで、画像の劣化を出来るだけおさえつつファイル容量を削減する方法についての記事があれば、役立つ情報になるんぢゃないかなぁ？と思いまとめることにしました。
(※ちなみに本エントリでは、スプラッシュ画像のような全画面サイズの画像で説明しますが、ボタン画像やボタンアイコン画像などの小さなサイズの画像にも有効です。)
1. ポスタリゼーションを使う。
まず、今回用意したのはこんな画像です。
(※以下すべてクリックで拡大表示できます。)
★オリジナル画像(png24／967KB)
この画像を使って説明していきますね。
特にこのようにグラデーションを使った画像は容量が大きくなりがちですが、これから説明するテクニックを使えばかなり削減出来ます。
まず、画像に『ポスタリゼーション』をかけるのですが、グラデーションを含む統合した画像にかけてしまうとかなりの劣化になる可能性が高いです。
その対策として今回はレイヤー別にポスタリゼーションをかけることにしました。
では、実際に画像をいじる前にこの画像のレイヤー構造を見てみてください。
まず、図のようにグラデーションを除いた背景のベースとなるレイヤーを統合しておきます。
で、緑の楕円で囲まれているレイヤーがポスタリゼーションをかける対象になります。(テキストレイヤーはラスタライズします)
ポスタライズについて簡単にすると『使用する色数を減らす機能』です。
当然色数を減らすことでファイル容量も減るので、ガンガン減らしたいところなのですが逆に色数を絞りすぎると画質は荒くなるので注意が必要です。
ポスタリゼーションを実行するには、[イメージ]→[色調補整]→[ポスタリゼーション...]を選択して階調数を設定します。
設定する目安は40くらいが良いようです。40を基本として画質をプレビューしながら調整していきます。
ちなみに今回は先に説明した緑の楕円で囲まれたレイヤーのうち、
[smokeレイヤー]に80、その他のレイヤーにはすべて40でかけました。
ポスタリゼーション実行後の画像がこちら。
画質の劣化はほとんど分からないのではないでしょうか？
この画像では約60KB減った909KB程度なので、そこまで効果は高くありませんでしたが^^; 画像によってはもっと減ることも多いです。
特にグラデーションがあまり無い場合などは、全レイヤーを統合後にポスタリゼーションをかけると劇的にファイル容量を減らせることがありますので、色々試してみてくださいね。
ただ、これだけではまだまだなので、次の方法も使います。
本当はあまり教えたくないのですが……(^〜^;)
2. png画像を劣化せずに圧縮してくれるWebサービス
このサービスを利用すると今回の場合では、さらに250KB程度減らされたファイルになりました。
まずは、その結果を見てみてください。
★png24／643KB
どうでしょう？
200KB以上削減されているにも関わらず、ほぼ劣化していません!!
驚きですね^^
では、その素晴らしいサイトを紹介しましょう！
このサイトでは、視覚的な損失なく画像を最適化する技術を使って
自動的に容量を減少させた画像ファイルを生成してくれます。
ちょっと前までは一旦別のアップローダなどに画像をアップする必要があったのですが、最近アップローダも内蔵されてさらに使いやすくなりました！
こんな素晴らしいサービスをしかも無料で提供してくださっている開発元とYAHOO!には感謝感謝です<(_ _)>
使い方はこんな感じ。
まず、左の画像のように[UPLOADER]タブを選択してボタンをクリックします。
そしてMac上にあるファイルをアップロードすると画像ファイルが読みこまれ自動的にSmush(最適化)されます。
右の画像のように複数同時Smushも出来ますが、僕が試したところpng8で保存されたファイルは最適化に対応していないようですのでpng24のファイルをアップロードしましょう。
Smushが完了したら、[Download Smushed Images]ボタンをクリックすることで最適化された画像ファイルがダウンロードできます。
超カンタンですねっ！
3. png8で保存する。
ここまでで300KB以上減らすことができましたが、扱う画像によって結果は異なると思います。
なので、ここまでで200KB台(全画面サイズの場合)まで減っていたらコレから以下の方法はやらなくても良いかと思います。
で、今回は最終手段として先程Smushした画像(png24)をpng8に変換して、さらに容量を減らすことにします。
[shift]+⌘+[option]+S(もしくは[ファイル]→[Web用に保存]を選択)して以下の画像のように設定します。
ちなみに[カラー]や[ディザ]の設定については、プレビューを見ながら変更してください。
劣化が気にならない程度に[カラー]を減らすとより効果が高いと思います。
(※透過部分がある画像の場合はpng8への変換はおすすめできません。透過部分と画像の境目が汚くなります。)
そして、png8にした画像がこちら。
★png8／299KB
※レベル補整済み
どうでしょうか？なんとか200KB台になりました！
(ギリギリですが…^^;)
これなら、アプリの処理動作にはさほど影響を与えずに扱える容量になったのではないかと。
始めのオリジナル画像と見比べてみると、多少劣化している部分もありますが
実際にiPhone4で表示した場合はディスプレイで見るよりも小さいサイズで表示されるので、気にならないんじゃないかと思います。
ただ、どこまでならキレイにみえるか？というのは
実際に実機で見て判断するのがベストかと思います。
以上、『アプリに使用する画像容量を減らす方法 for Retina Display』でした！
もし、『もっといい方法があるよ！』って方がいらっしゃいましたら
コメント頂けるとウレシイです！
(もちろんtwitterでもOKです)
それではまた！
ピンバック: [朝刊] iPhone 女子が続々結集していますね。
ピンバック: 「101のヒント」&「もとまか」デザイン開発秘話