サイドバーでこのhtmlを使用して画像をロードした場合
<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />
(ヘッダーで呼び出される)私のstyle.cssがサイドバーに配置されている場合よりも速く/遅く読み込まれますか
.image {
width: 200px;
height: 200px;
background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}
<div class="image"></div>
これは、Firebug(Netの下)、Chrome Developer Tools(Networkの下))、Fiddler、またはその他の任意のHTTPスニファを使用して簡単に確認できます。
画像をCSSにbackground-imageとして配置した場合、画像は、そのクラスが実際に使用されている場合にのみダウンロードされます そして目に見える。 img
に配置すると、すぐにダウンロードされ、見えなくてもレンダリングがブロックされます。
最後に、画像自体が読み込まれる速度を数えると、どちらも同じくらい高速です。 実数の質問は、知覚されたパフォーマンスが、どの画像がダウンロードされるかは、要素を配置する場所によって異なります。
私は他の側面についてもっと心配するでしょう。画像を背景画像として使用することは、次のことを意味します。
それらをCSSファイルに入れると、CSSファイル自体がダウンロードされた後にのみ、ダウンロードが開始されます。これにより、CSSのアプローチが少し遅くなる可能性があります。それ以外は同じです。
ブラウザは、HTMLで画像のURLを読み取り、CSSファイルに画像のURLを書き込むとすぐに画像のダウンロードを開始します。そのクラスまたはCSSルールが適用されると、ダウンロードが終了します。ただし、 CSSスプライト = Webページに画像を含めるため。
MozillaのYSlowアドオンを使用して簡単なテストを行いました。
CSSのリセット、jquery/javascriptなどを使用せずに、結果を取得しました
使用内部にこの構造がありました
<div id="wrap">
<img src="images/5.png" alt="" />
</div><!--/wrap-->
ySlowは、ページが0.149秒でロードされると私に言っていました
background:url()を使用
次に、「wrap」というdivの背景に画像を配置しました。結果は少し速くなり、平均読み込み時間は約0.125秒でした。
このテストでは、10.5 KB(200px X 200px)のpng画像を使用しました。
ところで、タグ(span/divなど)でいつ使用するか、いつ使用するかを考える必要があります。プロのニース構造を使用するには、コンテンツ画像にのみタグを使用する必要があります。確認する最も簡単な方法は、CSSを無効にすることです。 CSSなしで必要なコンテンツ(ギャラリー、ロゴ、アバターなど)がある場合、これは正しい方法を使用したことを意味します。タグを使用して、角が丸い画像やその他のデザインのものをロードするのは役に立たないでしょう。少し速くなるかどうかは気にしないでください。接続が遅い人はcssなしのバージョンを使用するかもしれないと思うので、彼はボックスの小さなコーナーであなたをロードするのに役に立たないでしょう。彼は帯域幅が遅く制限されているとき、愚かなことではなくコンテンツだけを見たいと思っています。
Css画像が高速であることの1つの引数は、多くの小さな画像を使用するWebアプリケーションがそれらを1つの大きなタイル画像に結合し、cssを使用して、含まれているサブ画像の境界に従ってソース画像ファイルをクリップできることです。追加のイメージをフェッチするためのサーバーへの往復回数を減らすと、そのようなアプリケーションのロード時間が大幅に増加する可能性があります。実際、googleはgmailなどの多くの独自のアプリケーションでこのアイデアを使用していますが、手動で管理するのは骨の折れる作業になる可能性があります。