2010-11-26 2 views
8

私は以前、どこかでHTML文書の<img>要素の幅と高さを指定すると、ページの読み込み速度が向上し、実践:ページの読み込みのためのHTMLと画像のサイズの指定

<img src="" width="100" height="100" /> 

私は今、私は単一のページ上の画像の非常に多くを持っているような状況に直面している、と私は両方の制御が容易と少ない繰り返しHTML用のCSSを経由して寸法を設定することを好むだろうコード:

.whatever img {width: 100px; height: 100px;} 

これは深刻な問題ではありませんが、CSSでディメンションを宣言すると、HTMLでディメンションを宣言するのと同じ利点があるのか​​、それともHTMLで直接行うべきかどうかという疑問があります。

洞察を歓迎します。

おかげ

+0

は、[this](http://stackoverflow.com/questions/1947057/where-to-specify-image-dimensions-for-fastest-rendering-in-html-or-in-css? rq = 1)(私はこの質問のフレーズを好む) – iono

答えて

12

スタイルシートがすぐに利用可能であるならば、私が推測するには、画像の大きさは、すぐに運動の全体のポイントであるレイアウトに適用されます。

これは、Google's pagespeed rulesでサポートされています。

すべてのイメージの幅と高さを指定すると、不要なリフローや再描画が不要になり、レンダリングが高速になります。

ブラウザがページをレイアウトするとき、イメージなどの置き換え可能な要素の周りを流れることができる必要があります。イメージがダウンロードされる前でもページをレンダリングすることができます。ただし、置き換え不可能な要素をラップするディメンションが分かっている場合に限ります。含まれているドキュメントに寸法が指定されていない場合、または指定された寸法が実際のイメージの寸法と一致しない場合、ブラウザは、イメージがダウンロードされると再フローおよび再描画を要求します。リフローを防止するには、HTML <img>タグまたはCSSのすべての画像の幅と高さを指定します。

+0

私のために働く、ありがとう。 – Tom

1

(CSSにではなく)属性に幅と高さを規定する間決定的な違いは、次いで、データなく、プレゼンテーションパラメータになることです。次のスタイルシートを管理することを想像してみてください。

img[src='/images/tree.jpeg'] { 
    width: 100px; 
    height: 100px; 
} 

これは不必要にCSSに画像を絡ませます。適応レイアウトも制限されています。つまり、読み込まれていない画像が、次元の1つが推測されたときに正しい領域を占めることはなくなりました(例:width: 100%)。

また、object-fitなどのCSSルールを検討してください。どのような意味でwidthheigthのスタイルプロパティが混乱しているのかが分かります。

関連する問題