• ベストアンサー
  • 暇なときにでも

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

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

共感・応援の気持ちを伝えよう!

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

  • ベストアンサー
  • 回答No.2
  • ARC
  • ベストアンサー率46% (643/1383)

まずはサイト全体の構成から始めるべきだと思います。 どんな軽量化テクニックをもってしても、それによって得られる効果には限度があるので、まずは最初に軽くて使い勝手がよくなるようなサイト全体のレイアウトを考慮することが肝心です。 例えば、トップページなどの「見せる」ことを重視するページでは、情報量を少なくして、高速表示させる。 製品一覧などの「情報を表示する」ページでは、多少遅くなっても、情報量を多くし、レイアウトにもこだわる。 というようにすれば、サイト全体としては「軽い」という評価が得られると思います。 トップページが重ければ、サイト全体の速度が遅いような印象を与えるばかりでなく、せっかく見に来てくれた人が嫌気がさして他のページを見に行ってしまうかもしれません。 とにかく、ページ1枚あたりの情報量を適切に設定すること。これが「軽いサイト」を作るためのコツだと思いますね。 次に「軽いページ」について。 ブラウザの動作としては、まずはHTMLのソースを読み込んで、それを表示する。次に<IMG>等のタグを解析して画像を表示する。 という順序になるので、まずはHTML部を軽く(サイズを小さく)すれば、見かけの表示速度を高速化することができます。 軽いHTMLを作るには、とりあえずは、HTMLの作成を、HPエディタ任せにしないことでしょうか。 HPエディタにもよりますが、作成したページのソースを表示させてみると、要りもしないタグが書かれていたり、一度設定すればいいだけのタグを何度も何度も使用していたりすることがあるので、そういった不要なタグをテキストエディタなどを使って、丹念に取り除くと、ページを軽くすることができます。 次に、画像を軽くする方法なんですが、まずは、大きな写真を使わない。使うときは、トップページに置かない。それ以外のページに置く場合でも、通常はサムネイルを表示させ、それをクリックしたときにだけ大きな画像を表示する。というようにすれば、体感速度はかなり速くなります。 やむを得ず、トップページなどに大きな画像を使用したいときは、画像の圧縮率を上げたり、画像を幾つかのパーツに分割して、読み込み速度を向上させたりするといいでしょう。 あと、使用する画像の色数がそれほど多くない場合、256色や16色に減色してから保存すれば、ファイルサイズを抑えることができます。 画像素材を選択する段階で、圧縮しやすい(似たような色が集まっている画像など)、減色しやすい(色数が多くない)などといった項目にこだわれば、なお軽いページになるんじゃないかと思います。

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

その他の回答 (4)

  • 回答No.5
  • ARC
  • ベストアンサー率46% (643/1383)

「サムネイル」ですが、直訳すると親指の爪 …ってのはあんまり関係なくて、要は「小さな画像」ってことです。 表示する画像とは別にそれを縮小した画像を用意しておき、普通はそれを表示させる。 閲覧者がその画像に興味を持てば、その縮小画像をクリックして、より大きな画像を見る。 って感じのインターフェース(操作感)を指します。 「画像を分割する」っていうのは、例えば、1枚の画像を四つ折りにする感じで、4つのパーツに切り分けます。 で、HTML上にてその4つを隣接するように配置し、最終的に1枚の絵として表示されるようにします。 このようにした場合、4つの画像がそれぞれ別々に読み込まれるため、回線を有効に活用することができるのです。 -1枚絵の場合- 「このデータ頂戴」→(しばらく待つ)→データが到着→「次のデータ頂戴」→(しばらく待つ)→… -分割した場合- 「このデータ頂戴」×4→(しばらく待つ)→データが到着→「次のデータ頂戴」→(待ってる間にも他のデータを受信)→データが到着→… イメージとしては、こんな感じです。 それでは! 頑張ってください!

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.4
  • ark2sp
  • ベストアンサー率25% (8/32)

解像度についてですが、単位になるdpiは「dot per nch」の略で1インチ当りのドットの構成要素数を表しています。HPでモニターで見せる(見る)ことを前提としているならば72dpi以上にする必要が無いと思います。これはモニターの表示解像度72dpiのためです。 但しビューワなどで拡大すると荒くなってしまいます。 とにかく文字と画像の両方が混在するページでは、画像サイズを30KB以内に納めないとテンポが悪くなると思います。 また、Photshopを使用しているのであれば、解像度と画像サイズを自由自在に操れます。また、圧縮方法もJPEG形式では10段階で選べプログレッシブJPEGを作ることも可能です。 ちなみにサムネールとは90x120ピクセル程度の約4~5KBの小さな画像のこです。これを1ページに数枚羅列し、その小さい画像にリンクを貼って、リンク先に大きな画像を配置させると画像をたくさん紹介するHPにとってガイドの役割を果たします。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.3
  • cricket
  • ベストアンサー率22% (107/466)

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.1
noname#4643
noname#4643

基本的なことですが、ファイルサイズの大きな画像を使わないことではないでしょうか。画面上で同じサイズに見える画像でも、GIF形式、PNG形式、JPEG形式ではそれぞれファイルサイズがちがってきますし、JPEG形式では圧縮率を変えることで相当ファイルサイズが変わってきます。 また、テーブルをあまり大きなサイズにしてしまうと表示に時間がかかります。気をつけた方がよいです。 大阪市役所のサイトのトップページをみましたが、画像を最小限にして、文字でメニューを構成しているのがスピーディな表示の要因だと思いました。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

関連するQ&A

  • ホームページの表示がおかしい

    http://www.city.sanjo.niigata.jp/index.html こちらのホームページですが、電話番号とFAX番号だけが表示されません。市役所の広報課に問い合わせたところ、以前も同じような問い合わせがあったが、特に異常が見られなかったので、そのままにしている、との事です。 http://www.city.sanjo.niigata.jp/fukusi/page00047.html http://www.city.sanjo.niigata.jp/fukusi/page00024.html この様に、表の中に電話番号とFAX番号が在る場合は、表の中の番号も表示されません。他の自治体のホームページでは、こんな事はありません。ブラウザが違うのかと思い、市役所で使用しているブラウザを訊ねたらIEだそうです。私はFirefoxです。市役所の方も他のブラウザでも確認してみる、とおっしゃいましたので、そこで電話を切り、私もIE8(Windows XPです)とGoogle Chromeで確認しましたが全く同じです。他の自治体のホームページでは、こんな事は全くありません。この場合、考えられる原因は何でしょうか? 私としては、通話が可能な旨、表示される事が多いので、Skypeが考えられるのですが。

  • 区役所は、お盆休みやっていますか?

    区役所は、お盆休みやっていますか? http://www.city.osaka.lg.jp/sumiyoshi/ 大阪市の上記の区に住んでいます。 電話が現在できなのですが、お盆休みとかはやっているのでしょうか? 宜しくお願いします。

  • 三ノ宮から一番近い大阪市立図書館は?

    こんにちは、 三ノ宮から、2号線を通っていく場合、一番近い大阪市立図書館は、どこでしょうか? 高速道路は使用しません。 http://www.oml.city.osaka.lg.jp/?page_id=119

  • ホームページにデジカメの画像が表示されません

    simpleテキストにHTMLを書き込んで、ホームページを勉強してます。デジカメで撮ったものを、photoshopでwebように、保存して○○○jpegのファイル形式で、テキストにも<img src="○○○.jpg">と書き込んで、同じフォルダーの中に入れておき、アップロードする時も最初のファイルは、index.htmlというプロバイダーの指示に、従っってます。画像以外は、ちゃんと、ネット上で見られます。接続しなければ、画像は表示されます。どうしたら、自分で写した画像がネットでみられるのでしょうか?デジカメでそのままのファイルをのせても、photoshopでwebように保存してもだめです。初心者です。よろしくお願いします。

    • ベストアンサー
    • Mac
  • ホームページの容量を減らす方法

     ホームページをアップロードしなければなりません。しかし、ホームページの容量が大きすぎます。  ホームページは、ホームページビルダーで作られています。  ホームページの容量は、63MBあります。  プロバイダーの容量は、50MBです。  13GBのオーバーです。    <原因>  写真が、デジカメで撮られていて、1枚の写真の容量が大きすぎます。1枚の写真に634kぐらいあります。写真の量も多いです。  そこで、1枚ごとの写真の容量を減らすフリーソフトはないでしょうか。    また、ホームページごと、一気に減らす方法はないでしょうか。そのようなフリーソフトはないでしょうか。  圧縮しても、ホームページが見られればよいです。  5月の連休中に、アップロードする予定がどんどん遅れています。困っています。  よい方法がありましたら、教えてください。よろしくお願いします。  

  • 口語文としてできるだけカジュアルに伝えたいのですが

    口語文としてできるだけカジュアルに伝えたいのですが、通じるか確認をお願いします。 私は大阪市で生まれました。 私は18歳まで大阪市に住んでいました。 19歳からは東京で大学生をしていました。 大学では法律を勉強しました。 卒業をして今はまた大阪市に住んでいます。 I’m from Osaka city. I was living in Osaka city until eighteen. I was a university student in Tokyo. I studied low in university. I’m living in Osaka city since I graduated.

  • 日付も印刷したい

    キャノンIXY400とphotoshop element2.0を使っていますが撮影時の日付が印刷されません。デジカメの達人(IBM)を使えばできます。日付を印刷する方法はないでしょうか。パソコンを使用せずダイレクトにプリンターで印刷すれば日付が印刷されますが文字が非常に小さく見えにくいのですが大きくする方法はないでしょうか?よろしくお願いします。

  • 県立高等職業技術専門校に入校する事について

    中学3年生です。中学卒業後、大阪府立東大阪高等職業技術専門校に入校しようと思っています。ものづくり基礎科は新規中学校卒業者を募集しているのでこの科目に入校する予定です。 この技術専門校に入校すると将来どうなりますか? ホームページ http://www.pref.osaka.lg.jp/tc-hiosaka/top/kamokusyoukai.html

  • 大阪府枚方市の妊婦健診費用について

    今回夫の仕事の都合で枚方市に転勤することになりました。 今まで住んでいたところは妊婦健診には14回分の「無料券」が使用でき(病院の必要としている検診で別途かかるものもありましたが)、検診料というものは実質なかったのですが、大阪府は妊婦健診が全国でも最低の助成額と聞き、転勤後の妊婦健診には一体どのくらいかかるのか、心配です。 大阪府枚方市では大体1回につき、イレギュラーな診療が発生した場合を除き、大体どのくらいの費用がかかりますか? 枚方市の助成金はホームページで確認しましたが、助成金を差し引いてどのくらいになるのかいまいちわかりません・・・。  (↓こちらで確認しました) http://www.city.hirakata.osaka.jp/freepage/gyousei/hoken-cen/bosi/ninsin.htm 病院によってもまちまちなのは存じていますが参考に教えていただければと思います。 よろしくお願い致します。

  • 英訳お願いします。

    (1)地下鉄で深江橋駅から大阪駅へ行くには、どう行けばいいですか? (2)中央線コスモスクエア方面行きに乗り、5つ目の駅の本町駅まで行って下さい。本町で御堂筋線新大阪方面行きに乗り換えて2つ目の梅田駅で降りてください。 (3)梅田駅と大阪駅はほぼ同じ場所にあります。 参考:大阪市交通局 路線図 http://www.kotsu.city.osaka.lg.jp/library/ct/image000000500/20150401_subway_rosenzu.png