<img /> VS性能背景圖片（CSS）

Question

我建立一個使用滾動插件，基本上動畫滾動網站。 我非常關心性能，就好像我在網站中插入一些圖像一樣，在滾動/動畫時看起來很不連貫。

我可以檢測圖像的主要問題是迴流/重繪問題，當圖像沒有正確的尺寸，因此縮放（我必須處理這個，我知道best practice）。

有了這個聲明（圖片將被縮小）。什麼應該更好，圖像元素或divs與這些圖像作爲背景作爲性能？

我做了這個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. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
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

Answer 1

個人而言，我會忘記性能在這種情況下，注重形象是什麼：

1）圖像=內容

2）Background Im年齡=設計

我傾向於認爲這個是這樣的，我想要的形象出現在所有屏幕尺寸上的所有設備，CSS開啓或開或關？我是否希望圖像由Google和Facebook「索引」？如果對所有或任何這些問題的答案是肯定的，那麼通常圖像是「內容」，您應該使用IMG標籤。

如果你想有一個不同的圖像在不同的屏幕尺寸（或無圖像上的某些設備在所有）顯示，或者如果你是快樂的圖像不會出現在打印出來，或者你開心如果CSS關閉，圖像不顯示，那麼通常圖像是「設計」，你應該使用背景圖像。