基準使用base64字符串，而不是圖像減少http請求

Question

我正在尋找替換當前設置爲我的CSS圖像文件的圖像源到base64字符串。而不是瀏覽器需要進行多次調用，一個用於CSS文件，另一個用於每個圖像，base64嵌入意味着所有的圖像都嵌入CSS文件本身。

所以我目前正在調查介紹這一點。然而，我有一個問題，我希望得到一些建議，這種方法的一個已知問題。這是在我的測試中，base64編碼的字符串圖像大約是普通圖像大小的150％。這意味着它無法用於大圖像。雖然我不太關心較大的圖像，但我不確定何時應該使用它。

是否有我應該使用的基準，因爲如果base64超過150％，我不應該使用它等？

其他人對此的看法以及您自己的經歷可能有助於決定何時和不使用它？

Answer 1

Base64編碼需要非常接近爲原始字節數的4/3，所以合理金額小於150％，更像是133％。

我只能建議你自己測試一下，看看你的特殊需求是否能更好地滿足更復雜的方法，或者你是否更好地遵守規範。

Answer 2

Base64編碼對於每3個輸入字節總是使用4個輸出字節。它通過使用基本上每個輸出字節的6位來映射到可以安全使用的字符。所以你總是會看到，對於你base64編碼的任何東西，增加133％，四捨五入到最後一個4字節。您可以使用gzip壓縮您的響應來獲得一些這種損失。

Answer 3

這隻適用於少數瀏覽器。我不會推薦它。尤其適用於移動瀏覽器。

如果您正確配置網絡服務器，則圖像會在瀏覽器上緩存。所以，圖像不會一遍又一遍地下載。他們來自緩存，因此速度非常快。您可以在網絡服務器上執行各種簡單的性能配置，使其可以通過基於CSS的圖像的base64編碼工作。

看看這對於一些簡單的方法來提高網站的性能： http://omaralzabir.com/making_best_use_of_cache_for_high_performance_website/

Answer 4

您希望您的服務HTML和CSS文件gzip壓縮。我測試了這張JPEG照片：我base64編碼和gzip它，結果是非常接近原始圖像文件大小。所以沒有區別。

如果你做得對，你最終會減少每個頁面的請求數，但使用base64編碼的頁面大小約爲。

問題是當你改變某些東西時緩存。假設您將10個圖像嵌入到一個CSS文件中。如果您對CSS樣式或任何單個圖像進行了更改，則用戶需要再次下載包含所有嵌入圖像的整個CSS文件。你真的需要判斷自己是否適合你的網站。