在CSS中使用圖像文件與數據URI

@JaspreetSingh它很大程度上取決於你如何捆綁CSS - 訪問者在每次訪問時仍然不應該再次獲取CSS，並且緩存或服務工作人員應該在訪問之間保留（如果版本沒有改變）。這實際上是一個帶寬vs ping的問題 - CSS文件較大，但您可以爲圖像節省一次往返時間。大部分時間不足以支付額外字節的開銷，但並非總是如此。 – Keith 2016-11-04 14:06:44

我認爲現在到了可以忽略不計。（？一個形象，就是小）

不過，也有一些其他的事情要考慮：

會不會有更多的圖像的方法可行的未來？
你gZip你的CSS文件？

原因是..
對於裝入的CSS每個圖像是到服務器，這需要時間少了一個呼叫。我們都知道，從精靈。即使是一個更大的精靈，比所有的圖像組合，都是可取的。這意味着如果您使用data：URI，那麼添加的每個圖像的潛在減速就會少一個。

和第二個問題..數據：URI是非常gZip友好的。我的意思是非常好。我們有一些傳統的css文件很龐大。 109 kb巨大..當我們的數據：URI的形象，這膨脹到一個巨大的246 kb！ gZipping後，我們下降到126 kb。

更不用說了..精靈不是很好玩，但是如果你使用的是data：URI，那麼精靈就不會有這麼多的理由。

希望有所幫助。

PS。一個關於data：URI的鏈接。 http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS 檢查該頁面的底部，以瞭解更多薩科不得不說的數據：URI

來源

2010-07-10 01:54:38

Using Data URIs指Data URIs make CSS sprites obsolete，並通過創建一個Ant構建一步擴展了使用CSSEmbed工具。 CSSEmbed「也支持MHTML模式，使IE6和IE7兼容的樣式表使用類似於數據URI的內部圖像。」

另外，當比較圖像文件字節與base64編碼字節時，不要忘記每個http圖像請求/響應都有http頭的字節開銷。這個針對Yahoo的示例消耗了大約900個字節（我將代理名稱修改爲example.com）。此外，yimg.com域被優化爲不具有任何cookie並保存這些潛在的字節。

GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1 
Accept: */* 
Referer: http://www.yahoo.com/ 
Accept-Language: en-US 
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E) 
Accept-Encoding: gzip, deflate 
Host: l.yimg.com 
Proxy-Connection: Keep-Alive 

HTTP/1.0 200 OK 
Date: Sat, 31 Jul 2010 22:27:25 GMT 
Cache-Control: max-age=315360000 
Expires: Tue, 28 Jul 2020 22:27:25 GMT 
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT 
Accept-Ranges: bytes 
Content-Length: 1750 
Content-Type: image/png 
Age: 321472 
Server: YTS/1.17.23.1 
X-Cache: MISS from a-proxy-server.example.com 
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22) 
Proxy-Connection: keep-alive

來源

2010-08-04 15:57:52