圖片轉 Base64

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

支援 PNG、JPG、GIF、WebP

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

相關推薦

Base64 轉圖片

Base64 轉文字

Base64 DataURL 轉換

JSON 壓縮

JavaScript 格式化工具

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 傳輸二進位資料、以及瀏覽器擴充功能或單一檔案應用（無法參照外部資源）。

適用場景

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

使用方法

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

常見問題

支援哪些圖片格式？

支援 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 參照的載入速度更快，因為瀏覽器可以平行下載多個資源並利用快取。