Base64 圖片:方便的陷阱還是有用的工具?

你可以直接在 HTML 或 CSS 中嵌入圖片。不需要單獨的檔案。不需要額外的 HTTP 請求。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." />

方便。但它帶來的成本並不是立即顯而易見的。

它如何運作

Base64 將二進位資料編碼為 ASCII 文字。任何圖片都變成你可以複製貼上的字串。

這個字串大約比原始檔案大 33%。一個 30KB 的圖片會變成 40KB 的字串。

Base64 何時有幫助

微型圖示。 一個 200 位元組的圖示作為 Base64 可以節省一個 HTTP 請求。HTTP/2 使這變得不那麼重要,但對於非常小的圖片仍然有效。

電子郵件 HTML。 電子郵件客戶端會封鎖外部圖片。嵌入的圖片無需「載入圖片」提示即可顯示。

單檔案分發。 分享可離線運作的 HTML。所有東西都在一個檔案中。

CSS 中的 Data URI。 嵌入在樣式表中的背景圖片。減少 HTTP 請求,代價是更大的 CSS 檔案。

Base64 何時有害

大圖片。 33% 的大小增加會累積。一個 100KB 的圖片變成 133KB 的文字。

快取。 外部圖片可以單獨快取。Base64 圖片是 HTML/CSS 的一部分——如果頁面更改,整個東西都會重新載入。

解析時間。 瀏覽器必須在渲染之前解碼 Base64。比直接載入二進位檔案需要更多處理。

維護。 更新嵌入的圖片意味著編輯程式碼。更新外部檔案更簡單。

HTTP/2 因素

HTTP/1.1 有昂貴的連接開銷。多個小圖片意味著多個慢請求。

HTTP/2 有效地多工請求。「節省 HTTP 請求」的論點現在較弱。

如果你的伺服器支援 HTTP/2(大多數都支援),外部圖片通常更好。

實用指南

1KB 以下: 考慮 Base64。開銷很小。

1-10KB: 逐案評估。關鍵圖示可能受益,裝飾性圖片可能不會。

10KB 以上: 使用外部檔案。大小懲罰不值得。

經常更新: 外部檔案。避免為圖片更新而更改程式碼。

跨頁面共用: 外部檔案。快取有利於多次頁面載入。

效能測試

不要猜測。測試。

比較有無 Base64 嵌入的總頁面重量。測量實際載入時間。

「正確」的答案取決於你的具體情況——圖片大小、快取策略、HTTP 版本、更新頻率。

替代方案

Sprite sheet。 將小圖示組合成一張圖片,使用 CSS 顯示部分。一次請求,正常快取。

圖示字型。 向量圖示作為字型。可縮放,可用 CSS 設定樣式。

內嵌 SVG。 對於向量圖形,內嵌 SVG 比 Base64 PNG 提供更多靈活性。

---

Base64 圖片以檔案大小換取便利性。這種權衡只對非常小的圖片或特殊情況(如電子郵件)有意義。對於大多數網頁用途,外部檔案表現更好。