EC studio EC studio デザインブログ

2008年08月14日投稿者:谷 拓樹

img要素のwidth,height属性は指定しない

img要素におけるwidth,height属性の指定というのはHTMLを勉強しはじめたときから「必須」のものであると考える人が多いと思うのですが、
これは「必須」ではありません。

また弊社では社内のガイドラインとして
「img要素にはwidth,height属性は指定しない」としました。
この方が現状メリットが大きいと考えたからです。

width,height属性の指定が「必須」であるか「任意」であるか

結論からいうと、仕様書上「任意」とされています。
これは弊社サイトで多く採用されている XHTML1.0(Transitional)においてはもちろん、strictであれ、HTML4.01であれ「任意」とされているのは同じです。

しかしそれがなぜ「必須」というような流れになったか?
その大きな理由としてはNetscape Navigator 4.xのような今となっては古くなったブラウザへの配慮がありました。

Netscape Navigator 4.xについていえば、width,height属性が指定されていない場合にはHTMLのレンダリングに不具合が生じる(文書が整形できなくなる)というようなものがあるらしく、またその他古いブラウザにおいても未指定の場合には「レンダリングが遅くなる」というのもありました。

つまり「ルール的」に必須というよりは「マナー的」に必須というものだったのだと思いますが、今の主要ブラウザにおいては未指定によるレンダリング速度の低下というのはほとんど無いようです。

*Web Designing誌2004年8月号の特集記事「なぜ表示は遅くなるのか」で、100枚の異なる画像を表示させる際に、widht/height属性を与えた場合と与えなかった場合でページの表示速度がどう違うかの検証が紹介されています。それによると、ほとんどのブラウザで属性を“指定しない”方が1~2割速いという結果になっていました。まぁ、1秒未満の差であり、計測の誤差も考慮する必要はあるものの、「widht/height属性を指定する方が表示が速くなる」は、すでに神話と言っていいかも知れません。
強調,引用,グループ化,画像などの要素 — ごく簡単なHTMLの説明

こういった検証結果もあるようで、もはや指定しないことのデメリットについては「迷信」と考える人も増えているようです。

width,height属性の指定をしてしないことの大きなメリット

それは「画像の差し替え時にHTMLファイルの修正が不要となる」ことです。

サイト上のプロモーション、ユーザーへのアプローチを変えるためにキャッチとなる画像を変更したりということが多々あるのですが、見せ方によって画像のサイズが変わってしまう場合もあります。

レイアウトはそのままで画像のサイズだけが少し変わるというケースがあったとして、その画像(img要素)に対してwidth,height属性を指定してる場合には、画像ファイルの差し替えだけでなくHTMLファイルの方も修正しないといけません。

小さな作業ではあるのですが、これが積もると馬鹿にはできない時間の消費です。急遽画像を差し替えたいという場合にも対応が遅れてしまいますね。

これらの情報やメリットを踏まえて、古いブラウザに対しては、最低限の情報が与えられるようなコードを書くべきだとは思うのですが、このwidth,height属性の点についてはそれほど意識する必要はないという結論にいたりました。
単純に指定が面倒くさい、という動機であったとしても指定しない方がメリットが強くなっているように思いますので、よろしければ参考にしてください。

参考:
強調,引用,グループ化,画像などの要素 — ごく簡単なHTMLの説明
imgのheightとwidthは必須か?
imgにwidthとheightを指定しない理由 – Webtech Walker
Lucky bag::blog: width 属性と height 属性の話


関連した記事:

この記事へのコメント

これは、時と場合によると付け加えておいた方が良いと思います。
きちんとしたデザイン性を考えた場合、(せめて)widthの指定は欠かせない要素です。
写真をUPする人が、写真を加工せずにUPしてしまったとしたら?
巨大画像に一時でもWEBデザインを損なう可能性があります。
なので一概に指定しなくても良いと言う物ではありません。

投稿者: 通りすがりのWEBデザイナー | 2009/3/3 火曜日 15:11:31

おっしゃる通り、ケースバイケースではあるかと思いますし、また本記事においては省略が絶対なものである、ということをお伝えしたわけではありません。

またそのように写真をアップするケースCMSなどを利用したケースが主かと思いますが、
その場合にはアップローダー側で挿入するHTMLタグにwidthとheightが設定されているものがほとんどかと思います。

またリサイズ無しにそもそもの大きな画像をwidthで制御する、というのもそのサイズによっては
それが最適な方法であるかというとそうでもないように思いますね。

とはいえ時と場合による、という点については追記させていただきます。ありがとうございます。

投稿者: 谷 拓樹 | 2009/3/3 火曜日 21:31:05

気になる記事があったので、載せておきます。

img(画像)には文字色を指定しよう – Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2010/02/23/7451

この記事の下の方に、widthとheightは指定した方がいいと書いてあります。理由は処理速度と画像非表示の時の問題らしいです。

処理速度に関しては、Web Designing誌2004年8月号のデータを逆のこと言ってますね。(でも具体的なデータはない)

画像非表示の時レイアウト崩れは、少し試してみましたが、確認できませんでした。
しかし、環境によっては起こりうる可能性があるのかもしれませんね…。
むむむ~。

ちなみに、個人的にはしっかりwidthとheightを指定してしまいます。だからこの記事読んだ時は衝撃的でした。画像を入れ替えるだけでサイズそのままでアップできるのはいいですよね。覚えておこうと思います!

投稿者: シマ | 2010/2/24 水曜日 16:33:38

シマさん
情報ありがとうございます。
こちらの記事の内容についてですが、どれが正解かというのは難しいですが

結論としては、昨今話題になっているページの処理速度向上・高速化を徹底するなら
widthとheightを指定する方が好ましいと思います。
ただその効果がどのくらいか、というのはユーザーの環境にもよりますので
ナローバンド環境のユーザーや古いブラウザを対象にするなら、指定しておく方がベターです。

僕の書いた記事としては「効率化」という面で、widthとheightを指定しないという選択をした、というお話なので
どちらがシマさんとその先のユーザーにとって好ましいか、というところかと思います。

投稿者: 谷 拓樹 | 2010/2/24 水曜日 17:13:11

指定しないことに賛成です。

昔のブラウザは特に顕著ですが、
画像が表示されるまでの体感が固定値よりも遅く感じることはあります。

画像が読み込まれないとFirefoxなどはAltの大きさに変化してガコガコなりますからね。。

今後の高速回線の普及やブラウザ能力の向上などを考えると、
流れ的にはimgサイズを指定しないというのが主流でしょうね。

任意になっているのは、どちらも使いどころがあり得るということだと思うので、
どちらかだけが正と結論付ける必要はないと思いますが。

投稿者: kuzumi | 2011/1/21 金曜日 0:52:10
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.