ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

imgタグにheightとwidthの属性は必要?

November 08 2008

探し物をしてる際になんとなく見つけた記事。
「imgのwidthとheightはいるのか」
http://gyauza.egoism.jp/clip/archives/2007/04/imgwidthheight/

ほほう、興味深い記事ですこれは。
(ただ単によく設定し忘れる、というのは実はないしょだ)

どうやらXHTMLの仕様上では必須属性ではないようです。
個人的にXHTML+CSSでサイトを構築するようになって、最初に頭にあったのは
「文書と見栄えの分離」っていう事でした。(あまり深くは考えずに)

テーブルレイアウトしてた時にソース内に無数に出来てくる数字の羅列(width=”60″とか)を
置換で一気に削除したりして、へいこらとCSSで設定してたのに
なんで画像だけこれがいるんかいね?という疑問も確かにあったんです。
そりゃ画像に全部classつけて・・・ってのも面倒だけども。

ブラウザとしてはHTMLが読み込まれた時に、imgにheightとwidthが設定されてると
前もってその領域を確保してレンダリングするので
読み込み終了までにレイアウトがカックンカックン動かなくてすむそうです。
たまにテキストと画像が多数あるとこでこういうカクカクの挙動見たことある。
あれはそーいうことだったんだなあ。

メンテナンスする制作側からみたら、たとえばロゴとかが変わった場合に
画像サイズまで変わってしまうと、HTMLの修正もしなくちゃならんですから
あえてこの属性を記述しないってのもメリットといえばメリットかも知れない。
(まあDreamweaver上で一気に置換してしまえばいい事なんだけど)

あと、幅が狭い画像に長めのalt属性が書き込まれてた場合には
テキストが切れてしまうってのもデメリットかな。

いろいろな記事を読みあさってみると、なんとWeb Designingの2004年8月号で
属性ありとなしのソースを読み込ませてみたら、
属性なしの方が速かった、という事が書かれていたそうです。
http://www.lucky-bag.com/archives/2005/07/width_height.html
うーん、スピードだけを見てもたぶんそんなに大した違いはなさげやけども。
HDDのベンチマークテストが普通の人の大半には意味も興味もないのと同じような・・

古いブラウザを考慮すれば入れとかなければイカン気もしますが
長い目で(将来を見据えて)見たらあえて入れない方がいいかも知れないですね。
img以外の他の要素はみんなCSSで設定してるわけですから。

一番アカンのがありなしが混在しているというその「仕事の雑さ」でしょうね。
自重せねば・・・・・・

| Posted in Web関連 | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31