■重い画像を見せるためのテクニック

意味もなく重いだけの画像は最悪です。そういう圧縮の工夫、待たせる工夫のなされていない画像が表示されれば、きっとその場で他のサイトへ行ってしまうでしょう。この節では効率的な画像圧縮と、待ってもらうための工夫の2点から考えてみたいと思います。


■GIFとJPEGについて

一般に写真関係はJPEGで圧縮しますが、その独特の色のニジミが気になる場合、シャープなイメージが欲しい場合、バックとシームレスな画像を作りたい場合など、あえてGIFにすることも考えましょう。工夫次第ではJPEGに匹敵する高圧縮(正確にはGIFでは減色であり圧縮ではありません)が期待できますので、両方を試して比較してみてください。

●GIF vs JPEG (写真編)
●インターレスGIF vs ProgressiveJPEG
●GIF vs JPEG (ロゴ編)
●透過GIF
●GIFアニメーション


■GIFで作るスイッチアイコンの減色

かっちりとしたスイッチアイコンなどを作る場合は、ディザ・アンチエイリアシング共に無しで処理をしてみましょう。このとき多少ガタガタに見えますがデータ量はディザ・アンチエイリアシング有効のときよりはるかに小さくできます。これは中間色を補完しないためで、カラーパレット数が極端に減る(最小1bit)ためです。ただし滑らかな階調は望めないので写真には向きません。また、スイッチの場合は、減色処理後ピクセル単位での修正をしてやればより美しく仕上がります。この手法のもう一つのメリットは、奇麗な切り抜きが可能という点で、透過GIFのスイッチを創る場合にも最適です。

●1bit GIF(ロゴ編)
●応用した使用例(カラーのスイッチ編)

3D CYBER SPACE このページに使用されている「WHAT' NEW」他、左のようなスイッチは、一見エンボスの複雑な配色のスイッチに見えますが、全て5色を使用して出来ています。(あと一色我慢すれば4色に収まったのですが)これらの作り方はいたって簡単ですが、根気が必要です(笑)。いろいろな方法がありますので紹介しておきます。

【作成方法】
ペイント系ソフトなどで通常に作成したものをGraphicConverterなどを使って4色など極端に減色し、乱れた部分を1ビットごと修正をします。この時、色は目安に過ぎませんので何でもかまいません。GraphicConverterのエディットカラーパレットで、各タイルのカラーを指定します。以上で出来上がりです。

【グラフィックソフトを使用して】
Adobe IllustratorでデザインしたものをAdobe Photoshopでラスタライズするときはアンチエイリアシング無しにしてください。文字を入力したり、各ツールを使用する場合も、全てアンチエイリアシング無しで作業してください。減色後残ったパレットだけを使って乱れた部分を1ビットごと修正をします。ウインドウを2つ出しておいて、一つは原寸で、一つはピクセルが見えるように拡大すれば便利です。


■待ってもらうための工夫

■文字を読んで待ってもらう。
<IMG SRC="todokanai.gif" WIDTH="256" HEIGHT="32">
基本的に重い画像はサイズ指定をすることをお勧めします。ブラウザは画像サイズを読んでから全体のレイアウトを開始しますが、サイズ指定をコチラでしてやることによりその手間を省いてやることが出来ます。また画像が何らか(または意図的)の事情で届かなくともレイアウトが乱れることがないというメリットもあります。

(詳しくは前述の「イメージサイズの指定をする」に記載)

■文章を画像より上に配置する。
かなり重いと自覚する画像を何とか見てもらいたいときの苦肉の策が、文章を画像より上に配置する事です。面積的にも大きい画像などはブラウザを下へスクロールをしなければ、たとえ文字のレイアウトが完了していても見えない時があります。また、画像をロード中にスクロールを頻繁にした場合、画像が届かなくなり壊れたアイコンになるケースが多いのですが、これを防ぐこともできます。

○Webでの使用例(文字を上に配置する)

■LOWSRCで、間をもたせる。
<IMG SRC="omotai.gif" LOWSRC="karui.gif" WIDTH="256" HEIGHT="32">
大きな画像をいきなり送るのではなく、先に軽いデータを送っておいて、後から本番のデータを送るLOWSRCも有効です。通常の場合、LOWSRCには、本番データと同じ絵柄の1ビット版などを貼るのですが、あえて違う画像を張ってもおもしろいでしょう。また、多数同サイズのイメージ画像を使用しているページなどの場合、それらに共通の「お待ちください」とか「Now Loading」などの共通に使えるLOWSRCを用意してもよいでしょう。これらのデータを作るときは白黒2色の画像を作るのが理想ですが、色を付けたければ、それをGraphicConverter等のEdit Color Tableで着色すればよいでしょう。

○Webでの使用例
・デザイン的に本データと関係ある展開のLOWSRC
・ストーリーの一部としてコメントを表示するLOWSRC
・同じLOWSRCデータを使い回す
(※ただしLOWSRCは本データのキャッシュが出来ると表示されません。また、本誌付属のCD-ROMなどの場合も本データの到着がWebと違い早いため効果が分かりづらいと思います。)

■重い画像を隠して、あらかじめ送っておく。
これは、説明するより、まず先にWebで実験しているページがありますので見てください。

○Webでの使用例
・イントロ部分
特殊なフォントを使用しているため文字を全てイメージ画像で送っています。このページをロードしおわったら最後の行の点滅している「うつくしい村が」っていう文字をクリックしてみてください。

・うつくしい村が・・・
今度は割と早く画像が表示されたのではないでしょうか。(とは言っても、容量の割にはです。このページには物凄い容量の画像がありますので)

巨大なクリッカブルマップのイメージ画像は、文字だけの前ページで送ってしまっているのです。だからクリッカブルマップのページは、キャッシュを表示する時間だけあればいいという訳です。このように大きな画像は、それと悟られず、ばらして手前の軽そうなページで読み込んでおくことも可能なのです。この手法は極めて簡単で、先に読み込ませたい画像の、画像サイズを1ピクセル×1ピクセルに縮小して、手前のページなどに張るだけでOKです。
<IMG SRC="nextpage.gif" WIDTH="1" HEIGHT="1">


■タイリング式クリッカブルマップの提案

大きな画像といえばイラスト入りのクリッカブルマップを連想される方は多いと思います。何処のページでもよくクリッカブルマップを使用していますが、ほとんどのものがかなり重たく感じます。そこで僕が提案しているのが、「タイリング式クリッカブルマップ」というものです。繰り返し出てくるパーツ(道・川・家・並木などなど)を一定のピクセル数を決めてタイルに描き、それの羅列をHTMLで貼りつけるというものです。リンクしたいときは、そのタイルに直接すればいいので通常の<A>タグで簡単にできます。全体をテーブルタグで囲み、各行を<NOBR>で改行不可にすれば出来上がりです。

  

これをすき間無くタイリングすると・・・

○Webでの使用例(タイリング式クリッカブルマップ)
◇タイリング式クリッカブルマップのソース例


■GIFアニメは必要部分だけを分割して

最近GIFを何枚も重ねてアニメーションにするGIFアニメが流行っていますが、あまり大きなGIFアニメはやはり速度の面から見て好ましくないでしょう。こういう場合は、動く部分だけを分割して使用し、動かない部分は通常のGIFとするとデータ量の削減ができます。もし、位置決めするときずれるようであれば<TABLE>タグでまとめればいいでしょう。また、一列に細切れの画像を並べる場合は<NOBR>タグで挟めば安心です。

○Webでの使用例(分割したGIFアニメーション)
◇分割したGIFアニメーションのソース例


※ここでは、ほんの一例を実験しているにすぎません。 この他、詳しくは本書をお読みください。

[戻る] [選ぶ] [進む]