DEVELOP.07 BASE64 IMAGE

Base64 圖片轉換

編輯或貼上 Base64 並即時預覽；上傳圖片會取代編輯區內容，所有處理都在瀏覽器本機完成。

SOURCE

上傳圖片

將圖片拖曳到這裡

或點擊選擇 JPG、PNG、GIF、WebP、SVG、BMP、ICO

最大 10 MB · 檔案只在本瀏覽器讀取

選擇圖片後立即編碼並預覽

BASE64

Base64 編碼

等待圖片或 Base64 編碼FileReader 與 Data URI 本機處理 · 不上傳 · 不儲存

§ 01

編碼與解碼的直覺流程

加入內容

貼上或編輯 Data URI、純 Base64，也可拖曳圖片並用產生的 Data URI 取代目前內容。

檢查預覽

右側會解析編輯區內容，自動清理空白、修復填充並辨識常見圖片格式。

複製或下載

確認預覽、尺寸與大小後，複製目前編碼或下載呈現的圖片。

§ 02

Base64 改變表示方式，不改變圖片像素

Base64 將圖片二進位資料按 6 bit 分組映射為可列印字元，因此可放入 JSON、HTML 或 CSS。它是編碼而非壓縮，來回轉換不會降低畫質。

代價是大小通常增加約三分之一。小圖示可內嵌以減少請求，大圖片則會增加文件體積、失去獨立快取並可能拖慢首次載入。

§ 03

兩種方向的輸入與用途

方向

輸入

適合情境

圖片轉 Base64

JPG、PNG、GIF、WebP、SVG、BMP、ICO

網頁內嵌、API JSON、單檔報告

Base64 轉圖片

Data URI 或純 Base64

查看 API 結果、還原資源、檢查 MIME

§ 04

Data URI 適合小型且穩定的資源

Data URI 將 MIME 類型和 Base64 資料組合成可直接引用的位址。完整 Data URI 適合圖片屬性，純 Base64 適合已有獨立 MIME 欄位的 API，HTML 與 CSS 輸出則免去手動拼接。

通常只內嵌幾 KB 的圖示或裝飾資源。需要重複使用、獨立快取或體積較大的圖片，通常更適合一般 URL。

§ 05

在程式碼中轉換圖片 Base64

const dataUri = await new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = reject;
  reader.readAsDataURL(file);
});

§ 06

常見問題

Q1沒有 Data URI 前綴也能預覽純 Base64 嗎？

可以。工具會辨識 PNG、JPEG、GIF、WebP 和 SVG 的常見檔頭；無法辨識時使用你選擇的預設 MIME 類型。

Q2為什麼 Base64 會讓內容變大？

四個文字字元表示三個原始位元組，因此內容通常增加約三分之一，完整 Data URI 還會多出少量前綴。

Q3圖片轉 Base64 會降低品質嗎？

不會。工具讀取原始檔案位元組，只改變表示方式，不會重新取樣或壓縮。

Q4圖片會上傳或編碼會儲存嗎？

不會。讀取、校驗、預覽和下載都在目前瀏覽器完成，不會上傳或寫入瀏覽器儲存空間。

Q5為什麼 Base64 無法顯示？

可能是內容被截斷、混入不支援字元、MIME 類型與位元組不符，或資料本身不是瀏覽器能解碼的圖片。