大量画像のホームページを軽くしたい。

質問

大量画像のホームページを軽くしたい。

1600×1200 24bitのデジカメ画像を沢山使ったホームページを作りましたが、
非常に重いので、何とかならないかと思案しています。
サイズを指定して画面に小画像を表示し、それをクリックして画面サイズの画像を表示しています。
<a href="abcd.jpg"><img src="abcd.jpg" width="200"></a>
このような表現を沢山使っております。
こうすると、
画像は一つで済みますが、凄く重いホームページになります。
しかし、
横幅200の画像と画面サイズの画像を準備すれば良いのですが、
元の画像と合わせて３種類の画像を持ってなければなりません。

元の画像をそのまま残したいのと、一つの画像に幾つものサイズを持ちたくありません。

こんな場合に何か良い方法は有るのでしょうか?
Windows98SEとIE6を使用しています。

回答No.4

noname#83877

http://blog.4galaxy.net/67.html
こんな感じのjavascriptならあります。
スクロールに応じて画像を読み込んでいくタイプです。
この場合、アンカーは必要ないかもしれませんね。

ですが、あくまでjavascriptがオンの時なので、IE系では上の方にポップアップが出ますし、javascriptオフの環境ではひどい状態になります。

一般的に、フリーのcgi等を利用すると勝手にサムネイルとリンクを自動生成してくれたりするのでその方が良いと思います。

お礼

metametamuさん、こんにちは。
紹介していただいた、ページは参照しました。
参考になったかどうかは、・・・!
最後の
「一般的に、フリーのcgi等を利用すると勝手にサムネイルとリンクを自動生成してくれたりするのでその方が良いと思います。」が、
具体的によく解らなかったのですが、
普通の方法で#1さんの方法で対処します。

回答No.3

ORUKA1951

＞元の画像をそのまま残したいのと、一つの画像に幾つものサイズを持ちたくありません。

なら今の方法しかありません。
著者の都合だけで、訪問者の利便性を考慮しないウェブサイトは、必要ありません。
今のWWWの創始者「Tim Berners-Lee」は次のように述べています。
Tim Berners-Lee著, 高橋徹監訳 『Webの創成 World Wide Webはいかにして生まれどこに向かうのか』 毎日コミュニケーションズ, 2001. (ISBN4-8399-0287-9)
「Webの背景をなす基本的な原理は次のようなものである。どこかの誰かが、ひとたび文書、データベース、画像、音声、動画あるいはある程度までインタラクティブな画面を準備したなら、もちろん使用許諾の範囲内のことだが、いかなる国のどのようなコンピュータを使っている誰もが、この画面に対してアクセス可能でなければならない。」
--Tim Berners-Lee著, 高橋徹監訳 『Webの創成 World Wide Webはいかにして生まれどこに向かうのか』 毎日コミュニケーションズ, 2001. (ISBN4-8399-0287-9)

　ネット上には回線速度の遅い人、小さなディスプレイ、貧弱な端末、あるいは視覚障害者も存在することを考えると、「一つの画像に幾つものサイズを持ちたくありません」にいかばかしかの価値もないのではないですか。謙虚になりましょう。

　写真サイトでは、サムネイルとそのサムネイルから大きな画像にリンクさせる方法が一般的です。また、サムネイルを貼り付けるページもできるだけ階層構造にして写真を探し出しやすくする工夫が必要です。
　index.html・・・abc,cde,efgそれぞれの代表的画像のサムネイル
　　|-- abc/
　　|　　|-- index.html・・abc内のサムネイル
　　|　　|　　　　(../images/thumbnail/abc-1.jpg,../images/thumbnail/abc-2.jpg
　　|　　|　　　　(../images/thumbnail/abc-3.jpg,../images/thumbnail/abc-4.jpg・・・)　　　　　　　　
　　|　　|-- page1.html・・画像のHTML(../images/abc-1.jpg)
　　|-- cde/
　　|　　|-- index.html
　　|-- efg/
　　|　　|-- index.html
　　|-- images/
　　|　　|-- thumbnail/
　　|　　|　　|--abc-1.jpg
　　|　　|　　|--abc-2.jpg
　　|　　|-- abc-1.jpg
　　|　　|-- abc-2.jpg
　　|　　|-- abc-3.jpg
　それぞれのサムネイル配置のHTMLにおいても、できるだけ、小ぶりなディスプレイでもスクロールなしに閲覧できる程度に抑えること。
　サムネイルを作るソフトはフリーにもワンクリックでできる優れたものがありますので、複数の画像を整理しましょう。
　いずれにしても、オリジナルデータはネットで公開することはないと思われますので、ウェブサイト用のものとは分けておけばよい。

お礼

ORUKA1951さん、こんにちは。
「訪問者の利便性を考慮」しなければならないと思い、重くなってしまうホームページの改善策を考えていたわけです。
予定どおり#1さんの方法で対処します。

回答No.2

shioz

残念ながら、表示するサイズをソースで指定しても、ページを表示するときに読み込むファイルサイズは小さくならないので、パージを軽くすることには貢献しません。

また、
<a href="abcd.jpg"><img src="abcd.jpg" width="200"></a>
との記述をされているそうですが、ためしに
<img src="abcd.jpg" width="200">
とリンクタグだけ除いて、ページの表示・動作を確認してみてください。

どのよううなコンテンツかにもよりますが、1600x1200というサイズはWebページに使うには大きいですね。
最初からWeb用に撮影するなら800x640くらいまでがいいと思います。
元々、保存用など他の用途で撮影した写真をWebで閲覧させたいなら、画像の数が多いなら、やはりリサイズする手間を惜しむべきではないでしょう。

ブログのように、コンテンツ内で使用する画像なら、リサイズがおすすめですが、"○○写真館"のように撮影した写真をひたすら展示するような主旨のWebページなら、アルバム表示のできるサービスを利用するか、CGIの利用が可能なら、下記のようなCGIで表示してあげてはいかがでしょうか？
http://cgi-design.net/prog/view/

上記のCGIは一例ですが、初心者でもわかるように必要な手順が解説されていますし、ソースを書き換えなくてもWeb上の管理者画面でカスタマイズが可能など、難しい操作が不要となる配慮がされていて使いやすいですよ。

お礼

shiozさん、こんにちは。
リンクを外しても、余り変化は無いようです。
予定どおり#1さんの方法採用します。ありがとうございました。

回答No.1

xxi-chanxx

適したサイズの画像を作り、Web上にアップロード後、パソコンから小さな画像は削除してしまえば良いと思いますが。
削除した画像がまた必要なら、ホームページからダウンロードすれば済む話ですし。

お礼

xxi-chanxxさん、こんにちは。
これが一番ですね。ありがとうございました。