大量画像のホームページを軽くしたい。
1600×1200 24bitのデジカメ画像を沢山使ったホームページを作りましたが、
非常に重いので、何とかならないかと思案しています。
サイズを指定して画面に小画像を表示し、それをクリックして画面サイズの画像を表示しています。
<a href="abcd.jpg"><img src="abcd.jpg" width="200"></a>
このような表現を沢山使っております。
こうすると、
画像は一つで済みますが、凄く重いホームページになります。
しかし、
横幅200の画像と画面サイズの画像を準備すれば良いのですが、
元の画像と合わせて3種類の画像を持ってなければなりません。
元の画像をそのまま残したいのと、一つの画像に幾つものサイズを持ちたくありません。
こんな場合に何か良い方法は有るのでしょうか?
Windows98SEとIE6を使用しています。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
こんな感じのjavascriptならあります。
スクロールに応じて画像を読み込んでいくタイプです。
この場合、アンカーは必要ないかもしれませんね。
ですが、あくまでjavascriptがオンの時なので、IE系では上の方にポップアップが出ますし、javascriptオフの環境ではひどい状態になります。
一般的に、フリーのcgi等を利用すると勝手にサムネイルとリンクを自動生成してくれたりするのでその方が良いと思います。
metametamuさん、こんにちは。
紹介していただいた、ページは参照しました。
参考になったかどうかは、・・・!
最後の
「一般的に、フリーのcgi等を利用すると勝手にサムネイルとリンクを自動生成してくれたりするのでその方が良いと思います。」が、
具体的によく解らなかったのですが、
普通の方法で#1さんの方法で対処します。
No.3
- 回答日時:
>元の画像をそのまま残したいのと、一つの画像に幾つものサイズを持ちたくありません。
なら今の方法しかありません。
著者の都合だけで、訪問者の利便性を考慮しないウェブサイトは、必要ありません。
今の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
- 回答日時:
残念ながら、表示するサイズをソースで指定しても、ページを表示するときに読み込むファイルサイズは小さくならないので、パージを軽くすることには貢献しません。
また、
<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さんの方法採用します。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- YouTube youtube 画像のサイズを少し小さくするには 1 2023/02/14 08:55
- その他(ブログ) なぜ、ホームページが削除されても、そのホームページ上の画像のリンク先がリンク切れになる場合 5 2023/07/15 10:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
崩れたレイアウトが更新すると...
-
サムネイル(画像)をクリックす...
-
form以外でのpostってできますか?
-
元々あるファビコンが消えない
-
CSSなどでHTML全体の表示を拡大...
-
リンクバナーのHTMLタグ。画像...
-
PerlのCGIの中で画像表示(html)
-
背景が透明なリンクボタンで、...
-
マウスオーバーで薄いホワイト...
-
ボタンを押したままにする。
-
「DecareステートメントにPtrSa...
-
HTMLのレイヤーとは?
-
画像がHPに載らない!
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
画像クリックでクリップボード...
-
画像にリンクを設定したら、枠...
-
<img>タグのalt属性
-
HTMLにQRコードを挿入する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
IMGタグでTIFF画像を表示
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
クリックしても、リンクに飛ば...
-
予約語の表示について
-
HTMLでデスクトップの画像がでない
-
崩れたレイアウトが更新すると...
-
カーソルを合わせると文字が出...
-
カウンターのHTMLソースを教え...
-
画像クリックでクリップボード...
-
tifファイルが表示されない
-
IFRAME内に収まるように画像を...
おすすめ情報