img要素のwidth、height属性について再考してみた
- 2008年12月07日
- category:XHTML/CSS
- Comment(11)
- Trackback(0)
img要素にwidth、height属性を指定するかどうかは常に悩んでいて、以前にもブログでみなさんに質問したりもしましたが、自分なりの一つの答えにたどり着きました。
画像の幅、高さの情報というのは以下の2通りの情報があると思います。
- 画像の大きさを構造上表すメタデータとしての情報
- 見た目の大きさを表す情報
それぞれについて考えてみます。
画像の大きさを構造上表すメタデータとしての情報
以前書いた質問のエントリーにいただいたコメントで以下のようなものがありました。
静止画像である写真や絵画は、IT化以前の歴史上、サイズを表記してきました。美術館に行くとわかりますが、絵の説明は「題名、作者名、発表年、画材、所有者（収蔵美術館）名、『サイズ』」になっています。もちろんここで表記するサイズはピクセルではなくキャンバスの号数かセンチ単位ですが。このことから考えると、現実世界において画像の大きさは重要なメタデータであると私は考えています。以上の理由から、画像のメタデータの記述としてwidth,height属性を指定することにしています。
なるほど。確かにその通りですね。幅、高さが画像のメタデータだと考えると、画像の幅、高さという情報は構造上必要だと思いました。写真とかの画像はどのくらいの大きさかというのは重要な情報の一つになりうると思います。
見た目の大きさを表す情報
ボタン画像とかタイトル画像とかに幅、高さという情報は構造上必要でしょうか？僕は必要ないと思います。そういうった画像の幅、高さという情報はどちらかというと見た目を表す情報だと言えるのではないでしょうか。
ボタン画像やタイトル画像みたいなテキストベースの画像が大きい小さいという情報は、文字が大きい小さいというのと同じレベルだと思います。それって普通はCSSで制御しますよね。
結論
メタデータとしての幅、高さだったらHTMLでwidth、height属性を指定する、見た目を表す情報ならCSSで指定する、という使い分けをするのはどうでしょうか。構造上の情報はHTML、見た目の情報はCSSに書くというのすごく自然な流れですよね。
width、heightを指定する理由に、画像の領域を確保して画像を読み込み中のときにレイアウトが崩れるからという問題がありますが、これって見た目を制御するためですよね。それをHTMLに書くのは間違っている気がします。CSSで大きさを指定して領域確保するほうがいいのではと思います。
後付けですけど、この考え方だとwidth、height属性が必須になっていないという仕様に納得がいきます。構造上必ず必要な属性なら必須の属性になってるはずだし、見た目を制御する属性なら廃止されるのではないかなーと思いました。
- Prev Entry
- Macで常用しているアプリケーション
- Next Entry
- カヤックから「ウェブで一発当てる方法」という本が出ました
コメント一覧
wonder_boys 2008年12月8日 16時09分
こんにちは。はじめまして。
ちょっと面白い記事でしたので、コメントさせて頂きました。
ぼくも、以前色々考えていました。
CSS2.0の仕様書（？）に以下のような記述がありまして、
IMG要素の内容は、src属性が指し示す画像によってしばしば置き換えられる。 CSSでは、内在寸法の取得方法は定めない。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/conform.html#replaced-element
ちょっと解釈が甘いのかもしれませんが、CSSでは置換要素（img等）の幅や高さは求めない。というようなことなのかなあと思っていました。
なので、ぼくはHTMLで指定をするようにしています。
なかなか難しいですね・・・。
※面白いので、ブログ購読させて頂きました。
hokaccha 2008年12月8日 17時13分
wonder_boysさんコメントありがとうございます。
＞IMG要素の内容は、src属性が指し示す画像によってしばしば置き換えられる。 CSSでは、内在寸法の取得方法は定めない。
むむむ。これは解釈難しいですね。「取得方法」だからCSS側で画像の大きさを取得できない（当たり前だけど）ってことかな？
もちょっと調べてみる必要がありそうだな。。。
貴重なご意見ありがとうございました！
デッドリー 2008年12月8日 21時20分
管理人様、お久しぶりです。
俺の場合はHTML側でwidthとheightを記述して制御する感じですねえ。
どうもCSSでwidthとheightを制御するのはしっくりきませんｗ。
hokaccha 2008年12月8日 21時44分
デッドリーさん
お久しぶりです。HTML側で記述するのに抵抗があるのって結構lintの影響とかもあると思うんですよね。
lintで育つと、どうしてもlintで100点目指したくなるので、width,heightを指定してしまうのでは、と思ってるのは僕だけかな。
koh 2008年12月10日 18時25分
はじめまして、たまたま気になったので、コメントさせてもらいます。
自分も一度悩んだことがあったんですが、alt属性が長い場合、幅、高さを指定しないと、画像が切れちゃう場合、alt属性の値の長さによって、imgの領域が広がってしまう問題があるので、html側で指定した方がいいのかなと思いました。
人によっても、解釈は違う部分もありますね。
toaruR 2008年12月10日 22時21分
レイアウト情報を除いた「文章」としては、
画像なんて本当は、画像へのアンカーで良い（もしくはその方がふさわしい）とも言えますよね。
わざわざイメージタグが存在するのは、やはりイメージタグ自体がレイアウト要素を内包してる証左なんじゃないでしょうか。
つまり、ストイックに考えればイメージタグは例外的な存在である可能性。
ま、知りませんが(ノ∀`)
hokaccha 2008年12月18日 21時27分
＞kohさん
逆にIEでは幅と高さ指定してるとaltが長いと領域を拡張せずにaltのテキストが切れちゃったりしますよねー。難しいところです。
＞toaruRさん
うーんなるほど。イメージタグ自体がレイアウト要素を内包しているという考えた方は納得ですね。参考にさせていただきます。
ゲスト 2008年12月24日 14時34分
img要素をJavaScriptでappendChildすると、まず、offsetwidthがないimg要素をつくり、画像読み込み後にoffsetwidthの値が指定されます。(offsetwidthはCSSのwidthに該当します。)
width属性がないimg要素の場合、画像読み込み終了後にobjct.style.width = xxの命令が実行されているように見えます。
width属性があるimg要素の場合、img要素が読み込まれた時点で、offsetwidthにimg要素のwidth属性の値がセットされてimg要素が作られいます。
scriptでimg要素をappendChildした場合、width属性が指定されてないと、画像の大きさが取得できなくなってしまい、困ったことになる場合があります。
動的にimg要素の生成処理する場合、width属性、hight属性はあったほうが良いと思います。
ゲスト 2008年12月24日 14時58分
書き忘れ。
同一のイベントでappendChildしたimg要素のoffsetwidthの値を取得しようとした場合の話です。
イベントを分けた場合、mouseoverで読み込み、clickでoffsetwidthを取得とした場合は、offsetwidthは上手く取得できるはずです。
ほかちゃ 2009年12月20日 06時38分
ごちゃごちゃ言ってるけど、要は、楽したいだけだろ。
んで、その為の言い訳として、もっともらしい理由を探してるんだろ。
お前の中では、何を言われようが答えは決まってるんだよ。それなのに、意見を求めるなんて笑わせるな。
width,heightって指定しない方が楽じゃん。サイズを一々調べないといけないし、記述も面倒だ。あたいも出来れば指定したくないよ。
「面倒だから指定しない」って言えば、「ああ確かにな」って、まだ納得してやれるけど、強引なこじつけでは「言い訳乙」としか思えない。
ＩＥで画像が表示されず指定サイズをはみ出した時には、カーソル合わせることで、ツールチップに表示されるって知ってるか。
HTMLは構造がどうたらとか言ってるくせに、見た目のこと気にしてるじゃん。おかしいと思わないの？
そもそも、画像がちゃんと表示されるようにメンテナンスをしっかりすべきだろ。
ちなみに、テキストブラウザだと、幅指定は無視されるから問題ない。
あたいは、サイト利用者の利便性が重要だと思ってる。だから面倒でも幅を指定してる。
幅を指定せず、でかい画像をがんがん貼ってるサイトを見ると、イライラするよ。
読んでるテキストの位置がどんどんずれてどこ読んでるか分からなくなったりするしな。
テキストを読んでる最中に、画像がどんどん読み込まれていけば、待たなくて良いだろ。
どうしてもHTMLで幅を指定したくないというなら、CSSですべての画像の幅を指定しろ。それが出来ないなら、面倒だから」と言え。
俺は画像全てにid名をつけて、CSSで幅を指定するのはバカらしいと思ってる。
だから、HTMLで幅を指定している。
aholico 2010年8月30日 10時30分
ずいぶん前の記事+コメントだけれど、目に余ったのでコメント。
持論としてはありだし1年前の記事に長くコメントするのも熱意が感じられるけれど、「メタデータとしてはHTML、レイアウトならCSSで指定する」って結論に対して「楽したいだけだろ」ってずいぶん的外れな指摘。