如何快速使用 Base64 將圖片嵌入 HTML 程式碼 (2026)

要使用 Base64 在 HTML 中嵌入圖片，將圖片轉換為 Data URI 字串，並放入 <img> 的 src 屬性或 CSS 的 background-image 屬性中。這消除了 HTTP 請求，但會增加 33% 的體積開銷 —— 僅適用於 10 KB 以下的資源。

兩種方法：HTML 和 CSS

方法一：HTML <img> 標籤

根據 DebugBear，標準格式為：

data:image/[format];base64,[encoded_string]

最適合：小型 logo、首屏必須立即渲染的圖示。

方法二：CSS background-image

background-image: url(data:image/png;base64,PHN2ZyB4bWxucz...);

根據 FreeConverto，這適用於導航圖示和按鈕 —— 它們在 CSS 解析時立即渲染。

格式前綴

33% 的體積開銷

根據 維基百科，Base64 編碼使檔案體積增加約 33%，因為它僅使用 64 個 ASCII 字元來表示二進位資料。

10KB 法則

根據 FreeConverto，將 Base64 資源控制在 5-10 KB 以內。超過 10 KB，體積開銷對效能的損害超過節省 HTTP 請求帶來的好處。

對 Core Web Vitals 的影響

DebugBear 分析顯示，超過 1 MB 的 HTML 檔案（因嵌入圖片）會導致瀏覽器解析延遲，影響 最大內容繪製 (LCP)。

效率技巧：先轉換為 WebP

根據 FreeConverto，在 Base64 編碼前先將圖片轉換為 WebP。WebP 比 PNG/JPEG 壓縮率更高，產生的 Base64 字串更短。

WebP + Base64 = 字串長度約為 PNG + Base64 的一半。

自動化工具

何時使用與避免 Base64

根據 JustUse.me，Base64 在郵件範本中特別有價值，因為許多郵件用戶端預設封鎖外部圖片。

結論

使用 Base64 嵌入10 KB 以下的小型 UI 資源 —— 先轉換為 WebP 以獲得最短的字串。大型照片和共享資源保持為外部檔案以利用快取。對於郵件範本，Base64 確保圖片無需使用者操作即可顯示。

常見問題

為什麼 Base64 程式碼這麼長？

Base64 僅使用 64 個 ASCII 字元來表示二進位資料 —— 效率低於二進位儲存。每個像素和顏色值轉換為多個文字字元，增加約 33% 的開銷。高解析度圖片會產生巨大的字串。

Base64 提供安全性或加密嗎？

不提供。Base64 是編碼，不是加密。根據 FreeConverto，它很容易逆向 —— 任何擁有該字串的人都可以無需金鑰立即解碼。切勿依賴它來保護圖片內容。

可以將 Base64 用於大型照片嗎？

強烈不建議。大型 Base64 字串會膨脹 HTML/CSS，延遲渲染，並損害 SEO。根據 DebugBear，它們會阻擋關鍵資源載入。請改用外部檔案搭配快取和延遲載入。