圖片轉 Base64

將圖片轉換為 Base64 Data URI 字串

這個工具用 FileReader 把圖片檔案讀成一串 Data URI，讓你能夠直接把圖寫進 HTML、CSS 或 JSON，不必再多一個檔案、多一次請求。它是這個分類裡唯一不碰畫布的工具 —— 位元組原封不動地被轉成文字，一個像素都沒有重新計算過。

使用步驟

  1. 把圖片拖進虛線框或點開選擇器。讀取是即時的，沒有「開始轉換」這種按鈕要按。
  2. 上方會出現一張 64 × 64 的小預覽，右邊列出檔名，以及一行 MIME 型別 · 大小 KB。這排資訊的用途是確認你真的讀到了預期的那個檔案。
  3. 下面四張卡片分別是完整的 Data URI、純 Base64（去掉 data: 前綴的酬載）、包好的 HTML <img> 標籤，以及 CSS background-image 寫法。挑最接近你貼上目的地的那一種。
  4. 按卡片右上角的「複製」，按鈕會變成「已複製」約兩秒。卡片裡只顯示前 80 個字元加一個刪節號，但複製到剪貼簿的是完整字串，不要以為被截斷了。
  5. 換一張圖就直接再丟一次，四張卡片會一起換掉。這裡沒有下載按鈕，輸出只走剪貼簿。

什麼時候用得上

把小圖示直接寫進樣式表

幾百位元組的箭頭、勾勾、載入動畫這類裝飾用小圖，內嵌成 background-image 可以省掉一次來回請求，在高延遲的行動網路上，省下的往返時間往往比多出來的那三成位元組值錢。判斷界線抓在幾 KB 以內：真正的內容圖片、照片、大型插畫都不該走這條路。

做一個不依賴任何外部檔案的單檔 HTML

報表、離線說明頁、寄給客戶的成果展示，如果圖片是外連的，對方換一台電腦打開就全是破圖。把圖都轉成 Data URI 貼進 <img> 標籤，整份檔案就變成自足的一個 .html，用 email 寄、放隨身碟、丟進封存資料夾都不會缺東西。

把圖塞進只吃 JSON 或 YAML 的設定檔

有些系統的設定是一份純文字檔（儀表板定義、外掛 manifest、佈景設定），沒有給你上傳圖片的地方，卻允許欄位裡放一段 Data URI。這時把 logo 轉成字串貼進去是唯一的辦法，也順便讓那份設定檔可以整包進版控。

在測試裡放一張固定不變的圖片

單元測試需要一張圖當輸入時，最麻煩的就是相對路徑與測試執行目錄的糾纏。把一張幾 KB 的小圖寫成常數放在測試檔裡，測試就不再依賴檔案系統，CI 換一台機器跑也不會突然找不到檔案。

限制與注意事項

  • Base64 的規則是每 3 個位元組編成 4 個字元，所以輸出必然比原檔大約三分之一，再加上 data:image/png;base64, 這段前綴。一張 50 KB 的圖大約會變成 68 KB 的文字，內嵌之前請先確定省下一次請求划得來。
  • 因為位元組沒有被重繪，EXIF 也就完整地留在編碼結果裡 —— 拍攝時間、相機型號，手機直出的照片還可能包含 GPS 座標。這一點和同分類其他三個工具正好相反，那些工具經過畫布之後 metadata 就沒了。要把照片內嵌進公開的頁面之前，請先想清楚這件事。
  • 卡片上顯示的那一行是截斷過的預覽，只有前 80 個字元；真正的內容在剪貼簿裡。複製走的是 navigator.clipboard，如果瀏覽器擋下剪貼簿權限，按鈕不會變成「已複製」，畫面上也不會有錯誤訊息，這時請改用開發者工具或換一個瀏覽器。
  • 那行 MIME 型別是從 Data URI 的開頭解析出來的，而它的源頭是作業系統依副檔名判斷的 file.type，不是真的去嗅探檔案內容。把一個 ZIP 改名成 .png 一樣能通過檢查並編碼成功，只是預覽圖會壞掉。
  • 檔案大小一律換算成 KB 顯示，所以比較大的圖會看到「8192.0 KB」這種讀起來不太順的數字。那張 64 × 64 預覽用的是 object-fit: cover，是裁切不是完整縮圖，只能用來確認「圖有讀進來」。
  • 輸出用的是標準 Base64 字母表，含有 +、/ 與結尾的 =，而且不換行。這不是 URL-safe 的變體，直接塞進網址的查詢參數會出問題。
  • 這裡只有單向。它不能把一段 Data URI 還原成圖片檔案；想看某串 Data URI 到底是什麼，最快的辦法是把整串貼進瀏覽器網址列按 Enter。
  • 內嵌是有代價的：Data URI 沒有自己的網址，就不會被瀏覽器單獨快取，也做不了延遲載入。一張圖改一次，包著它的那份 CSS 或 HTML 就整份失效要重新下載。
  • 一次讀一張，10 MB 以內。不過真的丟一張接近上限的圖進來，你會得到一串一千三百多萬字元的文字，貼進編輯器或版控多半只會換來卡頓，這種尺寸的圖不適合內嵌。

常見問題

我的圖片會被上傳嗎？

不會。編碼是 FileReader.readAsDataURL 在你的瀏覽器裡完成的，結果只寫進畫面上的四張卡片，按下複製才進到你的剪貼簿，過程中沒有任何請求帶著檔案內容外流。（頁面本身仍載有廣告等第三方資源，那些請求不含你選的檔案。）

多小的圖才值得內嵌？

常見的界線落在幾 KB 以內：圖示、分隔線、單色背景這類裝飾元素。再大就得反過來算 —— 內嵌省下一次請求，卻讓包著它的檔案變大、無法單獨快取，而且每個引用它的頁面都要重新下載一份。同一張圖如果會出現在很多頁面上，維持外部檔案幾乎一定比較划算。

可以反過來把 Base64 貼回來變成圖片嗎？

這個工具沒有反向功能。想把字串變回檔案，把完整的 Data URI 貼進瀏覽器網址列開啟，再對圖片按右鍵另存新檔即可。如果你手上只有純酬載、沒有前綴，自己在最前面補上 data:image/png;base64, 再貼。

這串可以放進網址的參數裡嗎？

不能直接放。標準 Base64 含有 +、/、=，這些字元在查詢字串裡有各自的語意，需要先做百分號編碼（可以交給 URL 編碼工具）。而且網址長度在實務上有上限，圖片編碼出來的長度通常遠遠超過，這條路一開始就不太可行。

在 email 的 HTML 裡可以用嗎？

不太行。Gmail、Outlook 這些主流郵件客戶端多半會擋掉 <img> 的 data URI，收件者看到的是破圖。email 裡的正規作法是 CID 內嵌附件，或乾脆放外部連結圖片，兩者都不是這個工具能產生的。

網站套用了 CSP，內嵌圖會被擋嗎？

會，如果 img-src 沒有列入 data:。這是 Data URI 最常見的部署踩雷點：本機開檔案好好的，上線就整排圖不見，主控台留下一行 CSP 違規。解法是在政策裡加上 data:，或者接受它、改回外部圖檔。

SVG 也可以用嗎？

可以，而且是這四個圖片工具裡唯一能讓 SVG 全身而退的一個 —— 它讀的是原始位元組，向量不會被畫成點陣圖。不過 SVG 本來就是文字，先做過壓縮再貼常常比 Base64 更省；CSS 裡也可以直接內嵌經過百分號編碼的 SVG 原始碼，那種寫法比 Base64 短，只是這個工具不產生它。