圖片 Base64 轉換工具
圖片與 Base64 編碼互轉，支援拖拽上傳和實時預覽
拖拽圖片到此處，或點選選擇檔案
支援 JPG、PNG、GIF、WebP、SVG 等格式
什麼是 Base64 圖片編碼？
圖片 Base64 工具可以把圖片檔轉成 Base64 文字或 Data URL，也能把這類字串解碼回可預覽的圖片。它適合處理小圖示、佔位圖、電子郵件模板、CSS 背景、API 測試或不方便附帶獨立圖片檔的展示案例。Base64 不是壓縮格式，通常會讓資料量變大；用在大照片或大量重複資源時，也可能影響快取效率。這個工具主要用於快速轉換、檢查與除錯，實際上線時仍要判斷內嵌資料、CDN 檔案或普通圖片 URL 哪一種更合適。
使用方式
使用方式
- 拖曳或點選上傳圖片，自動偵測類型與尺寸
- 選擇輸出格式：Data URL（可直接用於程式碼）或純 Base64
- 點選複製按鈕，將編碼結果貼到需要的位置
- 如需反向轉換，貼上 Base64 字串後點選轉換即可下載圖片
Base64 轉圖片
- 將 data URL 或純 Base64 字串貼入輸入框，轉換後即可預覽解碼圖片並下載。
- 若解碼失敗，請檢查 Base64 文字是否完整，並確認 data:image/... 前綴格式是否正確。
圖片轉 Base64
- 若結果要直接貼入 HTML 或 CSS，請選擇 Data URL；若其他系統已分別儲存 MIME 類型，則選擇純 Base64。
- 建議 Base64 圖片保持較小尺寸；大型圖片會讓編碼後的文字量增加約三分之一，使 HTML、CSS 或 JSON 負載更難維護。
使用場景
技術原理
Base64 編碼的圖片是 RFC 2397 定義的 Data URI：開頭為 `data:` 架構前綴，接著 MIME 類型（如 `image/png`），然後是 `;base64` 字面值，最後是以 64 個字元（A-Z、a-z、0-9、+、/）組成的字母表建立的負載，`=` 作為尾端填充。編碼時每 3 個位元組取一組，輸出 4 個字元，因此負載固定膨脹 4/3 倍（約 33%），當位元組數不是 3 的倍數時再加上 1 或 2 個填充字元。 在瀏覽器中，編碼從 `FileReader.readAsDataURL` 開始，它透過相同的流程串流檔案，傳回完整的 `data:` URL，可直接放入 `<img src>` 或 CSS 的 `background-image url()`。純字串的 `btoa` 和 `atob` 原生函數僅適用於已是二進位的負載（僅限 latin-1，因此二進位位元組必須透過 `Uint8Array` 轉換）。解碼回可檢視的圖片則經過 `atob` 轉為 `Uint8Array`，再封裝為具有原始 MIME 類型的 `Blob`，`URL.createObjectURL` 建立的控制代碼即成為一般可透過 HTTP 存取的資源。 實際的取捨不在頻寬而在快取。負載的每次出現都隨著 HTML、CSS 或 JSON 的出現位置被複製，因此資源無法被單獨快取、無法擁有自己的 ETag，並且每次父文件重新下載時都會跟著重新下載。嚴格的 Content-Security-Policy 規則也會封鎖 `data:` URI，除非 `img-src` 或 `style-src` 中明確列出 `'data:'`。自 HTTP/2 多工傳輸上線以來，內嵌小圖標很少比獨立請求更有效率，因此現代經驗法則是僅在 ~2 KB 以下時內嵌，並將首圖和可重複使用的精靈圖保留為可快取的檔案。
- Data URI 方案：RFC 2397 格式 `data:[<mime>][;base64],<payload>`；逗號是必要的，也是最常見的複製貼上失敗點。
- 編碼開銷：3 個二進位位元組變成 4 個 ASCII 字元，因此負載膨脹 4/3 倍（約 33%），再加上最多 2 個 '=' 填充字元。
- 瀏覽器 API：`FileReader.readAsDataURL` 用於檔案；`btoa`/`atob` 用於已是文字的負載（僅限 latin-1，二進位需要 `Uint8Array` 橋接）。
- 解碼路徑：`atob` → `Uint8Array` → `new Blob([buf], {type})` → `URL.createObjectURL` 得到一般可存取的資源 URL，而非凍結的字串。
- CSP 陷阱：嚴格的 `img-src` 或 `default-src` 策略會封鎖 `data:`，除非明確列出該關鍵字，這會在正式環境中靜默破壞內嵌圖片。
- 快取取捨：內嵌資料沒有獨立的 ETag 或快取條目，因此 HTTP/2 多工傳輸通常在超過 ~2 KB 的內容上比內嵌更有效率。
範例
在 HTML 中使用
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="1x1 transparent pixel" width="16" height="16" />在 CSS 中使用
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}透過 JSON API 傳輸
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// 注意：Base64 會讓資料量膨脹約 33%；超過 100KB 的檔案建議改用 multipart/form-data。常見問題
圖片會上傳嗎？
不會。圖片是透過 FileReader API 在你的瀏覽器中讀取並進行 Base64 編碼，位元組從未離開你的裝置。可在轉換過程中打開「網路」分頁確認。
為什麼 Base64 字串比原檔案大約多 33%？
Base64 把每 3 位元組轉成 4 個 ASCII 字元，所以編碼後大小 = ceil(file_size / 3) * 4，大約多出 33%，這是把二進位轉成可列印文字所付出的代價。
結果要怎麼用在 HTML 或 CSS 裡？
使用 data URI：HTML 中寫成 <img src="data:image/png;base64,...">，CSS 中寫成 background-image: url(data:image/png;base64,...)。頁面會直接幫你產生完整的 data: URI。適合內嵌極小的素材，但會撐大 HTML/CSS 並繞過瀏覽器的圖片快取。
什麼大小該內嵌、什麼大小該外連？
5 KB 以下時內嵌通常划算（省下一次 HTTP 請求）。再大的檔案應該獨立存放，以利快取。超過 50 KB 時，內嵌會明顯撐大 HTML。各種建置工具門檻不同，例如 webpack 預設為 8 KB。
可以把 Base64 字串解碼還原成圖片嗎？
可以。貼上 data: URI 或原始 Base64（需指定 image/* MIME 類型），頁面會還原圖片並提供下載。當你在原始碼中看到內嵌圖片想取回原檔時很實用。
支援 SVG 與動態 GIF 嗎？
支援。SVG 可直接編碼，也可改用 URL-encoded 文字（對 SVG-XML 來說比 Base64 更短）。動態 GIF 會編碼成單一 Base64 字串，結果仍可正常播放動畫。WebP、AVIF 等現代格式也是同樣的處理方式。
寄電子郵件時要不要先把大照片轉成 Base64？
不需要。電子郵件本身的 MIME 機制已經會把附件以 Base64 編碼，預先編碼只會讓信件更大，且大多數郵件客戶端無法閱讀內文中的 Base64。直接用附件上傳即可。