1. Home
  2. Archive
  3. imgにwidthとheightを指定しない理由

imgにwidthとheightを指定しない理由

(X)HTMLではimg要素のwidthとheightは必須ではありません。最近僕はwidthとheightは基本的に指定しないようにしています。

widthとheightを指定しないメリット

画像が表示されないときに、widthとheightを指定していた場合、指定したサイズからaltのテキストがはみ出すと、IEでは文字が切れて表示されます。

altありの画像

指定しないとテキストがある分、表示されます。

altなしの画像

widthとheightを指定しないデメリット

長い文章の間に画像がいくつも含まれていた場合などに、img要素にwidthとheightを指定しておくと画像を読み込む前に表示領域を確保します。指定しなかった場合は画像を読み込むときに表示領域を確保するので文章を読んでいる途中で画像を読み込むと、読んでいた文章が下のほうにずるずるとずれていく可能性があります。

まとめ

まあ、メリットもデメリットも小さいことなんですが、どちらかといえばメリットのほうが大きいんじゃないかと思うので最近は指定してないわけです。

参考:imgのwidthとheightはいるのか | Takazudo Clipping*

追記(2007/09/10)

なにやらこの記事がはてぶコメントでdisられているようです。

はてブコメントやトラバなんかを見ると、disられてもしょうがないなぁという気はしてきます。画像が出ないときのことを優先的に考えるのもどうかなぁという話ですね。確かにその通りだと思いました。反省です。

今回挙げたメリットの他に、トラバで頂いたリキッドレイアウトに関する問題や、メールで頂いた画像差替時にHTMLを修正しなくても良いという管理面でのメリットは勉強になりました。

デメリットでレンダリング速度が落ちるという意見をいただいたました。Lucky bag::blogの記事でも話が上がってますが、実際のところどうなんだろう?

追記(2008/12/11)

再考した。

トラックバックURL

http://webtech-walker.com/archive/2007/09/04115352.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

トラックバック一覧

  1. あそことは別のはらっぱ。 2007年9月10日 13時46分

    リキッドレイアウトから画像は無縁でいられるのか?

    まあ、必須じゃないとしても、レンダリングのスピードが上がるからimgにはwidthとheight、それに画像が表示出来ないところではaltを指定しろ、て…

コメントフォーム

※HTMLタグは使用できません。