教えて下さい。
初めてHP作成をする者です。
小さい画像を最初に並べておいて、クリックすると新しいウインドウに
拡大写真が表示されるような形で写真を大量に載せたいのですが、
その場合画面が重くなって開くまでに時間がかかってしまうのではないか・・・?
その為に縮小画像の時は画像サイズを小さく設定し直して掲載した方がいいのか?
ページをいくつかに分けて10画像くらいずつ載せた場合は1ページに全画像載せるより、開くのに時間かかからないのではないか?
写真掲載によって開くのが遅くなるのを防ぐ素敵なアイディアを教えて下さい。
よろしくお願いします。
No.7ベストアンサー
- 回答日時:
ちょうど今同じようなHPを作り終わったところです!
皆さんの説明は専門的すぎる感じがしますので、初心者同士としてアドバイスすると・・・
50枚ほどあるのでしたら、いくつかのページにわけた方が見やすいと思います。私は小さい写真(サムネイルといいます)横5枚、縦3段の15枚を1つのページにのせました。サムネイルの大きさは長辺100ピクセルにしました。サムネイルは大きな写真をフォトショップというソフトで縮小して作りました。たくさんあるとすごく手間がかかります。
保存するときにjpeg形式で圧縮率を高くすると容量が減ります。サムネイルは100ピクセルぐらいだと画像が劣化してもあまりわかりません。
クリックして新しいウィンドウに表示する大きな写真は、長辺を480ピクセルにしましたが、縦長の写真だと小さい画面のユーザーの場合スクロールしないと見ることが出来ない可能性がある感じがしていますから、縦長写真がある場合は長辺が400ピクセルぐらいのほうが良いと思います。画像が小さくなればそれだけ軽いページにもなりますしね。これも試行錯誤で圧縮率を調整して容量を減らしました。
アイデアはたくさんあっても、重いHPになると最後まで見てもらえないことが多いようですから、出来るだけ軽くすることを私は心がけています。
ありがとうございました。
具体的でとてもわかりやすかったです。
kennsakuyaさんのサイズを参考に作ってみたいと思います。
No.10
- 回答日時:
No.3の答えを書いたものです。
ただ今、下で紹介したサムネイル作成ソフトを使ってみました。
このソフトは一つのフォルダ内の画像を一気にサムネイルしてくれました。
サムネイルの画像と、実際の画像はフォルダが別れるらしいです。
アップロードすればすぐ使えるHTMLファイルも吐き出してくれました。
参考URL:http://www.vector.co.jp/soft/win95/net/se073892. …
No.9
- 回答日時:
私も同じような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
- 回答日時:
基本的には皆さんの意見と同じです。
私も同じようなHP(両親のHPなんですが)の編集をまかされています。
沢山の写真を見て頂こうとすると、まずは見本に小さい画像を用意して、その次に大きいものを用意する、といった感じにしています。
(この方法ですと、画像枚数が増えます)
こういった写真公開サイトになると、色々気を使います。
重くて開かないとやはりNo.7で kensakuyaさんがおっしゃっている通り、足が遠のきますし、なによりもストレスですからね。
ちなみに私が編集しているのは<http://kimagureflower.yy.mu/>ですが、
「重い」と言われたことはないですね。(但し、PC用壁紙は別)
後、画面の小さい方々の閲覧も一応意識してなるべく幅を小さめに作ってます。
なるべく……ですので、時々、見づらいこともあるんでしょうけども。(苦笑)
HP製作頑張ってくださいね。
No.6
- 回答日時:
書き忘れてしまいましたが、小さくした画像は、
ぼやけてしまいます。
ここで、シャープ処理をしますとよりはっきりとした
画像になる上に、jpg形式や、gif形式にした時、すこ~しですが、
データの重さが軽くなるようです。
素敵なHPになるといいですね。
ではでは~。
No.5
- 回答日時:
はじめまして、こんばんわ。
私がやっている方法を御紹介します。
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.4
- 回答日時:
画像関係だけなら
Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮(jpeg、GIF形式)
してくれます。
より綺麗にというならOPTPiX webDesignerが個人的にはお勧めです。
参考URL:http://www.vector.co.jp/swreg/catalogue/sr014856 …
No.3
- 回答日時:
Jpeg縮小ソフト
http://www.vector.co.jp/soft/win95/art/se146962. …
Jpegのごみヘッダを取り除くソフト
ぺーたーJpegプライベート
http://hp.vector.co.jp/authors/VA012657/index.htm
サムネイル作成ソフト(使ったこと無いのでどういうそふとかわかりません)
http://www.vector.co.jp/soft/win95/net/se073892. …
No.2
- 回答日時:
「FrontPage を使用して、サムネイルを作成することができます。
サムネイルとは、画像を縮小したもので、ユーザーがサムネイルをクリックして
ハイパーリンク先を表示すると、画像がフルサイズで表示されます。」の機能で作成。
ダウンロードに時間がかかるページの一覧を表示する機能で確認すれば良いのでは?
FrontPageをお使いでなくても同じような機能がある?と思います。
エディタを使われてないのでしたら写真を掲載されてるHPをご覧になって
参考にされては?
(画像を右クリックして「プロパティ」でサイズが表示されます。
No.1
- 回答日時:
はじめまして。
確かに表示は遅くなります。
ですので、元の画像を縮小して表示させるのではなく、
縮小画像も最初から用意しておき、
プレビューの時はそっちを使うようにしましょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同級生の顔を使ってエロ画像を...
-
「湾岸の千葉君」での秀里毅の写真
-
tiffファイルの解像度変更の仕方
-
至急回答お願いします、彼氏に...
-
iPhoneで写真を撮りました。 端...
-
整形外科などで、MRIやレントゲ...
-
可愛い子はプリクラが盛れない...
-
コンクリートが茶色になってし...
-
証明用写真の作り方をお教えく...
-
至急です!!答えてくださいお願...
-
pixivの画像を保存しようとした...
-
「強調」の対義語は何ですか?
-
EXIF情報がない場合はどのよう...
-
撮影日時をそのままに残して画...
-
スマホの写真を添付し、楽天で...
-
Word差し込み印刷 画像更新され...
-
CD-Rの中の写真を見るには
-
カシオデジカメ写真をパソコン...
-
マクロで画像挿入→エラー「リン...
-
カメラのRAW画像とビットマップ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
同級生の顔を使ってエロ画像を...
-
至急回答お願いします、彼氏に...
-
pixivの画像を保存しようとした...
-
可愛い子はプリクラが盛れない...
-
iPhoneで写真を撮りました。 端...
-
写真を脇汗のシミがあるように...
-
「強調」の対義語は何ですか?
-
マクロで画像挿入→エラー「リン...
-
tiffファイルの解像度変更の仕方
-
コンクリートが茶色になってし...
-
整形外科などで、MRIやレントゲ...
-
受信した添付写真を大きくする
-
写真の下に文字を入れるには?
-
至急です!!答えてくださいお願...
-
PCでPDFファイルを電子書籍のよ...
-
撮影日時をそのままに残して画...
-
EXIF情報がない場合はどのよう...
-
持っている写真の画質を上げる...
-
JPEGファイルに文字を入れたい
-
「湾岸の千葉君」での秀里毅の写真
おすすめ情報