画像の表示タグとテーブルタグ

大きな画像を表示させたいとき　画像をそのまま貼り付けてしまうと、
表示サイズも大きく　ファイルサイズ自体も大きいので　画像が表示されるまでに、
どうしても時間がかかってしまいます。
まず　下のリンクをクリックしてみてください。

○　大きな画像をそのまま貼り付けてみました。

画像はきちんと表示されたでしょうか？
ちなみに　上のリンク先の画像のファイルサイズは　184k　あります。
重くて見えなかった人は　そのままで結構です。
これでは　せっかく貼り付けた画像も　重くて読み込めない　見えなかった
という訪問者もでてくる可能性がありますね。

そこで　PhotoShopやFireworks、Paint Shop Pro　などの画像処理ソフトを
利用して画像を分割し　テーブルタグを使って表示させる方法があります。
これを　画像をスライスして表示する　といいます。
では　下のリンクをクリックしてみてください。

○　画像をスライスして表示してみました。

今度は　画像をスライスして表示した場合です。
大きな画像をそのまま貼り付けた場合と違って、画像の表示が分担されていますので、
かなり早い時間で全体を表示させることができます。
ちなみに画像のファイルサイズは　空の部分なら　1k程度
色が複雑な部分は大きくても13k。
ファイル16枚を　全部あわせても　94k　になりました。
最初の　１枚の写真のサイズは　184ｋですから　かなり小さくなりましたね。

画像をスライスするには　画像処理ソフトを利用しないといけないので、
多少の技術が必要ですが、慣れてしまえばそう難しいことではありません。

綺麗な写真や画像をレイアウトに使っているホームページは
たいてい　こういうやり方でホームページを作っている　というのを
少しはご理解いただけたでしょうか？

●　適切なファイル形式を選ぼう

画像形式では　写真はjpeg　その他のイラストなどはgifで設定する。という
お話を　以前にご紹介しましたね。

そこで　次のサンプルを見てください

○　適切なファイル形式を選ぼう

このページは　ヘッダ部と　左側のメニュー　ひまわりの写真　そして
本文がありますね。

ひまわりは　写真ですので　jpegの形式で、
その他の画像は　gifの形式で保存しています。
このように　画像にあったファイル形式を選んで
指定することができます。

●　画像をスライスして表示させるメリット

・　大きいサイズの画像をそのまま貼り付けると　表示時間がかかるのに対し
　　スライスした画像は　ファイルサイズを小さくでき　なおかつ表示する
　　ファイルを分担できるため　画像がより早く表示される。

・　それぞれの画像に対して　個別に画像の処理を行えるので、
　　１つ１つの画像に適切なファイル形式　圧縮率を指定することで
　　ファイルによってはさらにサイズを下げることもできる。

・　画像内にボタンを入れている場合　リンクやロールオーバーなどを
　　指定できる。

●　画像をスライスして表示させるデメリット

ここまで聞くと　メリットばかりが目立ちますが、
もちろんデメリットもあります。

・　画像を読み込む数が複数になるので　場合によっては、
　　必ずしも表示が早くなるとは限らない。

・　それぞれの画像に　適切な画像形式　圧縮方法を活用しないと、
　　かえって逆効果になる場合もある。

・　画像をやたらに分割してしまうと　ファイルを読み込む数も増え
　　テーブルタグも複雑になり、かえって読み込むまでの時間がかか
　　る場合がある。

つまり　なんでもかんでも　やたらにスライスをやればよい　
というものではありません。

●　イメージマップとの違い

スライスした画像にリンクを貼れるなら　イメージマップのような感じかな？
なんて思ってしまう方もいらっしゃるかもしれませんが、このやり方は、
イメージマップとは少し違います。

今回のお話は　画像を分割して　１つの画像にリンクを貼る方法です。
イメージマップの場合は　１つの画像に　複数のリンクを貼るというものです。
意外に　勘違いされている人もいらっしゃいますので　混同しないようにしましょう。

●　スライスがうまく表示されない方へ

テーブルタグでスライス画像をやってみたけど　上手くできなかった。
という人のために　ちょっとアドバイスです。
どうしても画像の隙間が埋まらない　という人はこの部分を確認してください。
まず　通常のテーブルの場合は

このHTMLタグは

<table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

まずは　枠線を消しましょう。

<table border="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

これでもまだ　不十分ですね。
これは　セルの間隔とセルの余白が指定されていないからなんです。
指定していない場合は　間隔、余白　それぞれ　１　となりますので、
セルの間隔、セルの余白　共に　"0"　と　指定しましょう。

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>