ページ表示の高速化を試みる……共用画像の軽量化

2009/05/04 10:30

先日【ヤフーニュース】の見た目が少々変わり、ほんの気持ちだが「表示が速くなった?」ような感じがした。気のせいかも、と思ったが色々と調べてみると【Yahoo! JAPAN Tech Blog「Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ」】で、実際にいくつかの高速表示のためのリニューアルをしていることが分かった。せっかくなので中身を調べた上で、使える技術は当サイトでも導入することにした。




●高速化技術は大きく二つ。「画像の軽量化」と「CSS Spriteの導入」
詳しくは元記事を読めば分かるが、高速化の際に使われた技術は二つ。「画像の軽量化」と「CSS Spriteの導入」。後者は【「CSS Sprite」で検索してみると色々と事例が出てくる】ので分かると思うが、簡単に説明すると「複数の画像を一枚画像に全部載せて、一度に読み込んでサーバーへのアクセスを減らす」というもの。実際に画像を表示する際には、「一枚画像」のどの部分を表示するかをスタイルシートなどで指定するだけ。

ポータルサイトのように、機能やリンクボタンの多くが画像化されているデザイナブルなサイトの場合には非常に有益な手法。しかし当サイトの場合はそれ以前の問題で、多くをテキスト化で留めているので(上部メニューボタンが良い例)、現時点では導入を見送り。

そこで今回は「画像の軽量化」に焦点をあてて導入することにした。具体的には「8bit-PNGの採用」「Optpix WebDesignerによる減色」「Smush.itの利用による余分なデータの削除」で画像を軽減化し、表示速度の高速化を試みることになる。

●共通画像の軽量化は3ステップで
・「8bit-PNGの採用」
「画像の軽量化」をすることで表示速度は速くなる。ファイルサイズが小さいほど、送信・受信時間が軽減されるからだ。昔と違い今はブロードバンド環境でのネット利用が当たり前となっているが、それでも少しでも体感速度を速めるには、「削っても問題無いところはどんどん削る」ことに越した事はない。

そこでまずは画像の「8bit-PNGの採用」を試みる。元記事にもあるように、8bit-PNGとは最大256色の画像を表示できる画像形式の一種。もちろんこれまで使ってきたGIFやJPGでも表示は可能だが、PNGの方が画像容量を減らせる場合が多い。以前はブラウザでの表示でPNGが未対応のものが多かったが、現在ではほぼすべてのブラウザでサポートしているため、ヤフーでも導入したとのこと。

「あのヤフーが導入したのなら、当サイトで導入しても問題はないだろう」ということで導入を試みようとしたのだが、本文に使う画像への導入にはストップがかかった。ご承知の通り、当サイトの本文はパソコン向けだけでなく携帯電話向けにも同時に配信される。そして残念ながらNTTドコモの携帯電話ではPNG画像を表示することができない。本文中の画像にPNGを使うと、ドコモケータイで閲覧している人は画像が見られないことになってしまう。

そこで今回は「パソコン向けサイト」の「サイト構成用画像」に限定して8bit-PNGを導入することにした。このページ(パソコン版のみ)のトップにも表示されている、当サイトの横長のタイトルバナーを例に挙げてみる。


タイトルバナーGIF表記。18227バイト
これを8bit-PNG形式(128色)で保存しなおすと次のようになる。


タイトルバナー8bit-PNG表記。15461バイト
おおよそ3Kバイト・15.1％の軽減に成功。

・「Optpix WebDesignerによる減色」
さらにこれを専用ツールで(見た目に変わりがない程度に)減色する。当サイトでも以前から使っていた【Optpix WebDesigner】を用い、64色に減色。この「64色」という選択はヤフーの元記事で突然登場した形になっているが、当方の経験則で「中規模程度の画像までなら、自然の色を元絵と遜色ない見え方で減色できる限界」でもあることが分かっている。実際、各記事の頭に表示しているカット絵のほとんどは、64色で減色を行っている。

前項目の画像をOptpix WebDesignerで64色に減色すると次のようになる。


タイトルバナー8bit-PNG表記・64色に減色。12521バイト
さらにおおよそ3Kバイト・19.0％の軽減に成功。

・「Smush.itの利用による余分なデータの削除」
これで十分に軽減できたように見えるが、さらに無駄な部分を省く。8bit-PNGの画像ファイルにはチャンクと呼ばれるメタデータも含まれているものの、すべてが表示に必要なわけではない。【Smush.it】というウェブツールを使うことで、この「表示にムダな部分」を省いた画像を生成することができる。

具体的には上記ページを開き、加工したい画像をアップロード指定。するとどれだけ「ダイエットできたか」が表示されると共に、生成されたファイルの一覧が下部にリスト化される。加工したいファイルを次々にアップロードし、最後に画面右側にある「DOWNLOAD SMUSHED IMAGES」をクリック。ZIP形式で圧縮された、加工後の画像を一括でダウンロードできる。


Smush.it使用画面。どれだけ削れたかが表示されるのがありがたい。
このSmush.itで不必要なチャンクデータをのぞくと次のようになる。


タイトルバナー8bit-PNG表記・64色に減色・不必要なチャンクデータ削除。12433バイト
さらに88バイト・0.7％の軽減に成功。今サンプルではたいした効果はなかったが、ファイルによっては10％前後の軽減効果が出る場合もあるので、あなどることはできない。


以上3ステップにより、タイトルバナーは18227バイトから12433バイトへと5794バイト・31.8％も軽減することができた。元々当サイトでは共有デザイン部分での画像使用を最小限に抑えているため、(本文内で利用している部分以外の)画像の軽減化による効果はさほど大きくないが、それでも効果はそれなりに出ているはず。

今回は旧ドメイン下のサイト(【http://www.gamenews.ne.jp/】)でも同様の処理を施した(そもそも画像は新旧サーバー共に、データセンターサーバーから取得しているのだから、手間はほとんどかからない)。いまだにサーバーリソースに制限がかかっている旧サイトの方が、あるいは恩恵を受ける度合いが大きいかもしれない。

今回の作業の結果、少しでも「読みやすくなった」と感じる人がいれば、これに勝る喜びは無い。

スポンサードリンク