2012-07-31 44 views
31

我正在考慮使用base64編碼圖像作爲我正在優化加載時間的網站。使用base64編碼圖像的優點和缺點

無論如何,在我開始之前,我想知道:這樣做的優缺點是什麼?

目前,我沒有看到任何缺點,但我也注意到,這不是一個經常使用的技術,這讓我想知道如果我沒有錯過任何東西。

谷歌的主題後,我沒有找到任何明確的,所以我決定在這裏問。

+2

不知道你想優化什麼。你認爲base64會壓縮超過PNG或JPEG嗎?從邏輯上講,你最終會得到四倍大的圖像,所以沒有太大的改進。 – 2012-07-31 08:41:11

+0

較高的圖像尺寸,但我不做第二次請求獲取圖片。發送到html裏面。所以再沒有標題。 – zozo 2012-07-31 08:43:59

+0

我還發現這個有用,但我仍然在想。 http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to – zozo 2012-07-31 08:45:07

回答

27

它只適用於非常小的圖像。 Base64編碼文件比原始文件大。其優勢在於不必打開另一個連接並向服務器發送圖像的HTTP請求。這種好處很快就會消失,所以只有大量非常小的單個圖像纔有優勢。

+0

一些企業CMS(如RedDot)也需要CSS圖像「掛鉤「 - 一個4點擊過程。根據你的平臺,它可能是一個節省時間。 – ArleyM 2013-09-21 13:17:15

8

MIME兼容Base64編碼的二進制數據的實際長度是 通常原始數據長度的約137%,儘管對於非常短的 消息的開銷可以高得多,由於 標頭的開銷。非常粗略地說,Base64編碼二進制數據的最終大小是 ,等於原始數據大小+814字節(用於頭部)的1.37倍。

換言之,解碼後的數據的大小可以用以下公式來近似:

bytes = (string_length(encoded_string) - 814)/1.37 

來源:http://en.wikipedia.org/wiki/Base64#MIME

3

一些如下文已經在這篇文章在How much faster is it to use inline/base64 images for a web site than just linking to the hard file?提及缺點的

  • 大多數形式的緩存遭到毆打,如果查看圖像會傷害很多o ften - 例如,每個頁面上顯示的標識,通常可以通過瀏覽器進行緩存。
  • 更多CPU使用率。
+0

關於緩存...頁面可以緩存自己。這裏的缺點是每次處理數據。 – zozo 2012-07-31 08:57:36

+4

同意,但在標識例子的情況下,有可能是在網站上的不同,許多頁面將不會被緩存他們參觀了第一,但在所有這些網頁的標誌的緩存圖片可以從第一每次使用頁面的緩存。 – 2013-03-19 15:40:11

+0

@zozo若對網頁內容更新,那麼無論在內容和圖像將需要下載並重新分析。 – arve0 2017-07-30 20:11:40

3

也會增加HTML頁面的響應時間,因爲圖像在正常情況下加載異步。即使圖片加載較晚,您也可以開始查看文字。

如果只是媒體在CDN

這種優勢將會丟失被緩存CDN的另一個優勢將喪失。

+1

你認爲如果只是通過base64上傳圖片,你覺得如何?因爲我想和json對象一起發送。 – 2017-01-10 10:21:56