web-dev-qa-db-ja.com

<img /> vs background-image（css）のパフォーマンス

基本的にスクロールをアニメーション化するスクロールプラグインを使用しているサイトを構築しています。サイトにいくつかの画像を挿入した場合のように、スクロール/アニメーションを実行するとかなり途切れ途切れに見えるので、パフォーマンスにかなりの懸念があります。

画像で検出できる主な問題は、画像のサイズが正しくなく、スケーリングされている場合のリフロー/再描画の問題です（これに対処する必要があります ベストプラクティス について知っています）。 ）。

このステートメントを念頭に置いて（画像は拡大縮小されます）。パフォーマンスに関しては、これらの画像を背景とする画像要素またはdivの方が良いでしょうか？

私はこのjsFiddlesを作成しました。これは、chromeブラウザのメモリツールで、背景画像のオプションが使用するメモリが少ないことを示しています。

<img />： http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image： http://jsfiddle.net/ek6Xn/1/

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

参照：

  1. imgタグ要素と背景画像のdiv間のパフォーマンスの違い？
  2. IMGとCSSの背景画像を使用する場合？
  3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
  4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode
cssperformancerepaint
28
Alvaro

個人的には、この場合のパフォーマンスを忘れて、画像が何であるかに焦点を当てます。

1）画像=コンテンツ

2）背景画像=デザイン

これについて私が考える傾向があるのは、CSSがオンまたはオフのどちらの状態でも、すべてのデバイス、すべての画面サイズで画像を表示したいですか？ GoogleやFacebookで画像を「インデックスに登録」しますか？これらの質問のすべてまたはいずれかに対する答えが「はい」の場合、通常、画像は「コンテンツ」であり、IMGタグを使用する必要があります。

別の画像を別の画面サイズで表示したい（または特定のデバイスでまったく画像を表示しない）場合、または画像がプリントアウトに表示されないことに満足している場合、または画像が表示されないことに満足している場合CSSがオフの場合に表示され、通常は画像は「デザイン」であり、背景画像を使用する必要があります。

17
MrCarrot