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

質問

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

回答No.2

ARC · ベストアンサー

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

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

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

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

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

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

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

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

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

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

補足

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

回答No.5

ARC

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

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

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

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

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

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

それでは！ 頑張ってください！

お礼

ARCさん本当にありがとうございます。前回も詳しい回答を頂きまして感謝しております。良いホームページを作れる様にがんばります。

回答No.4

ark2sp

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

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

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

お礼

ark2spさんありがとうございます。デジカメで８０万画そ
以上はHPで表示させるのに関係ないといった友達の話ぐらいしか知らなかった私にとって、とても具体的で、わかりやすいアドバイスでした

回答No.3

cricket

例えば写真をスキャナで取り込む場合で話しますと、
（僕の場合って事。）
Ａ４が読めるスキャナで写真を取ると数十ＭＢになります。写真以外の空白の所も取り込むとそうなります。
写真の所だけに範囲を絞っても数ＭＢ。とても重い。
１２００ｄｐｉで取り込むことも状況に寄ります。
僕は、３００ｄｐｉで写真を取り込み、取り込む範囲も限定し、しかも取り込むときの設定で、「出力サイズ」を１ｃｍ角位の小さい物にします。ここまでやって数十ＫＢ。
これをさらにＪＰＥＧで圧縮保存します。
ホームページに張り付ける、小さい写真ならこれで十分です。
後は用途に応じて、ｄｐｉとか出力サイズや諸々を加減します。サイズが大きな物は容量が大きくなるのも仕方がありません。

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

お礼

cricketさんありがとうございます。私はスキャナーで読むときは最大解像度にしてから、あとで圧縮するのだと思っていました。でもそれでは、圧縮に限界があるしどうしようと思っていたところでした。貴重なお返事ありがとうございました。

回答No.1

noname#4643

基本的なことですが、ファイルサイズの大きな画像を使わないことではないでしょうか。画面上で同じサイズに見える画像でも、GIF形式、PNG形式、JPEG形式ではそれぞれファイルサイズがちがってきますし、JPEG形式では圧縮率を変えることで相当ファイルサイズが変わってきます。

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

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

お礼

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