HTMLの<img>タグのwidth指定について。

Question

HTML5の<img〜>タグを使用する際、今までは「width」、「height」それぞれ指定していたのですが,「width」だけ指定すれば、heightも同比率のまま拡大縮小されることを最近知りました。

正しい記述としては、やはり両方（width,height）記載した方が良いのでしょうか？読み込みが早いのは記載していた方が早いのでしょうか？

教えて下さい。

Answer 1

600x600の画像を300x300で表示したい場合は、300x300のサイズの画像で保存して、それを
使うというお話です。

iPhoneの方はおっしゃるとおりでよろしいかと。

Answer 2

PC向けだと事前にリサイズしておくことは鉄板です。特に、古いブラウザを意識するのであれば。
iPhoneだと、組み方にもよるのかもしれませんが、実サイズだと逆にぼやける場合があるので逆に
大きめ(倍のサイズ)を使っています。

Comments

[YuichiKataoka]

＞PC向けだと事前にリサイズしておくことは鉄板です。特に、古いブラウザを意識するのであれば。
リサイズとは600px（縦横）の正方形に配置したい場合に、600px正方形の画像をwidth,heightで600pxずつで指定するという意味ですか？

＞iPhoneだと、組み方にもよるのかもしれませんが、実サイズだと逆にぼやける場合があるので逆に
大きめ(倍のサイズ)を使っています。
例えば、300px（縦横）の正方形にレイアウトする場合、600px（縦横）の正方形を作成しておき、width,heightで300pxずつで指定するということでよろしいでしょうか？

Answer 3

両方記載したほうがいいです。widthのみの場合、widthからheightを計算することになるので遅くなります。また、画像が読み込めなかった場合でもその画像の大きさを前提としたレイアウト組みが維持されるので良いです。

Comments

[YuichiKataoka]

なるほどぉ。ありがとうございます。あと、少し質問の趣旨から外れてしまうのですが
例えば「縦横600px」の画像を綺麗に見せたい場合にwidth,heightを「300px」に指定して表示させたりということをやるのですが、これって綺麗に見せたい場合に正しいやり方でしょうか？

ブラウザChromeなんかだと、綺麗に見えるんですが「IE」や「Safari」だと綺麗に見えません。特にIEはガチャガチャな見え方になってしまいます。。。。

[Cf_cwd]

正しくないですね
綺麗に見せたいならそもそも画像の解像度を高くしておくかベクターにするかなどになるでしょうね

もしよければ以下のURLを確認してみてはどうでしょうか
http://compojigoku.blog.fc2.com/blog-entry-15.html

[YuichiKataoka]

正しくないとのことなのですが、「縦横600px」の画像をwidth,heightを「300px」に指定して表示してみると、かなり綺麗に見えるのですが、
このデメリットを教えて頂けませんでしょうか？

[Cf_cwd]

質問者の方が書いていた通り
>ブラウザChromeなんかだと、綺麗に見えるんですが「IE」や「Safari」だと綺麗に見えません。特にIEはガチャガチャな見え方になってしまいます
のように問題はいくらでも起こりますよ。
ブラウザごとの振る舞いによって処理が変わったり、見栄えが変わったりしてしまうのは致命的なデメリットかと思われます……。
画像を加工しておくひと手間を省くか、一部ブラウザで表示が狂う、見栄えが悪くなることのどちらに重きを置くかということでしょう。
私はよほど理由がない限り、画像を加工したほうがメリットがあると考えます(というより見栄えが悪くなるリスクを排除するというべきか)。

余談ですが同じような質問をされている方がいました。
http://answers.microsoft.com/ja-jp/ie/forum/ie9-windows_7/ie9%E3%81%A7%E3%81%AF%E5%A4%A7%E3%81%8D%E3%81%AA/654093f1-7a65-4506-83e5-67778ffe45d0
大きな画像を小さく表示させたことにより発生するジャギの解決法はないですか？