什麼是HTML和CSS圖像的最佳實踐

Question

我創建了一個WordPress主題，並且實現了一個允許將圖像嵌入到HTML文檔和CSS文件中的功能。

我的意思是，不是在我的網站上添加圖片爲：

<!-- In HMTL --> 
<img src="http://www.some-url.ext/img/my_image.jpg" /> 

/* In CSS */ 
selector 
{ 
    background-image: url(http://www.some-url.ext/img/my_image.jpg); 
} 

添加圖像在我的網站下面的形式：

<!-- In HMTL --> 
<img src="data:image/gif;base64,R0lG...." /> 

/* In CSS */ 
selector 
{ 
    background-image: url(data:image/gif;base64,R0lG....); 
} 

處理後的圖像存儲在緩存文件中獲得更好的性能。

我當前的主題還有一個全寬滑塊，其中包含很大的圖像。

問題是由於嵌入圖像，處理的文檔大小爲1.83MB。

同樣的文件，在加載速度非常快，任何波紋管幻燈片越來越慢要顯示:(

那麼，是不是更好的圖像嵌入到文檔或者是它更好地使用正常方式有網址嗎？

Answer 1

答案，像往常一樣，是「它取決於「。這裏有一些興趣點：

• 嵌入圖像可以通過減少HTTP請求的數量來加速頁面，所以對於很多小文件，它可以提供幫助。
• 以64爲底的編碼將使圖像的大小增加約1/3。
• 由於瀏覽器必須對圖像進行解碼，因此會降低渲染速度。

查看http://en.wikipedia.org/wiki/Data_URI_scheme查看更詳盡的優點和缺點。

對於大的圖像，我會說你最好採取HTTP請求命中。您可以使用各種預加載方案來使HTTP點擊對用戶不那麼可見。

PageSpeed，YSlow等，是指引，而不是福音。正如您所發現的，您應該始終測試更改並找出您的網站有意義。

Answer 2

在一般情況下，使用數據URI使得對小圖像只（如多個圖標合併成一個Sprite）的感覺。大圖像應擔任獨立的文件。

Answer 3

我想這裏的暗示標準是效率。由於緩存的原因，圖像通常應該作爲獨立服務，因爲每個圖像都可以被緩存。否則，只有包含圖像數據的整個文檔才能被緩存，除非它是一個非常穩定的文檔，並且僅在本文檔中使用這些圖像，否則效率會相當低。

檢查出http://www.mnot.net/cache_docs/有關緩存的一般信息。通常，任何合理的緩存友好性服務器端（通常默認情況下都會啓用）會使映像緩存很多，因爲它們不會經常更改。