ウェブ高速化のための画像軽量化処理入門

IT

日経 BP 社「PC Online」の「『Yahoo!ニュース』の表示速度が3〜5倍に、そのからくりは……」という記事が人気を博しているようなので、その人気にあやかって、私が普段実行している画像軽量化の実際の手順をご紹介します。

きっと私のやり方よりスマートな方法がたくさんあると思いますので、ご存じの方はコメントやトラックバックでぜひ教えてください。また、このエントリーで出てくるソフトウェアは基本的に Windows 用で、すべて無料で使えます。

叩き台とするページ

叩き台をテキトーに作ってみました。

test1.html 表示結果

画像は Paint.NET で作成しました。専業デザイナーでない一介のプログラマーの私にとって、無料で使いやすいペイントツールです。一応 Photoshop Elements も持っていますが、Paint.NET のほうが手に馴染んでいます。

Paint.NET で画像編集中

この段階で、7 枚の画像ファイルを使用しています。それぞれのファイルサイズは以下のとおりです。



  title.gif    2,662

  about.gif    1,455

  about_h.gif  1,455

  works.gif    1,393

  works_h.gif  1,393

  links.gif    1,211

  links_h.gif  1,211

 --------------------

           計 10,780

「CSS Sprite」を利用した画像の一元化

「自己紹介」「作品集」「リンク」のタブに使っている画像ファイルを 1 枚にまとめて、HTTP リクエストの回数を減らしましょう。

タブを 1 枚にまとめる

これで画像が 2 枚になりました。



  title.gif    2,662

  tabs.gif     3,793

 --------------------

           計  6,415

スタイルシートも適宜書き換えたものが test2.html です。タブにマウスを重ねても通信が発生しないのが分かりますか。

GIF を PNG に変換

さて、Paint.NET を誉めた舌の根も乾かぬうちになんですが、Paint.NET は小さなサイズの画像を作るのには向いていません。そこで、画像サイズの節約のために、PictBear Second Edition (以下「PictBear」)を使います。

まず、Paint.NET で作成した GIF ファイルを PictBear で開きます。

PictBear で GIF ファイルを開く

次に、「イメージ(I)」→「イメージタイプ(M)」→「フルカラー(F)」でいったんフルカラー化した後、「イメージ(I)」→「イメージタイプ(M)」→「インデックスカラー(I)...」を実行します。パレットの扱いについては PictBear 任せでいいでしょう。

インデックスカラー化

続いて、「イメージ(I)」→「パレット(P)」→「透過色の設定(T)...」で、背景を透過させます。

透過色の設定

最後に、「ファイル(F)」→「名前を付けて保存(A)...」で、ファイルの種類を「PNG ファイル(.png)」にして保存します。

同様の作業を tabs.gif についても行い、スタイルシートも書き換えたのが test3.html です。



  title.png    1,730

  tabs.png     2,571

 --------------------

           計  4,301

PNG ファイルのチャンク削除

PNG ファイルのチャンクを削除するために、私は PngUtils というユーティリティーをインストールしています。PngUtils は PNG ファイルの加工ツールの集合体で、その中の PngCrush というコマンドラインツールでチャンクを削除します。

PngCrush についての細かい説明は割愛します。title.png のあるディレクトリに移動し、次のコマンドを実行してください。



"C:\Program Files\GnuWin32\bin\pngcrush" -rem gAMA -rem cHRM -rem iCCP -rem sRGB title.png newtitle.png

これで、チャンクが除去された newtitle.png というファイルが作成されます。tabs.png についても同様に作業してください。

PngCrush でチャンク削除

newtitle.png と newtabs.png を読み込むようにしたのが test4.html です。最終的に、画像ファイルの大きさは以下のようになりました。



  newtitle.png 1,715

  newtabs.png  1,985

 --------------------

           計  3,700

もちろん、サイズ削減の効果は画像の種類や枚数によって変わりますが、今回の例では 10,780 バイトから 3,700 バイトへと約 3 分の 1 にまで小さくなりました。面倒な作業ですが、手を掛ける価値はきっとあります。

おわりに

恐らく PictBear を使わずとも、Paint.NET で作成した PNG を PngUtils で小さくできそうな気もしますが、勉強不足でそこまで行っていません。もっと効率のいい方法をご存じの方は、ぜひご教示ください。

なお、このエントリーに載せてあるスクリーンショットはすべて PNG ですが、ここでご紹介した軽量化は行っていません。興味のある方は、ぜひやってみてください。

今回の素材一式を ZIP にまとめましたので、よろしければお持ち帰りください。