使用base64/line顯示圖像要快多少，而不是簡單地鏈接到服務器上的硬文件？使用網站的inline/base64圖像比鏈接到硬文件要快多少？
url(data:image/png;base64,.......)
我一直沒有找到任何類型的性能指標。
我有幾個擔心：
讓我們來定義「更快」，如：它需要一個用戶看到一個完整的呈現的HTML網頁
您不再獲得高速緩存的好處時
這個問題是否會根據您對緩存的依賴程度而有所不同。
不是base64很多很多大小比PNG/JPEG文件大小大嗎？
文件格式/圖像壓縮算法是相同的，我把它，即它是PNG。
使用Base-64，每個8位字符代表6位：因此二進制數據正在以8比6的比率解壓縮，即僅約35％。
有多快是它
定義 '快'。你的意思是HTTP性能（見下文）或渲染性能？
你不再獲得緩存
的好處其實，如果你在一個CSS文件時，它仍然會被緩存這樣做。當然，對CSS的任何更改都會使緩存失效。
在某些情況下，這可以用作許多HTTP連接的巨大性能提升。我說了一些情況，因爲你可能會利用圖像精靈等技術來處理大多數東西，但在你的武器庫中有另一種工具總是很好的！
「快」是一個很難的事情來回答，因爲有許多可能的解釋和情況：
Base64編碼將第三放大圖像，這將提高帶寬利用率。另一方面，將它包含在文件中將會去除服務器的另一個GET往返行程。因此，吞吐量大但延遲較差的管道（如衛星互聯網連接）可能會比使用不同圖像文件更快地加載帶內聯圖像的頁面。即使在我的（農村，慢速）DSL線路上，需要多次往返的站點也需要比那些只是相對較大但只需要幾個GET的那些站點花費更長的時間。
如果你從每個請求的源文件中進行base64編碼，你將會使用更多的CPU，抖動你的數據緩存等，這可能會損害你的服務器響應時間。 （當然，你總是可以使用memcached等來解決這個問題）。
這樣做當然會阻止大多數形式的緩存，如果經常查看圖像會傷害很多 - 也就是說，在每個頁面上顯示的標識（通常可以由瀏覽器緩存）或代理緩存像魷魚或其他），並要求每月一次。它還會阻止許多Web服務器優化Web服務器使用內核API（如sendfile（2））來提供靜態文件。
基本上，這樣做會在某些情況下有所幫助，並在其他情況下受到傷害。你需要確定哪些情況對你來說很重要，然後才能真正弄清楚這對你來說是否是一個有價值的技巧。
讓我們定義「更快」，如下所示：用戶查看完整呈現的HTML網頁所需的時間 – Tim 2009-10-15 21:33:37
緩存/ perf在服務器端可能不是那麼有問題。您仍然可以將頁面緩存到文件中，因此不需要將圖像重複轉換爲base64。如果你的頁面不經常改變，你也可以告訴瀏覽器緩存html文件本身。 – 2009-10-15 21:35:12
我已經完成了包含1800個單像素圖像的兩個HTML頁面之間的比較。
第一頁聲明瞭圖像內聯：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">
在第二個，圖像引用外部文件：
<img src="img/one-gray-px.png">
我發現，加載多次相同的圖像時，如果它被聲明爲內聯，瀏覽器爲每個圖像執行請求（我認爲它是base64-每個圖像解碼一次），而在另一種情況下，每個文檔請求圖像一次（請參見下面的比較圖像）。
帶有內聯圖像的文檔在大約250ms內加載，鏈接圖像的文檔在30ms內完成。
（含鉻34測試）
用相同的內嵌圖像的多個實例的HTML文檔的情況下並沒有多大意義的先驗。然而，我發現插件jquery lazyload默認爲所有「惰性」圖像定義了一個內聯佔位符，其src屬性將被設置爲它。然後，如果文檔包含大量懶惰圖像，則可能會出現上述情況。
你啓用緩存嗎？ – 2017-07-27 17:28:01
如果你把你的base64圖像放在CSS類而不是img標籤上，它會閃電般快速，並且你可以控制緩存和生命週期。 – 2017-11-03 00:15:18
您也將從HTTP請求數量的減少中受益匪淺。 – 2009-10-15 21:22:48
讓我們定義「更快」，如下所示：用戶查看完整呈現的HTML網頁所需的時間 – Tim 2009-10-15 21:36:08