訪れたサイトは美しいレイアウトをしているようだ。
ブラウザがファイルを読み文章が右揃えで表示されはじめているのが見える。まだ画像が何も表示されていないが目は勝手に文章を追っていた。そしてその数瞬後、画像が表示されはじめた時、私の心には大きな落胆があった。先ほどまで自分が読んでいた文章があった場所が表示されはじめた画像に追いやられ、文章が画像に踊らされるように再配置されていく。画像の容量は巨大で、何枚も配置されているようだ。画面の下の方にはまだ文章が踊っているのが見えた。
あぁ、ここの管理者は
<img>タグに "width"/"height" 属性があることを知らないのだ。
ウェブブラウザは最初に HTML ファイルの中身を読み込みます。そして画像表示を意味するタグ <img>
があった場合、それに従い画像ファイルをダウンロードし描画します。
つまり、単純な文字列と画像との読み込みにはタイムラグがあると言うことになりますね。このタイムラグがもたらす弊害が上の文章です。画像が読み込まれるたびに変形するという不格好なページになってしまうというわけです。
この弊害は画像表示を指示するタグである <img> の width (画像の幅)属性と height (画像の高さ)属性を使用することによって回避することができます。
書式は下の通りです。また、"***" には画像の幅/高さのピクセル数が入ります。画像ビューワー等で調べるのが一番でしょう。
<img src="hogehoge.jpg" width="***" height="***">
このように記述しておけばブラウザはその HTML を読み込んだ時にその画像の幅/高さを理解しますので、画像ファイルを読み込む前にその画像用の面積を確保します。よって、文章等が読み込まれる時に画像を読み込んだ後のレイアウト/位置で描画されることになり、画像が読み込まれるたびに再レイアウトされることなく描画できることになります。
また、この記述をしておくと体感的な読み込みスピードも上がるという利点もあるようです。