我是否應該將圖像作爲data/base64嵌入到CSS或HTML中

119

爲了減少服務器上的請求數量，我將一些圖像（PNG & SVG）直接作爲BASE64嵌入到CSS中。（其在構建過程自動化）我是否應該將圖像作爲data/base64嵌入到CSS或HTML中

這樣的：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

這是一個好的做法呢？有什麼理由避免這種情況？有沒有一些主要的瀏覽器沒有數據網址支持？

獎金問題：這對於CSS & JS也有幫助嗎？

來源

2011-03-10 meo

沒有多少人使用IE7再和所有的缺點有一個非常良好的上升 - 較少的圖像文件來管理！即，如果您需要爲樹組件繪製特殊線條，那麼將css自身中的細小肘部圖像嵌入到repeat-x或repeat-y組合中，無需確保額外的圖像文件位於正確的位置（與這個用例的開銷很小） – DaveAlger 2013-03-20 22:19:53

146

這是一個很好的做法嗎？有什麼理由避免這種情況？

這是一個很好的做法，通常只適用於當IE兼容性無關緊要時要一起使用的非常小的CSS圖像（如CSS sprites），並且保存請求比緩存更重要。

它有一些顯着的缺點：

根本不會在IE6資源只有up to 32k in size in IE8工作，7
作品。這是在base64編碼之後應用的限制。換句話說，不超過32768個字符。
它節省了一個請求，反而膨脹了HTML頁面！並使圖像無法緩存。每次載入包含頁面或樣式表時，它們都會加載。
Base64編碼使圖像尺寸增大33％。
如果在gzip資源中提供服務，data:圖像幾乎肯定會對服務器資源造成嚴重的壓力！圖像傳統上需要CPU密集型進行壓縮，並且尺寸減小很少。

來源

2011-03-10 10:06:18

即使內容被壓縮，大小也會增加嗎？ – meo 2011-03-10 10:07:58

@meo有趣的一點。我預計這對gzip性能不利，因爲圖像通常已經非常優化地壓縮了。壓縮它們要花費可怕的CPU空間來獲得單位數百分比的收益。嘗試gzip一個JPG文件，你會明白你的意思。我會將其編輯回答 – 2011-03-10 10:09:23

我知道gzip壓縮圖像不是要走的路。但我在想，也許它在基礎64上更有效。尤其是當你在源代碼中有更多的圖像時。 – meo 2011-03-10 10:12:13

這不是一個好習慣。某些瀏覽器不支持數據URI（例如IE 6和7）或支持受限（例如，IE 8爲32 KB）。

參見本維基百科文章的完整信息的數據URI缺點：

Data URI scheme

缺點

數據URI不單獨從緩存他們包含文件（例如CSS或HTML文件），因此每次包含文檔重新下載時都會下載數據。

每次進行更改時都必須對內容進行重新編碼和重新嵌入。

通過版本7的Internet Explorer（截至2011年1月約爲市場的15％）缺乏支持。

Internet Explorer 8將數據URI限制爲最大長度爲32 KB。

數據作爲簡單流包含在內，許多處理環境（如Web瀏覽器）可能不支持使用容器（如multipart/alternative或message/rfc822）來提供更大的複雜性，如元數據，數據壓縮或內容協商。

Base64編碼的數據URI的大小是其二進制等效值的1/3。（但是，如果HTTP服務器使用gzip壓縮響應，則該開銷降低到2-3％）數據URI使安全軟件過濾內容變得更加困難。

來源

2011-03-10 10:06:53

每次請求都重新下載CSS？這是一個新的！另外，如果你曾經存檔過一個文件，你會注意到壓縮率不是2-3％！如果我沒有弄錯，我已經在yahoo.com上看到了這種技術。 ......顯然不是很好的做法！ – StefanNch 2013-07-02 08:30:42

@StefanNch這不是它說的。在摘錄中，「包含文檔」指的是css文件。 – Christophe 2013-09-27 01:17:42

我更傾向於使用CSS Sprites來組合圖像並保存請求。我從來沒有嘗試base64技術，但它顯然不能在IE6和IE7中工作。也意味着，如果任何圖像改變，那麼你必須重新輸送整個丟失的圖像，除非你有多個CSS文件。

來源

2011-03-10 10:07:09

我已經有精靈，我想知道如果我可以用這種方法更優化它。 – meo 2011-03-10 10:09:01

我不知道一般的最佳實踐的想法，但我一不希望看到這樣的事情，如果我能幫助它。 :)

Web瀏覽器和服務器具有的內置，我還以爲你最好的選擇是隻得到您的服務器告訴客戶端緩存圖像文件緩存的東西整個負載。除非你在頁面上加載了非常小的圖像，否則我不會認爲多個請求的開銷是很大的一筆交易。瀏覽器通常會使用相同的連接來請求很多文件，所以沒有建立新的網絡連接，因此除非通過HTTP標頭的流量與圖像文件的大小相比顯着，否則我不會擔心多個請求太多。

有什麼原因讓你認爲目前有太多的請求去服務器？

來源

2011-03-10 10:11:54 Chris

如果你關心perf的第一件事就是嘗試和解決，那麼請求的數量就是最大的性能指標之一。請參閱yahoo's http://developer.yahoo.com/performance/rules.html「減少組件數量反過來會減少呈現頁面所需的HTTP請求數量，這是加快頁面速度的關鍵。」 – MemeDeveloper 2013-03-07 10:20:05

我所用數據的URI約一個月，而我剛使用它們，因爲它們讓我的樣式絕對巨大停止。

數據的URI做的工作在IE6/7（你只需要一個服務文件mhtml對這些瀏覽器）。

我使用數據的URI那裏得到的一個好處是，我的背景圖像，只要樣式表被下載渲染，而不是逐步加載，我們看到一些本來

這是不錯的，我們有這個技術可用，但將來我不會使用它太多。我不建議嘗試它雖然，只要你知道自己

來源

2011-03-10 10:57:11 stephenmurdoch

這裏很常見的答案似乎在暗示這是沒有必要，對於一組的合法理由。然而，所有這些似乎忽視的現代應用的行爲和構建過程。

這不是不可能的（實際上很容易）設計一個簡單的過程，將通過一個文件夾的圖像走路，會生成此文件夾的所有圖像一個CSS。

這個CSS將完全緩存，將大大減少往返服務器，這是因爲正確地@MemeDeveloper最大的性能命中的一個建議。

當然，這是破解。毫無疑問。與精靈一樣是黑客。在完美的世界中，這是不需要的，直到那時，這是一種可能的做法，如果您需要修復的是：

帶有不易「精靈」的多個圖像的頁面。
往返服務器是一個實際的瓶頸（想想移動）。
速度（毫秒級別）對於您的使用情況非常重要。
對於IE5和IE6，你不在乎（如果你想讓網站前進）。

我的看法。

來源

2014-02-16 08:03:50

這應該是upvoted得到更多的關注。其他答案有點過時 - 他們談論IE6，而IE8有點過時了...（並感謝那樣） – 2014-07-22 10:05:18

我會建議它用於經常使用的小圖像，例如Web應用程序的常用圖標。

微小的，因爲Base64編碼的大小增加時常用
，因爲這證明與舊版本瀏覽器更長的初始加載時間

當然支持問題必須被牢記。此外，使用框架的功能可以自動將圖像內聯到GWT的ClientBundle等數據URL，或者至少使用CSS類，而不是直接將其添加到元素樣式中，這可能是一個好主意。

更多的信息都聚集在這裏：http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/

來源

2016-04-27 09:31:44 Sebastian

我是否應該將圖像作爲data/base64嵌入到CSS或HTML中

回答

相關問題