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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (10件)

ちょうど今同じようなHPを作り終わったところです!


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

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

お礼日時:2001/05/08 22:22

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



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

参考URL:http://www.vector.co.jp/soft/win95/net/se073892. …
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/05/08 22:12

私も同じような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/
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/05/08 22:14

基本的には皆さんの意見と同じです。


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

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

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

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

お礼日時:2001/05/08 22:17

書き忘れてしまいましたが、小さくした画像は、


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

素敵なHPになるといいですね。
ではでは~。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/05/08 22:19

はじめまして、こんばんわ。


私がやっている方法を御紹介します。

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">
でよけいな枠が消えます。

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

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

画像関係だけなら


Frontpage Expressは無料ですが画像をそれなりに綺麗に圧縮(jpeg、GIF形式)
してくれます。

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

参考URL:http://www.vector.co.jp/swreg/catalogue/sr014856 …
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/05/08 22:26

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. …
    • good
    • 0

「FrontPage を使用して、サムネイルを作成することができます。


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

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

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

はじめまして。



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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qhtmlで画像を2個ずつ並べていきたいです

htmlでホームページを作っています。
リンクつきのバナーをページに2個ずつ
□  □
□  □
↑このような感じで並べようと思い、
<img align="left" src="画像url" alt="名前" border="0">
<img align="right" src="画像url" alt="名前" border="0">
で並べてみました。
横の間隔はこれでうまく言っているのですが、
これを縦に並べていく時、上のバナーと下のバナーがくっついてしまいます。
そこにも一行分くらいの間隔を開けたいです。どうすればいいでしょうか?

Aベストアンサー

連投ご無礼します。
ご質問の件だけなら、imgタグ内に hspace="20" vspace="20" でできますね。
数値は適当に試してください。
表でcellpading="20"とかcellspacing="20" とかでも可能かと思います

Qホームページで縦と横の写真を載せる。

今写真を表示させるときに

<IMG style="width:400px;height:300px;src="20060628_001.jpg">

という記述をしているのですがこれだと縦の写真がつぶれて表示されてしまっています。
考えてみたのですがjavascriptを使用し縦の写真か横の写真かをフラグをもたせてサイズを指定できればいいのですが何せ初心者で知識が乏しく、Googleで「縦 横 写真 html」とか「縦 横 写真 ホームページ」とかで検索しても見つかりませんでした。

なのでこちらでお力を貸していただきたく質問をさせていただきました。
どうかよろしくお願いします。

明日までに提出しないといけないので「3.直ぐに~」を選択させていただきました。

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>画像を比率を保ったまま指定サイズ内に表示</title>
<script type="text/javascript"><!--
function resize(img){
var w = 400;//表示したい横サイズ
var h = 300;//表示したい縦サイズ
var rate = img.width/img.height;//表示する画像の横縦比
if(img.width>img.height){//横に長い画像
if(w/rate>h){//横にサイズを合わせると縦がはみ出る
w=h*rate;//縦サイズに合わせた横サイズにする
} else {
h=w/rate;//横サイズに合わせた縦サイズ
}
} else {
if(h*rate>w){
h=w/rate;
} else {
w=h*rate;
}
}
img.width=w;
img.height=h;
}
//-->
</script>
</head>
<body>
<!-- 外側の枠は目安のための仮の表示 -->
<div style="width:400px;height:300px;border: black solid 1px">
<img src="20060628_001.jpg" onload="resize(this)">
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>画像を比率を保ったまま指定サイズ内に表示</title>
<script type="text/javascript"><!--
function resize(img){
var w = 400;//表示したい横サイズ
var h = 300;//表示したい縦サイズ
var rate = img.width/img.height;//表示する画像の横縦比
if(img.width>img.height){//横に長い画像
if(w/rate>h){//横...続きを読む

Qブログにゲームの画像を載せるには

あるバーチャルサイトの専用ブログをはじめました。
そのサイトにあるゲームの紹介という事でゲーム画像を載せたいのですが、方法が分かりません。普通の画像ですと、右クリックで保存してアップロードすればできますが、実際のゲーム場面の画像はどのようにして保存するのでしょうか。よろしくお願いいたします。

Aベストアンサー

普通のスクリーンショットの撮り方がわからないということですか?
そうなのであれば参考URLを参照してください。

参考URL:http://hamashou.client.jp/winxpfaq/psc/index.html

Q芸能人の写真をフリーで掲載する方法はありますか?

絶対ダメだろうと思いますが、Webサイトに芸能人の写真をフリーで掲載する方法というのはありますでしょうか?

やはり、所属プロダクションとの有料契約とかになりますでしょうか?

Aベストアンサー

単に掲載するだけなら,
・自分で撮っていること (著作権の問題が発生しないこと)
・風景写真において写真の一部に群衆が映り込んでいて,「群衆の一部」としてたまたま有名人がいた場合
であれば,掲載できるでしょう。
観光地でそれなりに人がいる中で観光対象物の写真撮ったら,映ってしまった人の中によく見たらたまたま有名人がいた,というような場合です。
恐らく,「やりたいこと」とは全く異なるでしょうが。


なお,後者は,色々なサイトを見る限り,以下の判決文に「~とは異なり」と書かれている部分から導きだされているようです。
# 肖像権の方ですが。

東京地裁 平成16年(ワ)第18202号 損害賠償請求事件
http://www.translan.com/jucc/precedent-2005-09-27.html
第三 当裁判所の判断 - 一  争点(1) - (2) - イ - (イ)
> 本件写真は、原告の全身像に焦点を絞り込み、容貌を含めて大写しに撮影したものであるところ、このような写真の撮影方法は、撮影した写真の一部にたまたま特定の個人が写り込んだ場合や不特定多数の者の姿を全体的に撮影した場合とは異なり、上記(ア)のとおり被写体となった原告に強い心理的負担を覚えさせるものというべきである。

パブリシティ権に関しては,
最高裁 平成21年(受)第2056号 損害賠償請求事件
http://www.courts.go.jp/hanrei/pdf/20120202111145.pdf
3 - (1)
> 肖像等を無断で使用する行為は,(1)肖像等それ自体を独立して鑑賞の対象となる商品等として使用し,(2)商品等の差別化を図る目的で肖像等を商品等に付し,(3)肖像等を商品等の広告として使用するなど,専ら肖像等の有する顧客吸引力の利用を目的とするといえる場合に,パブリシティ権を侵害するものとして,不法行為法上違法となると解するのが相当である。
なので,営業目的などの場合で無ければ,問題になることは少ないかと。
# 私は法律を学んだことはないので,上記判決文他を当たった上で,利用は自身の判断でお願いします。

単に掲載するだけなら,
・自分で撮っていること (著作権の問題が発生しないこと)
・風景写真において写真の一部に群衆が映り込んでいて,「群衆の一部」としてたまたま有名人がいた場合
であれば,掲載できるでしょう。
観光地でそれなりに人がいる中で観光対象物の写真撮ったら,映ってしまった人の中によく見たらたまたま有名人がいた,というような場合です。
恐らく,「やりたいこと」とは全く異なるでしょうが。


なお,後者は,色々なサイトを見る限り,以下の判決文に「~とは異なり」と書かれている部分...続きを読む

QGIFの画像をアップロードしても、その画像が更新されないのですが・・・

私のHPでのGIF画像についてなんですが、私は以前から、同じ名前のまま中身だけ変えてアップロードして更新、ということをしていました。(直リンクをしてもらってるので)
今まではJPGでやっていて、最近になってGIFを触りだしたのですがどういうわけか、そのGIF画像だけ、更新されないんです。
自分で作ったものだけでなく、他の人が作ったものをダウンロードしたのでも更新されません。
たとえば、前からneko.gifという猫の絵柄のGIF画像を表示していて、それをneko.gifのまま、中身を犬の画像に置き換えようとしても画像がかわらないんです。
ちゃんとアップロードしましたし、サーバー側でもこちら側でも、プレビューをみたらちゃんと犬の絵柄に変わってるんです!
それなのに、HP上では表示されません。
ソースを確認しましたが、きちんと書き換えたものに更新されています。
何故かサーバー上のGIF画像だけ、更新されないんです。
それどころか、サーバーにある画像を削除しても、HP上では表示されたまま・・・
どうなってるのかまったくわかりません。
自分のパソコンの中で表示している時は、ちゃんと置き換わっているのですが・・・・
自分で思いつくことは全てやってみましたが、全部無駄でした。

何が原因なのか見当もつきません。困ってます。
思い当たることや、対処法はありませんか?

私のHPでのGIF画像についてなんですが、私は以前から、同じ名前のまま中身だけ変えてアップロードして更新、ということをしていました。(直リンクをしてもらってるので)
今まではJPGでやっていて、最近になってGIFを触りだしたのですがどういうわけか、そのGIF画像だけ、更新されないんです。
自分で作ったものだけでなく、他の人が作ったものをダウンロードしたのでも更新されません。
たとえば、前からneko.gifという猫の絵柄のGIF画像を表示していて、それをneko.gifのまま、中身を犬の画像に置き換えよう...続きを読む

Aベストアンサー

単純にキャッシュに残っているだけです。
(ブラウザは表示を高速化させるために過去のファイルを一時的にキャッシュに保存しています)

キャッシュのクリアでも良いですし、単に画像ファイルだけ表示させて更新(F5)でもクリアされます。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報