-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.72089
  • 閲覧数84
  • ありがとう数8
  • 気になる数0
  • 回答数10
  • コメント数0

お礼率 66% (8/12)

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

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

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

写真掲載によって開くのが遅くなるのを防ぐ素敵なアイディアを教えて下さい。
よろしくお願いします。
通報する
  • 回答数10
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.7
レベル10

ベストアンサー率 17% (23/131)

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

お礼率 66% (8/12)

ありがとうございました。
具体的でとてもわかりやすかったです。
kennsakuyaさんのサイズを参考に作ってみたいと思います。
投稿日時 - 2001-05-08 22:22:50
-PR-
-PR-

その他の回答 (全9件)

  • 回答No.10
レベル10

ベストアンサー率 38% (61/158)

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

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

お礼率 66% (8/12)

何度もお返事いただきありがとうございました!!
うれしかったです。HP作成がんばります。
投稿日時 - 2001-05-08 22:12:11
  • 回答No.3
レベル10

ベストアンサー率 38% (61/158)

Jpeg縮小ソフト http://www.vector.co.jp/soft/win95/art/se146962.html Jpegのごみヘッダを取り除くソフト ぺーたーJpegプライベート http://hp.vector.co.jp/authors/VA012657/index.htm サムネイル作成ソフト(使ったこと無いのでどういうそふとかわかりません) http://www. ...続きを読む
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
レベル11

ベストアンサー率 42% (91/216)

「FrontPage を使用して、サムネイルを作成することができます。 サムネイルとは、画像を縮小したもので、ユーザーがサムネイルをクリックして ハイパーリンク先を表示すると、画像がフルサイズで表示されます。」の機能で作成。 ダウンロードに時間がかかるページの一覧を表示する機能で確認すれば良いのでは? FrontPageをお使いでなくても同じような機能がある?と思います。 エディタを使わ ...続きを読む
「FrontPage を使用して、サムネイルを作成することができます。
サムネイルとは、画像を縮小したもので、ユーザーがサムネイルをクリックして
ハイパーリンク先を表示すると、画像がフルサイズで表示されます。」の機能で作成。
ダウンロードに時間がかかるページの一覧を表示する機能で確認すれば良いのでは?

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

エディタを使われてないのでしたら写真を掲載されてるHPをご覧になって
参考にされては?
(画像を右クリックして「プロパティ」でサイズが表示されます。
  • 回答No.1
レベル10

ベストアンサー率 38% (61/158)

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

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

ベストアンサー率 38% (19/50)

基本的には皆さんの意見と同じです。 私も同じようなHP(両親のHPなんですが)の編集をまかされています。 沢山の写真を見て頂こうとすると、まずは見本に小さい画像を用意して、その次に大きいものを用意する、といった感じにしています。 (この方法ですと、画像枚数が増えます) こういった写真公開サイトになると、色々気を使います。 重くて開かないとやはりNo.7で kensakuyaさんがおっしゃって ...続きを読む
基本的には皆さんの意見と同じです。
私も同じようなHP(両親のHPなんですが)の編集をまかされています。
沢山の写真を見て頂こうとすると、まずは見本に小さい画像を用意して、その次に大きいものを用意する、といった感じにしています。
(この方法ですと、画像枚数が増えます)

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

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

お礼率 66% (8/12)

ありがとうございました。
なるべく軽くなる様にがんばります。
投稿日時 - 2001-05-08 22:17:23
  • 回答No.9
レベル9

ベストアンサー率 38% (29/75)

私も同じようなHPを管理しています。 いわゆる"サムネイル"というものですね。これの目的はいきなりでっかい画像を見せるんじゃなく、まずは小さい"サンプル"を見てもらうということです。なので縮小画像はもとの大きさより大分小さくしてOKです。縮小画像を作る方法は2種類あります。 まず<IMG>タグのwidth="*",height ...続きを読む
私も同じような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/
お礼コメント
tamitami

お礼率 66% (8/12)

すごくわかりやすかったです。ありがとうございました。
投稿日時 - 2001-05-08 22:14:30
  • 回答No.4
レベル11

ベストアンサー率 42% (91/216)

画像関係だけなら Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮(jpeg、GIF形式) してくれます。 より綺麗にというならOPTPiX webDesignerが個人的にはお勧めです。 ...続きを読む
画像関係だけなら
Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮(jpeg、GIF形式)
してくれます。

より綺麗にというならOPTPiX webDesignerが個人的にはお勧めです。
お礼コメント
tamitami

お礼率 66% (8/12)

何度も回答いただき、ありがとうございました。
HP作成がんばります!!
投稿日時 - 2001-05-08 22:26:02
  • 回答No.5
レベル8

ベストアンサー率 30% (7/23)

はじめまして、こんばんわ。 私がやっている方法を御紹介します。 1ページ目:小さい画像を並べてリンクを張ります。      (小さい画像を用意します。例えば、        ●解像度:72 pixels        ●サイズ:70 pixels(長い方の辺を指定)  ある程度大きい画像ですと、gif形式 よりもjpg形式の方がデータが軽 く作れる時があります。小さい画像であれば、g ...続きを読む
はじめまして、こんばんわ。
私がやっている方法を御紹介します。

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

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

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

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

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

参考になりましたでしょうか??
がんばってください。
  • 回答No.6
レベル8

ベストアンサー率 30% (7/23)

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

素敵なHPになるといいですね。
ではでは~。
お礼コメント
tamitami

お礼率 66% (8/12)

何度もお返事いただきありがとうございました。
とっても参考になりました!!
投稿日時 - 2001-05-08 22:19:26
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ