logo
GeekFormat

圖片轉 Base64

拖曳圖片到此處，或點擊選擇

支援 PNG、JPG、GIF、WebP

免費線上圖片轉 Base64 編碼工具，支援 PNG/JPG/WebP/GIF/SVG/BMP/AVIF 等全格式。瀏覽器 Web Worker 本機處理，零上傳，不卡頓。可直接生成 Data URL 用於 CSS 內嵌、HTML 嵌入、郵件範本和 API 傳輸。

相關推薦

Base64 轉圖片

Base64 轉文字

Data URL 轉換

JSON 壓縮

JavaScript Formatter

URL 解析器

適用場景

  • CSS Sprites：小圖示、內嵌圖片內嵌到 CSS background，減少 HTTP 請求加速首屏算染
  • HTML 圖片嵌入：Logo、佔位圖、UI 資源直接內嵌到 HTML img 標籤，減少圖片請求
  • Email 郵件範本：郵件用戶端預設封鎖外部圖片，Base64 內嵌確保圖片即時顯示無需用戶授權
  • API 傳輸：將圖片二進位資料轉換為 Base64 字串，嵌入 JSON 請求主體進行介面傳輸
  • 前端效能優化：減少 HTTP 請求數量，適用於首屏關鍵資源內嵌加速頁面載入
  • 瀏覽器擴充功能與單一檔案應用：無法參照外部資源的場景下，透過 Base64 內嵌所有圖片

功能特點

  • 全格式支援：PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF 等常見圖片格式自動識別 MIME
  • Web Worker 加速：大型檔案編碼在獨立執行緒執行，即時顯示進度條，不阻塞主執行緒 UI
  • 瀏覽器本機零上傳：圖片透過 ArrayBuffer 零拷貝直接轉移給 Worker 處理，資料不經過任何伺服器
  • Data URL 自動生成：自動生成 data:image/xxx;base64, 前綴，可直接貼到 HTML img 或 CSS 背景屬性
  • 雙向轉換：支援圖片轉 Base64 和 Base64 轉圖片兩種模式互不干擾
  • 一鍵複製與下載：支援複製純 Base64、完整 Data URL、HTML img 標籤多種格式，或下載為 .txt 檔案

使用方法

  1. 選擇或拖放需要編碼的圖片檔案（支援 PNG/JPG/WebP/GIF 等）
  2. 工具自動在瀏覽器 Web Worker 中將圖片轉換為 Base64，即時顯示編碼進度
  3. 查看編碼結果：純 Base64 字串、完整 Data URL、HTML img 標籤任選其一複製
  4. 將結果貼到 CSS、HTML、JSON 設定檔或 API 請求中使用

常見問題

支援哪些圖片格式？

支援 PNG、JPG、WebP、GIF、SVG、BMP、AVIF、HEIC/HEIF 等常見格式。工具會自動識別 MIME 類型並生成對應的 Data URL 前綴，如 data:image/png;base64,...

Web Worker 加速是什麼原理？

Web Worker 是瀏覽器獨立的後台執行緒。傳統圖片編碼會阻塞主執行緒導致頁面卡頓，本工具將編碼任務放到 Worker 執行緒執行，配合 ArrayBuffer 轉移技術和進度回呼，保證大型檔案處理時介面依然流暢。

圖片會在伺服器上傳輸嗎？

完全不會。轉換過程使用 ArrayBuffer 零拷貝技術直接在瀏覽器 Worker 執行緒中完成，圖片內容不經過任何伺服器。這與宣稱「瀏覽器處理」但實際有上傳行為的工具有本質區別。

Base64 編碼後檔案會變大多少？

Base64 編碼後檔案約為原始二進位的 133%，即增加約 33%。這是因為每 3 位元組（24 比特）轉換為 4 個 Base64 字元（每個 6 比特），末尾用 = 填補。建議內嵌的單一圖片控制在 10KB 以內。

什麼樣的圖片適合 Base64 內嵌？

建議用於 10KB 以內的小圖示、小圖片。小圖片內嵌可以減少 HTTP 請求數量，但過大的圖片內嵌會增加 HTML/CSS 體積反而影響載入效能。大型圖片建議使用獨立 URL 參照。

Data URL 和純 Base64 有什麼區別？

Data URL 格式為 data:image/png;base64, 後接 Base64 編碼內容，可直接放入 HTML img 的 src 屬性。純 Base64 只是編碼後的字串，需配合 MIME 類型前綴使用。

可以用這個工具做 API 介面聯調嗎？

可以。將圖片轉換為 Base64 後，可以作為 JSON 請求主體的欄位值傳送到後端介面。本工具支援一鍵複製，相容大多數 API 文件中的範例格式。

為什麼選擇 Base64 內嵌而不是普通圖片參照？

Base64 內嵌適合小型檔案（<10KB）的場景，可以減少 HTTP 請求數量。但對於大型圖片，獨立 URL 參照的載入速度更快，因為瀏覽器可以平行下載多個資源並利用快取。

什麼是圖片轉 Base64？

圖片轉 Base64 是一種將二進位圖片資料編碼為 ASCII 文字字串的技術。Base64 使用 64 個可列印字元（A-Z、a-z、0-9、+、/）來表示二進位資料，每 3 個位元組轉換為 4 個 Base64 字元，末尾用 = 填補。整个編碼過程符合 RFC 4648 標準。

**編碼原理**：Base64 將每 3 個位元組（24 比特）拆分為 4 個 6 比特組，每個 6 比特組對應 Base64 字元集中的一个字元。如果位元組數不是 3 的倍數，會在末尾添加 1-2 個 = 填補字元。這解釋了為什麼 Base64 編碼後檔案會增加約 33%（4/3 ≈ 1.33）。

**Web Worker 優化**：本工具使用 Web Worker 在瀏覽器獨立執行緒中執行編碼任務，透過 ArrayBuffer.transfer() 將資料零拷貝轉移給 Worker，避免主執行緒阻塞。這意味著即使處理數 MB 的大型圖片，頁面 UI 依然保持流暢回應，同時即時顯示編碼進度。

**隱私安全**：與需要上傳圖片到伺服器的工具不同，本工具完全在瀏覽器本機執行。圖片資料不經過任何第三方伺服器，這在處理敏感圖片（如證件、合約）時尤其重要。

**應用場景**：Base64 圖片常見於 CSS Sprites（減少 HTTP 請求）、HTML 郵件範本（避免圖片被郵件用戶端封鎖）、API 傳輸二進位資料、以及瀏覽器擴充功能或單一檔案應用（無法參照外部資源）。