-PR-
解決
済み

ホームページを早く表示させる方法はあるのですか

  • 暇なときにでも
  • 質問No.4835
  • 閲覧数202
  • ありがとう数8
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 86% (26/30)

ホームページ作成の初心者なのですが、写真などの圧縮はIBMのデジカメの達人やPHOTOSHOPなどを使っています。
いろいろなHPを見ていると、すごく表示が早いものをよく見かけるのですが、何か特別な技術があるのでしょうか。最近では大阪市役所http://www.city.osaka.jp/whatsn.htmlosaka.jp/whatsn.htmlも早いと思いました。プロバイダーや回線に100%まかせるしかないのか、圧縮でも特別な技術があるのか、是非知りたいです。
通報する
  • 回答数5
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.2
レベル13

ベストアンサー率 46% (643/1383)

まずはサイト全体の構成から始めるべきだと思います。

どんな軽量化テクニックをもってしても、それによって得られる効果には限度があるので、まずは最初に軽くて使い勝手がよくなるようなサイト全体のレイアウトを考慮することが肝心です。

例えば、トップページなどの「見せる」ことを重視するページでは、情報量を少なくして、高速表示させる。
製品一覧などの「情報を表示する」ページでは、多少遅くなっても、情報量を多くし、レイアウトにもこだわる。 というようにすれば、サイト全体としては「軽い」という評価が得られると思います。
トップページが重ければ、サイト全体の速度が遅いような印象を与えるばかりでなく、せっかく見に来てくれた人が嫌気がさして他のページを見に行ってしまうかもしれません。

とにかく、ページ1枚あたりの情報量を適切に設定すること。これが「軽いサイト」を作るためのコツだと思いますね。

次に「軽いページ」について。

ブラウザの動作としては、まずはHTMLのソースを読み込んで、それを表示する。次に<IMG>等のタグを解析して画像を表示する。
という順序になるので、まずはHTML部を軽く(サイズを小さく)すれば、見かけの表示速度を高速化することができます。

軽いHTMLを作るには、とりあえずは、HTMLの作成を、HPエディタ任せにしないことでしょうか。
HPエディタにもよりますが、作成したページのソースを表示させてみると、要りもしないタグが書かれていたり、一度設定すればいいだけのタグを何度も何度も使用していたりすることがあるので、そういった不要なタグをテキストエディタなどを使って、丹念に取り除くと、ページを軽くすることができます。

次に、画像を軽くする方法なんですが、まずは、大きな写真を使わない。使うときは、トップページに置かない。それ以外のページに置く場合でも、通常はサムネイルを表示させ、それをクリックしたときにだけ大きな画像を表示する。というようにすれば、体感速度はかなり速くなります。

やむを得ず、トップページなどに大きな画像を使用したいときは、画像の圧縮率を上げたり、画像を幾つかのパーツに分割して、読み込み速度を向上させたりするといいでしょう。

あと、使用する画像の色数がそれほど多くない場合、256色や16色に減色してから保存すれば、ファイルサイズを抑えることができます。
画像素材を選択する段階で、圧縮しやすい(似たような色が集まっている画像など)、減色しやすい(色数が多くない)などといった項目にこだわれば、なお軽いページになるんじゃないかと思います。
補足コメント
haru1

お礼率 86% (26/30)

大変貴重なご意見ありがとうございます。初歩的な質問で申し訳ございませんが[サムネイル]とは何でしょうか。
それと[画像を幾つかのパーツに分割して]というのは、1枚の写真を分割するという意味でしょうか。現在ホームページビルダーを使っていますが、レイアウト枠というのがそれにあたるのかもしれませんが、よくわかりません。
またおひまなときにお返事いただければ幸いです
投稿日時 - 2000-07-09 22:06:35
-PR-
-PR-

その他の回答 (全4件)

  • 回答No.1

基本的なことですが、ファイルサイズの大きな画像を使わないことではないでしょうか。画面上で同じサイズに見える画像でも、GIF形式、PNG形式、JPEG形式ではそれぞれファイルサイズがちがってきますし、JPEG形式では圧縮率を変えることで相当ファイルサイズが変わってきます。 また、テーブルをあまり大きなサイズにしてしまうと表示に時間がかかります。気をつけた方がよいです。 大阪市役所のサイトのトップ ...続きを読む
基本的なことですが、ファイルサイズの大きな画像を使わないことではないでしょうか。画面上で同じサイズに見える画像でも、GIF形式、PNG形式、JPEG形式ではそれぞれファイルサイズがちがってきますし、JPEG形式では圧縮率を変えることで相当ファイルサイズが変わってきます。

また、テーブルをあまり大きなサイズにしてしまうと表示に時間がかかります。気をつけた方がよいです。

大阪市役所のサイトのトップページをみましたが、画像を最小限にして、文字でメニューを構成しているのがスピーディな表示の要因だと思いました。
お礼コメント
haru1

お礼率 86% (26/30)

ありがとうございます。たしかに良く見てみると市役所のページは写真が少なく、写真のあるページは少し重たかったです。最初の方でスピードが速いと全体に早く感じるという心理が働くということに気が付きました。
投稿日時 - 0000-00-00 00:00:00

  • 回答No.3
レベル12

ベストアンサー率 22% (107/466)

例えば写真をスキャナで取り込む場合で話しますと、 (僕の場合って事。) A4が読めるスキャナで写真を取ると数十MBになります。写真以外の空白の所も取り込むとそうなります。 写真の所だけに範囲を絞っても数MB。とても重い。 1200dpiで取り込むことも状況に寄ります。 僕は、300dpiで写真を取り込み、取り込む範囲も限定し、しかも取り込むときの設定で、「出力サイズ」を1cm角位の小さい物にしま ...続きを読む
例えば写真をスキャナで取り込む場合で話しますと、
(僕の場合って事。)
A4が読めるスキャナで写真を取ると数十MBになります。写真以外の空白の所も取り込むとそうなります。
写真の所だけに範囲を絞っても数MB。とても重い。
1200dpiで取り込むことも状況に寄ります。
僕は、300dpiで写真を取り込み、取り込む範囲も限定し、しかも取り込むときの設定で、「出力サイズ」を1cm角位の小さい物にします。ここまでやって数十KB。
これをさらにJPEGで圧縮保存します。
ホームページに張り付ける、小さい写真ならこれで十分です。
後は用途に応じて、dpiとか出力サイズや諸々を加減します。サイズが大きな物は容量が大きくなるのも仕方がありません。

ページの構成や、設計も複雑になれば表示を重たくします。
でも、表示速度を犠牲にしても表現したい画像のイメージを大切にするなら、それはそれで正しい姿とも思います。
頑張って下さい。
お礼コメント
haru1

お礼率 86% (26/30)

cricketさんありがとうございます。私はスキャナーで読むときは最大解像度にしてから、あとで圧縮するのだと思っていました。でもそれでは、圧縮に限界があるしどうしようと思っていたところでした。貴重なお返事ありがとうございました。
投稿日時 - 0000-00-00 00:00:00
  • 回答No.4
レベル7

ベストアンサー率 25% (8/32)

解像度についてですが、単位になるdpiは「dot per nch」の略で1インチ当りのドットの構成要素数を表しています。HPでモニターで見せる(見る)ことを前提としているならば72dpi以上にする必要が無いと思います。これはモニターの表示解像度72dpiのためです。 但しビューワなどで拡大すると荒くなってしまいます。 とにかく文字と画像の両方が混在するページでは、画像サイズを30KB以内に納めないとテ ...続きを読む
解像度についてですが、単位になるdpiは「dot per nch」の略で1インチ当りのドットの構成要素数を表しています。HPでモニターで見せる(見る)ことを前提としているならば72dpi以上にする必要が無いと思います。これはモニターの表示解像度72dpiのためです。
但しビューワなどで拡大すると荒くなってしまいます。
とにかく文字と画像の両方が混在するページでは、画像サイズを30KB以内に納めないとテンポが悪くなると思います。

また、Photshopを使用しているのであれば、解像度と画像サイズを自由自在に操れます。また、圧縮方法もJPEG形式では10段階で選べプログレッシブJPEGを作ることも可能です。

ちなみにサムネールとは90x120ピクセル程度の約4~5KBの小さな画像のこです。これを1ページに数枚羅列し、その小さい画像にリンクを貼って、リンク先に大きな画像を配置させると画像をたくさん紹介するHPにとってガイドの役割を果たします。
お礼コメント
haru1

お礼率 86% (26/30)

ark2spさんありがとうございます。デジカメで80万画そ
以上はHPで表示させるのに関係ないといった友達の話ぐらいしか知らなかった私にとって、とても具体的で、わかりやすいアドバイスでした
投稿日時 - 0000-00-00 00:00:00
  • 回答No.5
レベル13

ベストアンサー率 46% (643/1383)

「サムネイル」ですが、直訳すると親指の爪 …ってのはあんまり関係なくて、要は「小さな画像」ってことです。 表示する画像とは別にそれを縮小した画像を用意しておき、普通はそれを表示させる。 閲覧者がその画像に興味を持てば、その縮小画像をクリックして、より大きな画像を見る。 って感じのインターフェース(操作感)を指します。 「画像を分割する」っていうのは、例えば、1枚の画像を四つ折りにする感じで、4つの ...続きを読む
「サムネイル」ですが、直訳すると親指の爪 …ってのはあんまり関係なくて、要は「小さな画像」ってことです。
表示する画像とは別にそれを縮小した画像を用意しておき、普通はそれを表示させる。 閲覧者がその画像に興味を持てば、その縮小画像をクリックして、より大きな画像を見る。 って感じのインターフェース(操作感)を指します。

「画像を分割する」っていうのは、例えば、1枚の画像を四つ折りにする感じで、4つのパーツに切り分けます。
で、HTML上にてその4つを隣接するように配置し、最終的に1枚の絵として表示されるようにします。

このようにした場合、4つの画像がそれぞれ別々に読み込まれるため、回線を有効に活用することができるのです。

-1枚絵の場合-
「このデータ頂戴」→(しばらく待つ)→データが到着→「次のデータ頂戴」→(しばらく待つ)→…

-分割した場合-
「このデータ頂戴」×4→(しばらく待つ)→データが到着→「次のデータ頂戴」→(待ってる間にも他のデータを受信)→データが到着→…

イメージとしては、こんな感じです。

それでは! 頑張ってください!
お礼コメント
haru1

お礼率 86% (26/30)

ARCさん本当にありがとうございます。前回も詳しい回答を頂きまして感謝しております。良いホームページを作れる様にがんばります。
投稿日時 - 0000-00-00 00:00:00
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

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

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

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ