画像を少しでも早く表示させるためには？

質問

こんにちは。HTMLについて質問いたします。
どなたかご存知の方いらっしゃいましたら、ぜひ回答をお願いいたします。

　画像の表示速度について

HTMLで画像を表示させるときにビルダーやドリームウィーバーなどのHTML自動生成ソフトを使用すると、勝手にwidth height 属性（画像の原寸）が付加されます。ですが自分で作成する場合には、当然ながら自分でサイズを調べて（というほど大げさなものではありませんが…）作成する必要があります。

そこで、質問なのですが、以前次の二つの話を聞いたことがありますので、お教えください。
（１）パーザー処理
HTMLのパーザー処理が余分な解析をすることなく、IEに対して素早く表示してくれるので原寸のサイズを書くこと自体は無意味。という話

（２）画像を早く表示させる
画像の原寸大のサイズをはじめから指定しておくことで早く画像が表示されるようになる。という話。

この二つの話は矛盾していますよね？？
どちらも「早く表示させるため」にサイズ指定はいらないといい、一方では必要といい…。厳密に言うとどちらがより早く表示させることができるのでしょうか？疑問に思ったので、質問させていただきました。
あと、「パーサー処理」ということばも耳に慣れていなくわかりませんので、教えてくださると嬉しいです。

回答No.6

natsuki_tk · ベストアンサー

(1)の意見ですが、
端的に、コードが増えればブラウザの分析箇所が増える
ので表示が遅くなるということだと思います。

しかしながら、今時のPCの処理速度はそんなに遅くないですし、
IE自体の反応も、この点の有無ではほとんど差が無いように思います。

一方で、サイズを指定を入れた場合のページ全体の表示速度の差は、
明らかに体感することができると思います。

よって、個人的には(2)の方が優勢かと思いますが。

厳密な話をすれば両者矛盾しないかもしれませんね。
たしかに画像そのものの表示なら(1)が早いかもしれません。
しかし、WEBサイトで画像だけを単体で表示させることはないでしょう。
ページ全体で考えれば(2)が早くなる。
そういったところだと思います。

お礼

ふむーーー。わかりやすいお話でした。
自分なりにもいろいろ調べてみて、あとこちらでの意見も聞きたかったので、とても参考になりました。自分は、サイズ指定をして作成したいと思います。ありがとうございました！

回答No.5

nyanchu

サイズ指定しないと、最初ギュってなって、画像が表示されたときバッて広がって、かっこわるーいページよく見ますよね。

お礼

サイズ指定しないってことはやっぱり結局そういうことなんですよね…。他の方が仰るように最近ではそれを体感するのはたしかに難しいかもしれませんが、サイズ指定をしたほうがいいということで納得できました。回答ありがとうございます。

回答No.4

saruthi

画像サイズの入力は重要です。
ブラウザーが表示処理をする際には、レイアウトを決めるのにサイズの計算をしています。テーブルに入れる、回り込みにする、などいろいろとやり方はありますが、まず最初にテキスト情報を読み込んだ後に、レイアウト情報を処理するため、画像を表示するのにサイズが入力していないと、一旦表示されたレイアウトから、更に画像のきちんと入っているレイアウトへ表示を切り替えることになります。
そしてcss情報は一番最後に処理されます。
また、すべての画像を読み込まないと表示しないこともあり、体感的な表示速度が遅く感じられます。

最近は通信環境もよくなり、あまり実感はできませんが、低速だった時代にはサイズもれによる表示速度の違いは本当に実感できました。

ただ、これは全体的な表示処理なので、厳密に画像だけの表示を早くするには、ありきたりですが、
画像ファイルサイズを小さくする
画像を切り刻んでテーブルで一枚の画像に仕上げる
（ボーダーラインがあり、かえって遅くなる場合もありますので注意！）
でしょうか？

お勧めなのは、lowsrcを指定することです。思いっきり画像を荒くしてサイズを軽くします。
<img src="表示したい画像" lowsrc="荒い画像">
としておくと、表示したい画像を読み込むまでの間、lowsrcの画像を表示しておいてくれるので、表示速度が速くなった気がします。

あと、お勧めなのは、

お礼

なるほどですねぇ～。勉強になります。強いて言うなら、最後の「あと、お勧めなのは、」←が、非常に気になるところではあったのですが…。回答いただきありがとうございました。

回答No.3

mrumesuke

実際に計測したわけではないのですが。。。

画像サイズが指定してあるとレイアウトが確定しますよね。そうすると画像転送完了前に文章だけでも読むことが出来るので、体感的には早く感じます。

そうでないページは、最悪の場合全ての画像の読み込みを待たないと読めたものでないこともあります。またレイアウトが動的に変化するため、その余分な処理のため結果的に遅くなることも考えられます。

お礼

そうですよね！そうですよね！！
私もそう思ったのですが、「ぱーさー処理」がどうも気になってしまったのでここでご質問させていただいた次第です。ありがとうございました。（ちょっとスッキリ…）

回答No.2

master-3rd

回答になってないかもしれませんが…

その程度の時間はさほど気にならないと思われます。その差を体感で感じることはむずかしいのでは?

それよりも、速さを求めるのなら、サムネイル表示→クリックでJavascript小窓で画像を原寸表示、等させたほうがよっぽと良いと思いますが…

回答になってなくてごめんなさい。

お礼

>その程度の時間はさほど気にならない

まったくその通りなのですが、あえてこだわってみたかったものでして…（スミマセン…）。回答いただきありがとうございました。

回答No.1

Yumikoit

画像を早く表示させる為、という回答ではありませんが。
画像の周りにテキスト配置した場合。
　画像サイズを指定していない場合
　　画像の場所を無視して最初にだらだらと表示され、画像を読み込んでから、ざざざ～と移動する感じ。
　　たくさん画像があったりすると上のほうから読み込まれるとは限らないので下の方が読みずらかったり。

　画像サイズを指定した場合。
　　画像の場所をちゃんと開けておいてテキストが読み込まれ、その後でゆっくりと画像が表示されるので表示が崩れない。

お礼

私個人としては画像サイズを指定したほうがよいのでは？と思っていたので、やっぱりなぁ～というのが正直なところです。ご回答いただきありがとうございました。