要使用 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 解析時立即渲染。
格式前綴
| 圖片格式 | Data URI 前綴 |
|---|---|
| PNG | data:image/png;base64, |
| JPEG | data:image/jpeg;base64, |
| WebP | data:image/webp;base64, |
| SVG | data:image/svg+xml;base64, |
| GIF | data:image/gif;base64, |
| AVIF | data:image/avif;base64, |
33% 的體積開銷
根據 維基百科，Base64 編碼使檔案體積增加約 33%，因為它僅使用 64 個 ASCII 字元來表示二進位資料。
| 原始檔案 | Base64 大小 | 額外開銷 |
|---|---|---|
| 1 KB | ~1.33 KB | +0.33 KB |
| 5 KB | ~6.67 KB | +1.67 KB |
| 10 KB | ~13.3 KB | +3.3 KB |
| 50 KB | ~66.7 KB | +16.7 KB |
| 100 KB | ~133 KB | +33 KB |
| 500 KB | ~667 KB | +167 KB |
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 字串更短。
| 格式 | 原始大小 | Base64 大小 |
|---|---|---|
| PNG 圖示 | 8 KB | ~10.7 KB |
| WebP（相同圖示） | 4 KB | ~5.3 KB |
WebP + Base64 = 字串長度約為 PNG + Base64 的一半。
自動化工具
| 工具 | 方法 | 安全性 |
|---|---|---|
| VS Code 擴展（”Image to Base64″） | 右鍵點擊 → 複製 Base64 字串 | 本機 |
| FreeConverto | 瀏覽器端 FileReader API | 檔案不會離開您的裝置 |
| Node.js 腳本 | CI/CD 建置流程自動化 | 本機/伺服器 |
何時使用與避免 Base64
| 使用 Base64 的場景 | 避免 Base64 的場景 |
|---|---|
| 小型 UI 圖示（< 10 KB） | 大型照片（> 10 KB） |
| 首屏關鍵資源 | 多頁面重複使用的圖片 |
| 郵件 HTML 範本（外部圖片被封鎖） | 可利用瀏覽器快取的資源 |
| 一次性裝飾元素 | SVG（使用原始 XML 更小且可壓縮） |
根據 JustUse.me，Base64 在郵件範本中特別有價值，因為許多郵件用戶端預設封鎖外部圖片。
結論
使用 Base64 嵌入10 KB 以下的小型 UI 資源 —— 先轉換為 WebP 以獲得最短的字串。大型照片和共享資源保持為外部檔案以利用快取。對於郵件範本，Base64 確保圖片無需使用者操作即可顯示。
常見問題
為什麼 Base64 程式碼這麼長？
Base64 僅使用 64 個 ASCII 字元來表示二進位資料 —— 效率低於二進位儲存。每個像素和顏色值轉換為多個文字字元，增加約 33% 的開銷。高解析度圖片會產生巨大的字串。
Base64 提供安全性或加密嗎？
不提供。Base64 是編碼，不是加密。根據 FreeConverto，它很容易逆向 —— 任何擁有該字串的人都可以無需金鑰立即解碼。切勿依賴它來保護圖片內容。
可以將 Base64 用於大型照片嗎？
強烈不建議。大型 Base64 字串會膨脹 HTML/CSS，延遲渲染，並損害 SEO。根據 DebugBear，它們會阻擋關鍵資源載入。請改用外部檔案搭配快取和延遲載入。
發佈留言