web-dev-qa-db-ja.com

HTMLまたはCSSで画像の読み込みが速くなりますか？

サイドバーでこの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>
cssoptimizationhtmlpagespeed
27
GreatestSwordsman

これは、Firebug（Netの下）、Chrome Developer Tools（Networkの下））、Fiddler、またはその他の任意のHTTPスニファを使用して簡単に確認できます。

画像をCSSにbackground-imageとして配置した場合、画像は、そのクラスが実際に使用されている場合にのみダウンロードされます そして目に見える。 imgに配置すると、すぐにダウンロードされ、見えなくてもレンダリングがブロックされます。

最後に、画像自体が読み込まれる速度を数えると、どちらも同じくらい高速です。 実数の質問は、知覚されたパフォーマンスが、どの画像がダウンロードされるかは、要素を配置する場所によって異なります。

私は他の側面についてもっと心配するでしょう。画像を背景画像として使用することは、次のことを意味します。

  • 画像はコンテンツではありません
  • 印刷できません
  • Spriteを使用してHTTPリクエストの数を減らすことができます（したがって、パフォーマンスが向上します）。
  • アニメーションが遅い 背景画像imgよりも
30
pixelfreak

それらをCSSファイルに入れると、CSSファイル自体がダウンロードされた後にのみ、ダウンロードが開始されます。これにより、CSSのアプローチが少し遅くなる可能性があります。それ以外は同じです。

5
sagi

ブラウザは、HTMLで画像のURLを読み取り、CSSファイルに画像のURLを書き込むとすぐに画像のダウンロードを開始します。そのクラスまたはCSSルールが適用されると、ダウンロードが終了します。ただし、 CSSスプライト = Webページに画像を含めるため。

ウェブページの画像を最適化するための30のトリック

Web開発者向けのYahooパフォーマンスルール

2
DSharper

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なしのバージョンを使用するかもしれないと思うので、彼はボックスの小さなコーナーであなたをロードするのに役に立たないでしょう。彼は帯域幅が遅く制限されているとき、愚かなことではなくコンテンツだけを見たいと思っています。

1
stefanz

Css画像が高速であることの1つの引数は、多くの小さな画像を使用するWebアプリケーションがそれらを1つの大きなタイル画像に結合し、cssを使用して、含まれているサブ画像の境界に従ってソース画像ファイルをクリップできることです。追加のイメージをフェッチするためのサーバーへの往復回数を減らすと、そのようなアプリケーションのロード時間が大幅に増加する可能性があります。実際、googleはgmailなどの多くの独自のアプリケーションでこのアイデアを使用していますが、手動で管理するのは骨の折れる作業になる可能性があります。

1
Two-Bits