效率的數據：在CSS

Question

圖像在想，如果這個

background:#092542 url('data:image/png;base64, ....') center top no-repeat; 

比

background:#092542 url('myimage.png') center top no-repeat; 

我試圖削減加載時間下來，如果這將有助於出更高效，大。

Answer 1

如果圖像只在一個頁面上使用過一次，那麼它可能會在加載（更快）時給出非常小的（可能不明顯）差異，但是這也意味着瀏覽器無法緩存圖像，所以如果它在另一個頁面上使用，它將不得不再次加載，這意味着正在傳輸數據的兩倍（三重等）。

一般來說，這不值得，雖然也許如果它是一個微型網站它可能會更容易，但不是太多。

Answer 2

數據URI圖像被緩存。但是，圖像的緩存取決於緩存中包含的文件的方式。如果包含Data URI映像的樣式表正在被緩存，那麼在樣式表本身被重新下載之前，圖像將不會被下載。

我也推薦這個post解釋數據URI的進一步，特別是性能部分。