強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Yahoo!JAPANが行った高速化はiPhone向けにも有効そう

Yahoo!JAPANが行った高速化の手法が公開されてたのでiPhoneでも使えそうなのPNGファイルの最適化を試してみました。

Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ (Yahoo! JAPAN Tech Blog)
http://techblog.yahoo.co.jp/cat207/cat214/yahoo_3/

smush.itで最適化してみる

smush.it はその名の通り以下のURLで変換可能なのですが
http://smush.it/
たまにYahoo!の以下のURLへリダイレクトされることがありました(サーバの負荷の状態で変わるのかな?)。
http://developer.yahoo.com/yslow/smushit/
smush.it ではファイルアップロードでの変換にも対応していたのですがYahoo!のサイトではWeb上に有るファイルだけしか変換できない様です。
※ファイルをWeb上に置けない場合は後ほど解説する別の方法で変換して下さい。

テストとしては以下のファイルを比較しました。

  • 元ファイル
  • smush.it で変換したファイル
  • 元ファイルをXcodeでビルドしたもの
  • smush.it で変換したファイルをXcodeのビルドしたもの

※「Xcodeでのビルド」はプロジェクトのResourceフォルダに該当ファイルを格納し、ビルドを行い生成された .app に格納されているファイルを確認しました。

テスト1

image1(写真タイプの画像)
http://tsuyobi.heteml.jp/test_image/image1.png

ファイル サイズ
元ファイル 128,894byte
元ファイル→smush.it 109,282byte
元ファイル→Xcodeでのビルド後 136,873byte
元ファイル→smush.it→Xcodeでのビルド後 133,186byte

テスト2

image2(手書き文字の画像)
http://tsuyobi.heteml.jp/test_image/image2.png

ファイル サイズ
元ファイル 14,037byte
元ファイル→smush.it 5,599byte
元ファイル→Xcodeでのビルド後 12,663byte
元ファイル→smush.it→Xcodeでのビルド後 8,976byte

Xcodeでのビルド後はサイズが増加するみたいですがそれでも smush.it を使用した方がサイズが小さくなっています。

pngcrushで最適化してみる

画像の最適化を解説しているこちらのサイトを参考に

Image Optimization, Part 3: Four Steps to File Size Reduction » Yahoo! User Interface Blog
http://yuiblog.com/blog/2008/11/14/imageopt-3/

pngcrushを以下のオプションで実行したところ smush.it で変換したものと同一のサイズ109,282byteになりました。
自分の手元で一気に変換したいときやWeb上にアップするのは不味い場合はこちらの方法で変換すると良いでしょう。

/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/pngcrush -rem alla -reduce -brute image1.png image1_chg.png

まとめ

smush.it や pngcrush でのPNGファイルの最適化はiPhone向けでも有用そう。iPhoneアプリ向け以外でもiPhoneSafari向けのサイト内の画像ファイルにこの様な最適化を行っておくのも良いでしょう。