適合使用
- 把 PNG、JPG、WebP、SVG、GIF 或 BMP 圖片轉換成 Base64 Data URL。
- 貼上 Base64 圖片文字後預覽還原結果，檢查編碼是否可用。
- 複製圖片 Data URL，用於 CSS、HTML、郵件範本、文件或測試資料。
TUXIA 圖匣工具
圖片 Base64 轉換工具
將圖片轉換為 Base64 Data URL，或把 Base64 文字還原成圖片預覽，適合小圖示、郵件範本、CSS 嵌入和開發除錯。
雙向轉換
編碼預覽
複製下載
圖片轉 Base64
拖曳圖片到這裡，或 點擊選擇
PNG, JPG, WebP, SVG, GIF, BMP
Base64 轉圖片
在下方貼上 Base64 字串，頁面會自動解碼並預覽：
工具指南
圖片 Base64 轉換工具指南與常見問題
將圖片轉換為 Base64 Data URL，或把 Base64 文字還原成圖片預覽，適合小圖示、郵件範本、CSS 嵌入和開發除錯。
圖片Base64Base64轉圖片圖片轉Base64線上Base64圖片轉換Data URLTUXIA
Base64 編碼是將二進位圖片資料轉換為純文字字串的技術，讓圖片可以直接嵌入 HTML、CSS、JSON 或其他文字格式中。這在需要將圖片打包進單一檔案時特別實用，例如自包含的 HTML 郵件範本、單檔案網頁元件，或是無法使用外部圖片參照的 CSS 拼貼。TUXIA 的圖片 Base64 工作區提供雙面板介面：左側面板可將任何圖片轉換為 Base64 Data URL，並自動顯示字元數和預估檔案大小；右側面板則可貼上任何 Base64 字串，即時解碼並預覽還原後的圖片。兩項操作均使用瀏覽器的 FileReader 和 Canvas API 在本機執行，你的圖片檔案和 Base64 字串都不會離開你的裝置。
使用場景
CSS 與 HTML 內嵌
小型圖示、標誌和裝飾元素可以直接以 Base64 Data URL 嵌入 CSS 或 HTML，省去額外的 HTTP 請求，特別適用於單頁應用程式、郵件範本和離線網頁應用。
API 資料傳輸
透過 REST API 或 GraphQL 傳送圖片資料時，Base64 編碼提供安全的文字格式，能在 JSON 序列化過程中避免二進位損毀，常用於頭像上傳、文件附件或圖片標註流程。
除錯與測試
Base64 輸出方便在日誌檔案中檢查圖片資料、比較不同格式的編碼結果，或建立可重複使用的測試案例，也可貼上 Base64 文字來驗證圖片是否正確解碼。
與其他方案比較
相較於可能記錄圖片資料或限制上傳大小的伺服器端 Base64 轉換工具，TUXIA 的工具全部在瀏覽器本機處理，沒有來自 TUXIA 端的檔案大小限制（僅受瀏覽器記憶體限制），而且無需等待上傳即可即時轉換。但 Base64 編碼本身不會壓縮圖片，若檔案大小是你的主要考量，建議先使用 TUXIA 的圖片壓縮工具再進行編碼。
技術說明
- Base64 編碼會使檔案大小比原始二進位資料增加約 33%。對於大型照片，這個額外負擔會相當可觀，一張 1 MB 的圖片會變成約 1.33 MB 的字串。
- 並非所有瀏覽器都能高效處理文字框中的超長 Base64 字串。超過 2-3 MB 的圖片建議改用直接檔案傳輸。
- `data:image/` 前綴用來指定 MIME 類型，TUXIA 會根據偵測到的圖片格式自動加入正確的前綴。
- 解碼 Base64 時，任何以 `data:image/` 開頭的字串都會被視為完整的 Data URL；不含前綴的原始 Base64 文字則預設以 PNG 格式解碼。
最佳實踐
- 盡量將 Base64 編碼的圖片控制在 10 KB 以下。小型圖示、標誌和內嵌圖形是最適合的對象，全解析度照片則不建議。
- 將 Base64 用於首屏上方、需要避免額外 HTTP 請求而阻擋渲染的圖片。
- 在 CSS 中嵌入 Base64 時，將其放在樣式表末端或內聯 `<style>` 區塊中，避免阻擋關鍵 CSS 的載入。
- 在正式環境使用 Base64 字串前，務必先測試解碼後的圖片，確認尺寸、顏色和透明度都正確無誤。
使用方式
- 把圖片拖入左側區域，頁面會產生 Base64 Data URL。
- 把 Base64 文字貼到右側區域，預覽解碼後的圖片。
- 確認結果後複製編碼，或按需要下載還原後的圖片。
常見問題
圖片轉 Base64 會上傳到伺服器嗎？
不會。轉換過程在瀏覽器本機完成，TUXIA 靜態版不接收或保存你的圖片。
Base64 適合大圖片嗎？
不太適合。Base64 會讓文字體積變大，更適合小圖示、測試資料和少量嵌入場景。