Takazudo Clipping*

imgのwidthとheightはいるのか

共通部分のimgにはwidthとheightは(X)HTMLで指定しないようにしたほうがいいんではないか。

img要素にwidthとheightを指定するのはかなり当たり前かのようにされてるけど、widthとheightをつけるのはめんどいし、(X)HTMLの仕様書でも#IMPLIED（必須じゃない）になってる。
ではなぜwidthとheightを指定するのかというと、ブラウザが(X)HTMLを読んでいる途中でも、imgにwidthとheightが指定されていれば、そのimgの高さや幅ぶんのスペースをとってくれるため、描画がスムーズになる。
例えばくそ長いページで途中に画像がぼんぼんあって、そいつらにwidthとheightが指定されてなかったら、よーしスクロールして読むぞーとしたの方に行こうと思いきや、まだロードされてなかった画像が順々にロードされていき、あららららと今読んでいたテキストが下にずれていってしまうというわけ。
文中にある画像は仕方ない。指定しようというわけになるわけですが、サイトの中には、共通部分がある。それはヘッダやフッタの中にあるロゴやナビゲーションのための画像で、こいつらは、CSSでheightとwidthを指定してやれば、別に(X)HTMLでページごとに指定してあげちゃわなくても良いのではないのか。

widthとheightをimgから除くメリットはちょっとだけある。
それは、画像が無かった時の、そのimgに指定されたエリアの表示。
バナーとかがあるんだけど、実際のその画像がありませんでしたとかいうとき、その場所は×印なんかが出たりして、変わりにalt属性に指定したテキストが表示されるのはよく見るだろうけど、（というか画像がないとか言うのはサイトとしてダメではあるけど）そのテキスト表示は、widthとheightが指定してある場合、その表示領域の中にしか表示されず、入りきらないテキストは見えなくなってしまう。この時、imgにwidthとheightが指定されていなければ、テキストの長さにより、×印がでてる画像エリアがでかくなったり小さくなったりするのです。つまり、アクセシビリティ的にはこっちのうがよい。

例えばこんなの。widthとheightを指定した画像