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

質問

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

　画像の表示速度について

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

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

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

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

回答No.4

saruthi

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

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

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

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

あと、お勧めなのは、

お礼

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