什麼是 Base64 圖片編碼？
Base64 圖片編碼使用 64 個可列印字元將圖片檔案的二進位位元組轉換為 ASCII 字串。結果可直接嵌入 HTML、CSS、JavaScript、JSON 或 Markdown 中任何需要文字表示的位置，從而無需單獨的圖片檔案或 HTTP 請求。
編碼後的內容通常包裝為 Data URI，格式為 data:image/png;base64,<payload>。這由 RFC 2397 定義，Base64 字母表本身則在 RFC 4648 中規範。
開發者必須了解的關鍵事實：Base64 編碼後的圖片比原始二進位檔案大約 33%。這是數學上的固有屬性 — 每 3 位元組二進位變成 4 個 ASCII 字元。這個開銷是否重要完全取決於場景，下文將逐一展開。
何時使用 Base64（何時不要）
大多數線上教程把 Base64 內聯簡化為「總是好」或「總是壞」。真相是看場景。以下是我們在生產程式碼中使用的決策矩陣：
| 場景 | 使用 Base64？ | 原因 |
|---|---|---|
| 郵件簽名嵌入 logo | ✅ 必須 | 許多郵件用戶端會封鎖外部圖片參照 |
| 關鍵 CSS 中 2 KB 以下圖示 | ✅ 推薦 | 節省一次往返；收益 > 33% 體積代價 |
| 單檔 HTML demo / bug 報告 | ✅ 推薦 | 自包含、無外部相依 |
| Service Worker / PWA 啟動資源 | ✅ 有時 | 避免 SW 安裝期資源競爭 |
| 單元測試 fixture | ✅ 推薦 | 測試自包含且可讀 |
| CSS 或 HTML 中 > 10 KB 圖片 | ❌ 反模式 | 阻塞關鍵渲染路徑；無法獨立快取 |
| HTTP/2 環境中任何圖片 | ❌ 通常不好 | HTTP/2 多工已消除請求開銷 |
| CSS 背景中的 SVG | ❌ 反模式 | URL-encoded SVG 更小且可被 CSS 操作 |
Base64 內聯用 33% 的體積增長換取一次更少的 HTTP 請求。HTTP/2 在 2015 年成為主流後，這個權衡在 ~2 KB 以上很少划算。
4 步將圖片轉換為 Base64
我們的免費圖片轉 Base64 轉換器使用 FileReader API 完全在您的瀏覽器中執行。檔案從未上傳 — 您可以在工具執行時在瀏覽器的網路（Network）標籤中親自驗證。
拖放或貼上圖片
拖放、點擊瀏覽，或按 Ctrl/⌘+V 從剪貼簿貼上螢幕截圖。
選擇輸出格式
在 Raw、Data URI、HTML、CSS、Markdown、JSON 或 JavaScript 字串輸出之間切換。
複製或下載
一鍵複製到剪貼簿，或將編碼文字下載為 .txt 檔案。
在程式碼中驗證
貼到您的 HTML、CSS 或 React 元件中。Data URL 在任何現代瀏覽器中原生渲染。
Base64 輸出的 7 種用法
同一份 Base64 內容服務於 7 種獨特的生產場景。我們工具中每個 tab 都輸出對應格式的可複製片段。
郵件簽名
嵌入 logo 讓其在 Outlook、Gmail 和 Apple Mail 中無需外部載入即可渲染。
<img src="data:image/png;base64,iVBOR..." alt="Logo" />CSS 背景
內聯 2 KB 以下的圖示，從關鍵 CSS 中省掉一次 HTTP 往返。
background: url("data:image/svg+xml;base64,PHN2..")React 預覽
在檔案傳送給伺服器前顯示上傳預覽。
<img src={`data:image/jpeg;base64,${b64}`} />Markdown bug 報告
用於 GitHub issue 的自包含 markdown — 不會隨時間出現損壞的圖片連結。
JSON API
當結構化 schema 僅允許文字欄位時，將圖片以 JSON 傳輸。
{ "image": "data:image/png;base64,..." }JavaScript 常數
將資源直接打包到建置中，實現零執行時資源拉取。
const logo = "data:image/png;base64,...";TinyImagePro vs 其他 Base64 工具
我們用過六款其他 Base64 轉換器後才決定自建本工具，發現每款都有妥協 — 檔案大小限制、缺少輸出格式、伺服器上傳或零文件。競品對比如下：
| 工具 | 用戶端 | 檔案上限 | 輸出格式數 | 完整 FAQ |
|---|---|---|---|---|
| TinyImagePro | ✅ | 受 RAM 限制 | 7 | ✅ 8 題 |
| base64.guru | ❌ 上傳 | 50 MB | 10 | ❌ |
| base64-image.de | ✅ | 1 MB | 2 | 部分 |
| browserling | ✅ | 未標 | 1 | ❌ |
| jam.dev | ✅ | 4 MB | 3 | ❌ |
| codebeautify | ✅ | 未標 | 1 | ❌ |
對於敏感內容（醫療影像、內部產品圖、未發佈 logo），用戶端轉換是唯一選項。base64.guru 的 50 MB 上限聽起來不錯，但如果您根本不能上傳檔案就毫無意義。
效能與最佳實踐
「33% Base64 開銷」這個數字誤導的開發者比任何 web 效能數字都多。真正影響頁面載入的是 gzip 或 brotli 壓縮後的體積 — 而 Base64 字串與二進位的壓縮特性截然不同。
| 資源 | 原始 | Base64 | 開銷 | gzip 後 |
|---|---|---|---|---|
| PNG 圖示（1 KB） | 1.0 KB | 1.4 KB | +40% | +5% |
| PNG（10 KB） | 10 KB | 13.4 KB | +34% | +12% |
| JPG 照片（50 KB） | 50 KB | 66.8 KB | +34% | +30% |
| SVG（小圖示） | 0.5 KB | 0.7 KB | +40% | URL-encoded SVG: −10% |
gzip 壓縮顯著降低了 Base64 體積懲罰。10 KB PNG 作為 Base64 時大 34%，但 gzip 後只大 12% — 這讓小資源的 Base64 內聯實際成本遠低於表面值。
5 條最佳實踐
內聯 2 KB 以下的資源。超過此尺寸，bundler 膨脹和快取失效成本超過節省的請求。
切勿內聯 LCP（Largest Contentful Paint）圖片。它們會阻塞關鍵渲染並阻止瀏覽器優先順序排序。
對於 SVG，使用 URL-encoded SVG，不要用 Base64。URL-encoded SVG 更小且可被 CSS 操作（currentColor、動畫）。
先用我們的 PNG 或 JPEG 工具壓縮圖片 — Base64 會繼承所編碼內容的體積。
如果跨域提供 Base64 資源，新增允許 data: 出現在 img-src 和 style-src 中的 Content-Security-Policy。
關於圖片轉 Base64 的常見問題
我的圖片會上傳到你們的伺服器嗎？ 不會。TinyImagePro 使用瀏覽器 FileReader API 讀取每個檔案並在本機處理。您可以在頁面載入後斷開網路，轉換仍可正常運作。可在瀏覽器的網路（Network）標籤中驗證。
為什麼 Base64 字串比原圖大約 33%？ Base64 將每 3 位元組二進位表示為 4 個 ASCII 字元 — 數學上 33.3% 的開銷，未計入換行和 data:image/...;base64, 前綴。經過 gzip 後，小資源的實際開銷降至 5–15%。
可以用於 SVG 嗎？ 可以，但對 SVG 應優先考慮 URL-encoded SVG — 更小且可被 CSS 樣式操作。我們支援 SVG 輸入便於您實驗，但 PNG 轉 SVG 工具 是向量化工作流更好的入口。
如何把 Base64 解碼回圖片？ 將 Data URL 貼到瀏覽器網址列 — 現代瀏覽器原生渲染 data:image/... URL。程式設計方式可用 JavaScript 的 atob() 或 Python 的 base64.b64decode()。專門的 Base64 轉圖片工具在我們的藍圖中。