■重い画像を見せるためのテクニック意味もなく重いだけの画像は最悪です。そういう圧縮の工夫、待たせる工夫のなされていない画像が表示されれば、きっとその場で他のサイトへ行ってしまうでしょう。この節では効率的な画像圧縮と、待ってもらうための工夫の2点から考えてみたいと思います。
■GIFとJPEGについて一般に写真関係はJPEGで圧縮しますが、その独特の色のニジミが気になる場合、シャープなイメージが欲しい場合、バックとシームレスな画像を作りたい場合など、あえてGIFにすることも考えましょう。工夫次第ではJPEGに匹敵する高圧縮(正確にはGIFでは減色であり圧縮ではありません)が期待できますので、両方を試して比較してみてください。
●GIF vs JPEG (写真編)
■GIFで作るスイッチアイコンの減色かっちりとしたスイッチアイコンなどを作る場合は、ディザ・アンチエイリアシング共に無しで処理をしてみましょう。このとき多少ガタガタに見えますがデータ量はディザ・アンチエイリアシング有効のときよりはるかに小さくできます。これは中間色を補完しないためで、カラーパレット数が極端に減る(最小1bit)ためです。ただし滑らかな階調は望めないので写真には向きません。また、スイッチの場合は、減色処理後ピクセル単位での修正をしてやればより美しく仕上がります。この手法のもう一つのメリットは、奇麗な切り抜きが可能という点で、透過GIFのスイッチを創る場合にも最適です。
●1bit GIF(ロゴ編)
【作成方法】
【グラフィックソフトを使用して】
■待ってもらうための工夫■文字を読んで待ってもらう。<IMG SRC="todokanai.gif" WIDTH="256" HEIGHT="32"> 基本的に重い画像はサイズ指定をすることをお勧めします。ブラウザは画像サイズを読んでから全体のレイアウトを開始しますが、サイズ指定をコチラでしてやることによりその手間を省いてやることが出来ます。また画像が何らか(または意図的)の事情で届かなくともレイアウトが乱れることがないというメリットもあります。 (詳しくは前述の「イメージサイズの指定をする」に記載)
■文章を画像より上に配置する。
■LOWSRCで、間をもたせる。
○Webでの使用例
■重い画像を隠して、あらかじめ送っておく。
○Webでの使用例
・うつくしい村が・・・
巨大なクリッカブルマップのイメージ画像は、文字だけの前ページで送ってしまっているのです。だからクリッカブルマップのページは、キャッシュを表示する時間だけあればいいという訳です。このように大きな画像は、それと悟られず、ばらして手前の軽そうなページで読み込んでおくことも可能なのです。この手法は極めて簡単で、先に読み込ませたい画像の、画像サイズを1ピクセル×1ピクセルに縮小して、手前のページなどに張るだけでOKです。
■タイリング式クリッカブルマップの提案大きな画像といえばイラスト入りのクリッカブルマップを連想される方は多いと思います。何処のページでもよくクリッカブルマップを使用していますが、ほとんどのものがかなり重たく感じます。そこで僕が提案しているのが、「タイリング式クリッカブルマップ」というものです。繰り返し出てくるパーツ(道・川・家・並木などなど)を一定のピクセル数を決めてタイルに描き、それの羅列をHTMLで貼りつけるというものです。リンクしたいときは、そのタイルに直接すればいいので通常の<A>タグで簡単にできます。全体をテーブルタグで囲み、各行を<NOBR>で改行不可にすれば出来上がりです。
これをすき間無くタイリングすると・・・
○Webでの使用例(タイリング式クリッカブルマップ)
■GIFアニメは必要部分だけを分割して最近GIFを何枚も重ねてアニメーションにするGIFアニメが流行っていますが、あまり大きなGIFアニメはやはり速度の面から見て好ましくないでしょう。こういう場合は、動く部分だけを分割して使用し、動かない部分は通常のGIFとするとデータ量の削減ができます。もし、位置決めするときずれるようであれば<TABLE>タグでまとめればいいでしょう。また、一列に細切れの画像を並べる場合は<NOBR>タグで挟めば安心です。
○Webでの使用例(分割したGIFアニメーション)
※ここでは、ほんの一例を実験しているにすぎません。 この他、詳しくは本書をお読みください。 |
