人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLについて質問です。
imgタグでサイズを指定するメリットはなんですか?

画像が無かったときにサイズを保持した枠が表示されたとしても、そこにどんなメリットがあるのかわかりません。
無いならわざわざ枠を表示させなくても良いと思います。

HTMLの仕様だからという理由以外で教えてください。


●質問者: Rustic
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML サイズ タグ メリット 仕様
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● masahikokimoto
●25ポイント

メリットというか、画像のリサイズをブラウザ側でやってくれます。

だから、例えば外部の画像をインラインで参照する時に小さくしたい場合などは便利です。

あと、レイアウトエンジンに画像読み込み前に大きさを知らせられるので、体感ですが若干レンダリング

が速いような気がします。

◎質問者からの返答

ありがとうございます。

画像の本来のサイズ以外で表示させることがないのですが、もしそういった必要性があれば有効ですね。

画像表示に関してはこのような記事もありました。

http://designblog.ecstudio.jp/guideline/img-width-height.html


2 ● goodvn
●25ポイント

最近は,PC もネットの速度も速いのであまり気にならないかもしれませんが,遅い PC や遅い回線を使っていると,画像の読み込みに時間が掛かる場合があります

画像を読み込むまでサイズが分からないと,ブラウザはレンダリングができません.一旦仮のサイズでレンダリングするのですが,画像のサイズが判明すると,再度レイアウトを修正し,レンダリングをやり直します

ただでさえ遅いのに,何度もレンダリングしてては,さらに遅くなってしまいます

テーブルや CSS などでレイアウトが決められていなくて,画像サイズが指定されていない,かつ遅いサーバにアクセスすると,必要性を実感できるかもしれません(良い例は見つかりませんでした)

◎質問者からの返答

ありがとうございます。

ISDN時代ではとても大切なことなのかもしれませんね。

ではブロードバンドが普及して、PCの性能も上がっている現在ではどうなのでしょうか。


3 ● hijk05
●2ポイント

>画像が無かったときにサイズを保持した枠が表示されたとしても、

>そこにどんなメリットがあるのかわかりません。

>無いならわざわざ枠を表示させなくても良いと思います。

画像がなかったときにレイアウトが崩れないようにするため。

◎質問者からの返答

ありがとうございます


4 ● pahoo
●25ポイント ベストアンサー

画像が無かったときにサイズを保持した枠が表示されたとしても

width, height 属性で指定された分だけ余白となるので、レイアウトを保持できます。

また、ブラウザで「画像を表示しない」と設定している人(例:モバイルでアクセスしている場合)もいるので、この場合にも有効です。


ではブロードバンドが普及して、PCの性能も上がっている現在ではどうなのでしょうか

1ページが非常に長く、多数の画像と文章が混在している写真ブログの場合、ブロードバンドでPCの性能が高くなったとしても、レンダリングに時間がかかります。


個人的には、最初に述べたように、モバイルでアクセスしてくるユーザーが増えているため、width, height 属性は指定すべきだと考えています。

◎質問者からの返答

ありがとうございます。

たしかにモバイルサイトの場合画像サイズを指定してないとロード中にがたがたすることがありますね。

また、非常に長いブログについてはたしかに表示に時間がかかってますね。

私の意見のですが、モバイルサイトについてはロード中のがたがたはさほど気にならないように思えます。


5 ● b-wind
●25ポイント

ではブロードバンドが普及して、PCの性能も上がっている現在ではどうなのでしょうか。

回線が高速化したおかげで余計にブラウザのレンダリングのコストが浮き彫りになりつつある。

簡素なページではたいした差はないけれど、Ajax 等を多用した環境ではHTML自体が動的に変わっていくので、

余計なレンダリングは少ないに越したことはない。


まぁある程度の数の画像がなければ体感は出来ないでしょうけどね。

◎質問者からの返答

ありがとうございます。

AJAXは今回の質問と関係ありませんが、ロード時間については確かに気になりますね。

画像についてはやはり一定の数がある場合にレンダリングの問題が出てきそうですね

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ