HP上で写真を50カット程度掲載したいのですが、そのサイズについて

質問

教えて下さい。
初めてHP作成をする者です。
小さい画像を最初に並べておいて、クリックすると新しいウインドウに
拡大写真が表示されるような形で写真を大量に載せたいのですが、
その場合画面が重くなって開くまでに時間がかかってしまうのではないか・・・？

その為に縮小画像の時は画像サイズを小さく設定し直して掲載した方がいいのか？

ページをいくつかに分けて10画像くらいずつ載せた場合は1ページに全画像載せるより、開くのに時間かかからないのではないか？

写真掲載によって開くのが遅くなるのを防ぐ素敵なアイディアを教えて下さい。
よろしくお願いします。

回答No.7

kensakuya · ベストアンサー

ちょうど今同じようなＨＰを作り終わったところです！
皆さんの説明は専門的すぎる感じがしますので、初心者同士としてアドバイスすると・・・
５０枚ほどあるのでしたら、いくつかのページにわけた方が見やすいと思います。私は小さい写真（サムネイルといいます）横５枚、縦３段の１５枚を１つのページにのせました。サムネイルの大きさは長辺１００ピクセルにしました。サムネイルは大きな写真をフォトショップというソフトで縮小して作りました。たくさんあるとすごく手間がかかります。
保存するときにjpeg形式で圧縮率を高くすると容量が減ります。サムネイルは１００ピクセルぐらいだと画像が劣化してもあまりわかりません。
クリックして新しいウィンドウに表示する大きな写真は、長辺を４８０ピクセルにしましたが、縦長の写真だと小さい画面のユーザーの場合スクロールしないと見ることが出来ない可能性がある感じがしていますから、縦長写真がある場合は長辺が４００ピクセルぐらいのほうが良いと思います。画像が小さくなればそれだけ軽いページにもなりますしね。これも試行錯誤で圧縮率を調整して容量を減らしました。
アイデアはたくさんあっても、重いＨＰになると最後まで見てもらえないことが多いようですから、出来るだけ軽くすることを私は心がけています。

お礼

ありがとうございました。
具体的でとてもわかりやすかったです。
kennsakuyaさんのサイズを参考に作ってみたいと思います。

回答No.10

Ryo_Hyuga

No.3の答えを書いたものです。

ただ今、下で紹介したサムネイル作成ソフトを使ってみました。
このソフトは一つのフォルダ内の画像を一気にサムネイルしてくれました。
サムネイルの画像と、実際の画像はフォルダが別れるらしいです。
アップロードすればすぐ使えるHTMLファイルも吐き出してくれました。

参考URL：

http://www.vector.co.jp/soft/win95/net/se073892.html

お礼

何度もお返事いただきありがとうございました!!
うれしかったです。HP作成がんばります。

回答No.9

setera

私も同じようなHPを管理しています。
いわゆる"サムネイル"というものですね。これの目的はいきなりでっかい画像を見せるんじゃなく、まずは小さい"サンプル"を見てもらうということです。なので縮小画像はもとの大きさより大分小さくしてOKです。縮小画像を作る方法は2種類あります。

まず<IMG>タグのwidth="*",height="*"の部分を調整して画像のサイズを縮小する方法。でもあまりオススメできません。
なぜかというと、これは読みこむファイルのサイズに変わりがないから、なんです。例えばこの方法で1MBの画像を50×50pxのちっちゃい画像にします。これは「見た目には」小さく見えるけど本当は「1MBのでっかい画像」を表示してるのと同じです。これだとサクサク動く一覧表は作れません。
なので、多少手間がかかってもあらかじめ縮小した画像を用意するのが一番良いと思います(私もこれです)。
画質さえ妥協すれば、Windowsにもとから入っている"ペイント"という便利なソフトを使いましょう。縮小したい画像を読みこんで[ 伸縮と傾き ]を選びます。レタッチソフトに比べると多少画質は落ちるものの、サムネイルとしては十分使用できるレベルです。
サムネイルを作るためのソフトも出回っています。それにHPへ掲載するなら画像の形式を変えるコンバータも要りますね(BMPでも可能ですが読みこみは極重です。JPGかGIFにしましょう)。
参考URLにFW&SWの大手Vectorをのせておきます。沢山あるので自分にジャストフィットするものを探してみてください。

「ページをいくつかにわけて～」ですが、1ページに詰めこむよりもいくつかのページに分けた方がサクサクいきます。ファイルサイズにもよりますが、1ページ全体のサイズ(HTMLファイルから画像まで全部あわせた大きさ)が50KBを上回ると、読みこみにストレスを感じるようになります。ページサイズが50KB以下になるよう縮小画像をふりわけてください。

あとは拡大画像(オリジナル画像)を表示させる方法ですが↓
<A href="拡大画像のURL" target="_blank"><IMG src="縮小画像のURL"></A>
とするのが手っ取り早いです。たまに拡大画像を表示させるためのHTMLファイルを作る方がいますが、上のタグ表記だけでOKです。ためしにやってみてくださいね(ってもう知ってるかも)。

↓参考までに私のHPです。サムネイルの大きさは一律50×50pxにしてあります。
http://www15.xdsl.ne.jp/~coo/rachael/

参考URL：

http://www.vector.co.jp/

お礼

すごくわかりやすかったです。ありがとうございました。

回答No.8

hotahota

基本的には皆さんの意見と同じです。
私も同じようなHP（両親のHPなんですが）の編集をまかされています。
沢山の写真を見て頂こうとすると、まずは見本に小さい画像を用意して、その次に大きいものを用意する、といった感じにしています。
（この方法ですと、画像枚数が増えます）

こういった写真公開サイトになると、色々気を使います。
重くて開かないとやはりNo.7で kensakuyaさんがおっしゃっている通り、足が遠のきますし、なによりもストレスですからね。

ちなみに私が編集しているのは<http://kimagureflower.yy.mu/>ですが、
「重い」と言われたことはないですね。（但し、PC用壁紙は別）
後、画面の小さい方々の閲覧も一応意識してなるべく幅を小さめに作ってます。
なるべく……ですので、時々、見づらいこともあるんでしょうけども。（苦笑）
HP製作頑張ってくださいね。

お礼

ありがとうございました。
なるべく軽くなる様にがんばります。

回答No.6

uoriki

書き忘れてしまいましたが、小さくした画像は、
ぼやけてしまいます。
ここで、シャープ処理をしますとよりはっきりとした
画像になる上に、jpg形式や、gif形式にした時、すこ～しですが、
データの重さが軽くなるようです。

素敵なHPになるといいですね。
ではでは～。

お礼

何度もお返事いただきありがとうございました。
とっても参考になりました!!

回答No.5

uoriki

はじめまして、こんばんわ。
私がやっている方法を御紹介します。

１ページ目：小さい画像を並べてリンクを張ります。
　　　　　（小さい画像を用意します。例えば、
　　　　　　　●解像度：72 pixels
　　　　　　　●サイズ：70 pixels（長い方の辺を指定）

　ある程度大きい画像ですと、gif形式 よりもjpg形式の方がデータが軽
く作れる時があります。小さい画像であれば、gif形式で、色数を押さ
えればかなり軽くなるはず。
　上の大きさの場合は、画像があんまりわからないぐらいになるので、
gif形式で十分。いけると思います。）

２ページ目：リンク先（画面いっぱいに写真画像）
　　　　　　　●解像度：72 pixels
　　　　　　　●サイズ縱：500 pixels（長い方の辺を指定）

　表示を少しでも早くするために、一枚の画像をを分割します。
まず、一枚の画像（jpg形式）を作った後、５分割やら８分割に
切りきざんで、<table>タグでくっつけます。
<table border="0" cellpadding="0" cellspacing="0">
でよけいな枠が消えます。

こうすると、割と速く表示してくれます。プロも使っている技です。
分割ってところが難しいかもしれませんが、ソフトによっては
簡単にスライスできる物もあるようです。

参考になりましたでしょうか？？
がんばってください。

回答No.4

april21

画像関係だけなら
Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮（jpeg、GIF形式）
してくれます。

より綺麗にというならOPTPiX webDesignerが個人的にはお勧めです。

参考URL：

http://www.vector.co.jp/swreg/catalogue/sr014856/?srno=SR014856&site=v

お礼

何度も回答いただき、ありがとうございました。
HP作成がんばります!!

回答No.3

Ryo_Hyuga

Jpeg縮小ソフト
http://www.vector.co.jp/soft/win95/art/se146962.html

Jpegのごみヘッダを取り除くソフト
ぺーたーJpegプライベート
http://hp.vector.co.jp/authors/VA012657/index.htm

サムネイル作成ソフト(使ったこと無いのでどういうそふとかわかりません)
http://www.vector.co.jp/soft/win95/net/se073892.html

回答No.2

april21

「FrontPage を使用して、サムネイルを作成することができます。
サムネイルとは、画像を縮小したもので、ユーザーがサムネイルをクリックして
ハイパーリンク先を表示すると、画像がフルサイズで表示されます。」の機能で作成。
ダウンロードに時間がかかるページの一覧を表示する機能で確認すれば良いのでは？

FrontPageをお使いでなくても同じような機能がある？と思います。

エディタを使われてないのでしたら写真を掲載されてるＨＰをご覧になって
参考にされては？
（画像を右クリックして「プロパティ」でサイズが表示されます。

回答No.1

Ryo_Hyuga

はじめまして。

確かに表示は遅くなります。
ですので、元の画像を縮小して表示させるのではなく、
縮小画像も最初から用意しておき、
プレビューの時はそっちを使うようにしましょう。