- ベストアンサー
ホームページの画像表示が１枚だけ重い
- ホームページを作っているのですが、１つのページに小さい画像が４枚貼ってあります。サイズはｊｐｇで３ｋｂに満たないものから、大きくても２０ｋｂ程度のものです。
- 家の２M出るADSLで確認したら、４枚ある画像のうち１枚だけがしょっちゅう表示が遅れるんです。たまに２枚の表示が遅れることもあるんですが、だいたい１枚が遅いときで３秒かかったりします。それも２０ｋｂの画像はすんなり表示されて３ｋｂの方が時間かかったりすることもあるんです。
- ホームページ自体が重かったり、画像全部が遅かったりするんならわかるんですが、なんで１～２枚だけ遅れるんでしょうか？直せるのかな？HTMLはホームページビルダーではりつけていますのでそんなに変なことはしてないと思うんですが。
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
私も自分のサイトのデザインレイアウトにテーブルを 使いますが、テーブル内の画像はテーブル全体の読み込み 終了後に表示されるため、あまり入れ子にしたテーブル構造 だと表示が遅くなります。 これはレイアウト目的でテーブルを使う人は知っておくべき要素です。 Webデザイン関連の書籍でもテーブルの項目でだいたい載っている ことが多いです。 レイアウトに凝るのも良いのですが、見る人にストレスを 与えない程度に工夫しないと逆効果になってしまいます。 難しいですね、このバランスの兼ね合いが。 テーブルの中に画像を並べるときは、多くても二枚程度 (ひとつの<table></table>の間に)にしておくのが無難です。 入れ子構造はできるだけデザイン的にどうしても！という とき以外は避けましょう。 <table><table></table></table> となっている場合、内側の<table>タグ内のデータは 外側の<table>タグの内容とされるため、内側の<table> タグの内容はこの親と子のタグが全部読まれないと表示されません。 私は説明が下手なのでわかりにくいかもしれません。 画像のレイアウトの方法はテーブル以外にもいろいろあります。 例えば・・・これは私もよく使うのですが、透明のスペース 調整用のGIF画像を使うものです。 (スペーサーGIFとも言われます) 決まった間隔に画像を並べたりする際に、その間隔と同じ 大きさの透過GIF画像を並べたい画像と画像の間に置くのです。 作っておくGIF画像は1ピクセル×1ピクセルの最小限なもので良いです。 これを<img>タグのオプションで拡大して好きな大きさに表示できます。 レイアウト方法を簡単に説明しているページをご案内しておきます。 http://www.nichibun.net/itly/ac2001/ac1031/webstudy11.4.html
その他の回答 (1)
- jein
- ベストアンサー率49% (2799/5705)
例えば単純にソースを <html> <body> <img src="画像一つ目のURL">001</img> <img src="画像二つ目のURL">002</img> <img src="画像三つ目のURL">003</img> <img src="画像四つ目のURL">004</img> </body> </html> などとした場合に表示可能でしょうか？ 表示に問題がなければホームページビルダーより 書き出されたHTML自体の問題ということになります。 テーブルやフレームで区切っているところはページ内にありますか？
お礼
早速ありがとうございます！ 書いてもらったHTMLで、同じHPスペースにアップしてみて試して見ました。単純に画像が列んでいる状態ですね。これで何度も更新ボタンを押して表示速度を試してみましたが、ビックリしたことに遅くなることはありませんでした。 フレームは使っていませんが、テーブルはたくさんつかっています。テーブルの中にテーブルがあってそれが２分割されているような状態なんですよ！もしかしたらこれが原因なんでしょうか？！なんでテーブルだと遅れちゃんでしょう。解決法はテーブルを減らすこと以外にはないんでしょうか？
お礼
何度もありがとうございます！ テーブルを重ねるとやっぱり遅くなるですね。作っていて「重ねれば色んなデザインができる！」と喜んで調子に乗りすぎてしまいました。（＾＾；）３重だと、外テーブル読んで、中テーブル読んで、それで初めて内テーブルを読むという順番があることを初めて知りました。 スペーサーＧＩＦは全然知りませんでした。こんな方法があるなんて驚きです！ＨＴＭＬの制限を工夫で乗り越える凄いアイデアですね。ぜひ試してみたいと思います。 ありがとうございました。