HTMLファイルの画像について

質問

メモ帳で２００枚近くある画像（50x50ピクセル）が載ったアルバムを作ったのですがファイルが重くてなかなか開きません。
そこでわたしが考えた対策は、基本的に画像は非表示でオンマウス、またはマウスオーバーで個々の画像を表示するというやり方です。
けど、肝心のプログラムの仕方が分かりません（初心者です）。

とりあえず今の現状なんですけど、

<table>
<tr>
<td><img src="http://***1.gif">１</td>
<td><img src="http://***2.gif">２</td>
<td><img src="http://***3.gif">３</td>
<td><img src="http://***4.gif">４</td>
<td><img src="http://***5.gif">５</td>
</tr>
<tr>残り省略</tr>
</table>

こんな感じで延々２００行続いています。
（画像は著作権がない物です）

そこで質問なんですけど、わたしが考えた対策でも、それ以外の方法でも構わないので画像数を減らす事なくファイルを軽くする方法があったら教えてください。

宜しくお願い致します。

回答No.4

dora7075 · ベストアンサー

質問者様の現状の方法の場合、
<td><img src="​http://***5.gif">​５</td>
の画像をファイルサイズの小さいサムネイル画像とする必要があります。そのままのファイルを縮小表示してもファイル自体は重いままです。

そこで対応策としては
(1)フレーム分割して、左にリンク。右を画像出力用とする。リンクの代わりにサムネイル画像使用でもOK。リンクorマウスオーバーで右のフレームに該当の画像を表示する。
(2)リンクorサムネイル画像のリストまたは表を作成し、リンクorマウスオーバーで子画面を呼び出して、そこに画像表示する。子画面の名前を付けて呼び出すと、子画面が複数呼ばれることがなくなる。

画面デザインと画像サイズを考慮して、(1)か(2)をお勧めします。

お礼

勉強になりました。ありがとうございます。

回答No.5

yumitsuki

約200枚の画像が全て50ピクセル四方なのでしょうか?
だとしたら、サイズ的には既にサムネイルのようなものだと思います。
各画像のファイルサイズもかなり小さいはず。
それでも重たい原因は、<table>タグの利用にあるのではないかと疑っています。

例えば、

<p>
<img src="http://***1.gif" height="50" width="50"> &nbsp;
<img src="http://***2.gif" height="50" width="50"> &nbsp;
<img src="http://***3.gif" height="50" width="50"> &nbsp;
<img src="http://***4.gif" height="50" width="50"> &nbsp;
<img src="http://***5.gif" height="50" width="50"> <br>
</p>

<p>
<img src="http://***6.gif" height="50" width="50"> &nbsp;
<img src="http://***7.gif" height="50" width="50"> &nbsp;
<img src="http://***8.gif" height="50" width="50"> &nbsp;
<img src="http://***9.gif" height="50" width="50"> &nbsp;
<img src="http://***10.gif" height="50" width="50"> <br>
</p>

とするのはいかがでしょうか? 質問者様の「現状」に近いレイアウトになると思います。

お礼

ありがとうございます。上手くできました

回答No.3

karupon

もしＣＧＩなどの知識があれば↓みたいな掲示板を設置すると簡単ですよ。
http://www.kisweb.ne.jp/personal/toshi_n/game/perl_script.html#uploader_cgi

お礼

参考になりました。ありがとうございます。

回答No.2

kame999

http://www.katch.ne.jp/~k_okada/

ViX（統合画像ビュアー、Windows95/98/Me/NT4.0/2000/XP用、フリーソフトウェア）

http://www.w-frontier.com/software/ezhtml.html

ez-HTML ver 7.60 Beta2 (7.60.2)
充実したカスタマイズ、正確な入力支援、XHTML形式出力も記述ができる次世代対応HTMLエディタ

上記のツール等を使いましょう

他にもありますので　参考サイト　http://www.vector.co.jp/

お礼

もうちょっと自分のスキルが上がったら使ってみようと思います。
ありがとうございました。

回答No.1

lockin0220

サムネイル画像（2-3kb程度の小さな画像）を用意して、そこに画像をリンクするのが一番いいんじゃないでしょうか？
画像変換ツールなんかで簡単にできますよ

お礼

ありがとうございました。今度使ってみようと思います。