HTML 4 時代に <img> 要素の width / height 属性の記述を避けていた理由

昨今、累積レイアウトシフト防止の観点から <img> 要素には width / height 属性を付けた方が望ましいとされています。しかし複数の記事(日本/海外問わず)において「レスポンシブ Web デザインの普及により一時期は両属性を書かない時代があった」という解説が行われていることには違和感があります。

私が HTML を書き始めたのは2001年ですが、昔の個人サイトのアーカイブを見返すと2003年にはすでに width / height 属性を意識的に避けていた形跡があります。レスポンシブ Web デザイン以前の時代にどういった理由で両属性を避けていたのかを思い返してみます。

<img> 要素自体は初期の HTML から存在していたのですが、width / height 属性が仕様に追加されたのは HTML 3.2 でのことです。当時は両方の属性を指定することで this allows user agents to reserve screen space for the image before the image data has arrived over the network(W3C) とされていました。

HTML 3.2 → HTML 4 の進化では「構造とプレゼンテーションの分離」が掲げられ、多くのプレゼンテーションな要素や属性が非推奨となりました。しかしすべてがそうなったわけではありません。<font> 要素が非推奨となった一方で <td> 要素の align 属性や <b> 要素などは Strict DTD であっても使えていましたから、中途半端に思えたものです。画像やオブジェクトの width / height 属性もそういった類のものと認識されていました。HTML 4.0 が勧告された直後の1998年5月に Ian Hickson 氏がこんな意見を残しています。

Since 'height' and 'width' on IMG are "override" heights and widths, they certainly seem like "attributes that concern ... presentation".

Are IMG height/width deprecated? Why not?(lists.w3.org)

The HTML4 spec changed this, and in HTML4 height and width are _override_ dimensions. IOW, they can be used to change the dimensions of the image.

(中略)

This is why I believe that the errata should point out that the attribute index is wrong, and that height and width *are* deprecated. The functionality of height and width is available in CSS1.

Re: Are IMG height/width deprecated? Why not?(lists.w3.org)

結局この意見は W3C 内での同意を得られなかったのか、HTML 4.01 でも修正はされずに width / height 属性が残されたのですが、一方で HTML 4.01 のサブセットである ISO/IEC 15445:2000(ISO-HTML)では除外されました。Web 制作で ISO-HTML そのものを採用する事は皆無であっても、その考え方を部分的に取り入れて「HTML 4.01 Strict DTD 的に有効であろうとも Visual presentation(W3C) である width / height 属性は使うべきではない」として使用を避ける人々は私を含めてそれなりに存在していたと記憶しています。

もちろん当時誰もがそのような主義を持っていたわけではなく、1990年代後半に img要素にwidthとheightが記述されているか必ずチェックしていた(parashuto.com)ケースもあったようです。このあたりは思想上の問題だけでなく、当時のブラウザ状況的に CSS へ移行できずやむなく HTML 属性に書いていた人もいたと思います。

もうひとつの理由はブラウザの描画です。小さな画像に width / height 属性を書くと、画像が表示されない場合(代替テキストが表示される場合)に alt 属性値が切れてしまう現象がありました。160×160px の画像に対して width / height 属性を記述しない場合・した場合それぞれのケースを Netscape Communicator 4.73 と Internet Explorer 6 で表示した様子を以下に示します。

サムネイル画像
Netscape Communicator 4.73 での表示。画像に width / height 属性を記述しない場合は代替テキストが表示されているが、両属性を記述した場合は枠線とアイコンによりそこに画像があることのみ判別でき、代替テキストは表示されない。オリジナル画像
サムネイル画像
Internet Explorer 6 での表示。width / height 属性の記述の有無に関わらず代替テキストが画面に表示されている。オリジナル画像

IE 6 は正常に表示されていることが分かりますが、さらに小さな画像だと IE もやはり切れてしまっていました。前述のように当時の width / height 属性の役割は「画像リソース取得前にそのスペースを予約しておくこと」だったため、代替テキストの表示と相性が悪かったと言えます。

こういった、思想的な理由とブラウザ表示上の理由との両面から width / height 属性の記述を避ける考え方が1990年代後半から存在していたのです。