教えて下さい。
初めてHP作成をする者です。
小さい画像を最初に並べておいて、クリックすると新しいウインドウに
拡大写真が表示されるような形で写真を大量に載せたいのですが、
その場合画面が重くなって開くまでに時間がかかってしまうのではないか・・・?
その為に縮小画像の時は画像サイズを小さく設定し直して掲載した方がいいのか?
ページをいくつかに分けて10画像くらいずつ載せた場合は1ページに全画像載せるより、開くのに時間かかからないのではないか?
写真掲載によって開くのが遅くなるのを防ぐ素敵なアイディアを教えて下さい。
よろしくお願いします。
No.1
- 回答日時:
はじめまして。
確かに表示は遅くなります。
ですので、元の画像を縮小して表示させるのではなく、
縮小画像も最初から用意しておき、
プレビューの時はそっちを使うようにしましょう。
No.2
- 回答日時:
「FrontPage を使用して、サムネイルを作成することができます。
サムネイルとは、画像を縮小したもので、ユーザーがサムネイルをクリックして
ハイパーリンク先を表示すると、画像がフルサイズで表示されます。」の機能で作成。
ダウンロードに時間がかかるページの一覧を表示する機能で確認すれば良いのでは?
FrontPageをお使いでなくても同じような機能がある?と思います。
エディタを使われてないのでしたら写真を掲載されてるHPをご覧になって
参考にされては?
(画像を右クリックして「プロパティ」でサイズが表示されます。
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.4
- 回答日時:
画像関係だけなら
Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮(jpeg、GIF形式)
してくれます。
より綺麗にというならOPTPiX webDesignerが個人的にはお勧めです。
参考URL:http://www.vector.co.jp/swreg/catalogue/sr014856 …
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.7ベストアンサー
- 回答日時:
ちょうど今同じようなHPを作り終わったところです!
皆さんの説明は専門的すぎる感じがしますので、初心者同士としてアドバイスすると・・・
50枚ほどあるのでしたら、いくつかのページにわけた方が見やすいと思います。私は小さい写真(サムネイルといいます)横5枚、縦3段の15枚を1つのページにのせました。サムネイルの大きさは長辺100ピクセルにしました。サムネイルは大きな写真をフォトショップというソフトで縮小して作りました。たくさんあるとすごく手間がかかります。
保存するときにjpeg形式で圧縮率を高くすると容量が減ります。サムネイルは100ピクセルぐらいだと画像が劣化してもあまりわかりません。
クリックして新しいウィンドウに表示する大きな写真は、長辺を480ピクセルにしましたが、縦長の写真だと小さい画面のユーザーの場合スクロールしないと見ることが出来ない可能性がある感じがしていますから、縦長写真がある場合は長辺が400ピクセルぐらいのほうが良いと思います。画像が小さくなればそれだけ軽いページにもなりますしね。これも試行錯誤で圧縮率を調整して容量を減らしました。
アイデアはたくさんあっても、重いHPになると最後まで見てもらえないことが多いようですから、出来るだけ軽くすることを私は心がけています。
ありがとうございました。
具体的でとてもわかりやすかったです。
kennsakuyaさんのサイズを参考に作ってみたいと思います。
No.8
- 回答日時:
基本的には皆さんの意見と同じです。
私も同じようなHP(両親のHPなんですが)の編集をまかされています。
沢山の写真を見て頂こうとすると、まずは見本に小さい画像を用意して、その次に大きいものを用意する、といった感じにしています。
(この方法ですと、画像枚数が増えます)
こういった写真公開サイトになると、色々気を使います。
重くて開かないとやはりNo.7で kensakuyaさんがおっしゃっている通り、足が遠のきますし、なによりもストレスですからね。
ちなみに私が編集しているのは<http://kimagureflower.yy.mu/>ですが、
「重い」と言われたことはないですね。(但し、PC用壁紙は別)
後、画面の小さい方々の閲覧も一応意識してなるべく幅を小さめに作ってます。
なるべく……ですので、時々、見づらいこともあるんでしょうけども。(苦笑)
HP製作頑張ってくださいね。
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.10
- 回答日時:
No.3の答えを書いたものです。
ただ今、下で紹介したサムネイル作成ソフトを使ってみました。
このソフトは一つのフォルダ内の画像を一気にサムネイルしてくれました。
サムネイルの画像と、実際の画像はフォルダが別れるらしいです。
アップロードすればすぐ使えるHTMLファイルも吐き出してくれました。
参考URL:http://www.vector.co.jp/soft/win95/net/se073892. …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(悩み相談・人生相談) 著作権法違反になりますか? 6 2023/03/28 19:08
- その他(恋愛相談) 出会いアプリの写真掲載 拾い画像はダメ? 1 2023/01/04 12:36
- その他(買い物・ショッピング) フリマサイトで画像引用の件です 4 2023/03/28 18:14
- Web・クリエイティブ フリーランスでフードライターを目指している者です。 色々なお店に取材に行って、写真を撮り、サイトに少 4 2023/06/23 06:59
- メルカリ メルカリの警告について、どうすれば除外できますか? 3 2023/01/25 19:56
- その他(パソコン・スマホ・電化製品) 圧縮ファイル解像について 7 2023/07/31 08:42
- iCloud iCloudのストレージを減らしたい...。 5 2022/08/09 20:20
- リフォーム・リノベーション 業者のホームページに施工例が掲載される場合 2 2022/03/26 09:45
- ガーデニング・家庭菜園 この木の名前を教えてください【画像3枚、一括投稿】 5 2022/04/22 11:16
- 教えて!goo 質問ページがエラーになるサイト 1 2022/05/29 20:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同級生の顔を使ってエロ画像を...
-
至急回答お願いします、彼氏に...
-
pixivの画像を保存しようとした...
-
JPEGファイルに文字を入れたい
-
整形外科などで、MRIやレントゲ...
-
スマホで撮った写真をガラケー...
-
可愛い子はプリクラが盛れない...
-
tiffファイルの解像度変更の仕方
-
証明用写真の作り方をお教えく...
-
グーグル画像検索にかからない...
-
A4の用紙にExcelで写真の貼り方...
-
iPhoneで写真を撮りました。 端...
-
マクロで画像挿入→エラー「リン...
-
「湾岸の千葉君」での秀里毅の写真
-
至急です!!答えてくださいお願...
-
写真アップロードの仕方 送り方
-
「強調」の対義語は何ですか?
-
ロープで縛ってパフォーマンス
-
HIS RIS PACS のRISについて
-
【画像添付します。】5w2日で胎...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
同級生の顔を使ってエロ画像を...
-
iPhoneで写真を撮りました。 端...
-
至急回答お願いします、彼氏に...
-
JPEGファイルに文字を入れたい
-
マクロで画像挿入→エラー「リン...
-
可愛い子はプリクラが盛れない...
-
pixivの画像を保存しようとした...
-
「強調」の対義語は何ですか?
-
tiffファイルの解像度変更の仕方
-
受信した添付写真を大きくする
-
至急です!!答えてくださいお願...
-
撮影日時をそのままに残して画...
-
持っている写真の画質を上げる...
-
PCでPDFファイルを電子書籍のよ...
-
証明用写真の作り方をお教えく...
-
「湾岸の千葉君」での秀里毅の写真
-
整形外科などで、MRIやレントゲ...
-
写真の下に文字を入れるには?
-
エクセル・ワードの表を画像化...
-
VBAの内容の修正をお願いさせて...
おすすめ情報