圖片轉 Base64

什麼是 Data URL？

Data URL（資料網址）是 1998 年 IETF RFC 2397 定義的格式，把整個檔案內容直接寫進「網址字串」，不必透過獨立 HTTP 請求載入。結構：

data:[mediatype][;base64],<data>

圖片例子：data:image/png;base64,iVBORw0KGgo...。HTML 的 <img src>、CSS 的 background-image: url()、Markdown 的 ![](...) 都能直接放這串字，瀏覽器看到 data: 開頭就會解碼成圖片，不會額外發 request 抓檔。

自己動手做這件事的人常卡在兩個地方。第一，命令列的 base64 只吐出後半段那串字，前面的 data:image/png;base64, 得自己補，型別寫錯（把 JPG 標成 png）某些瀏覽器會直接不顯示。 第二，把輸出貼進編輯器時多出換行，Data URL 裡不能有換行，圖就變成破圖。 本頁產生的是已經接好前綴、單行、可以直接貼的字串。

何時用 Data URL、何時用獨立檔案？

Base64 編碼後大小會增加約 33%，而且嵌進 HTML / CSS 後會跟著文件一起重新下載，無法被瀏覽器獨立快取。

• 適合 Data URL：< 2 KB 的小圖示、單檔 Markdown 文件、離線網頁、mock 資料
• 適合獨立檔案：> 10 KB 的圖、會在多頁面共用的資源（共用後可被快取）、會頻繁更新的圖
• 實務分界：以前的 webpack 預設 8 KB 自動轉 Data URL，現代框架（Next.js / Vite）多採類似閾值。8 KB 以下嵌進去、以上保留檔案

常見使用情境：

• 單檔分發的 Markdown 報告：把圖塞進 .md，整份文件一個檔案，不怕外部連結失效或路徑跑掉
• 小 icon / Logo 內聯：把 < 2 KB 的 SVG / PNG 寫進 CSS，減少 HTTP request 數
• Mock / 測試資料：把圖塞進 JSON 做整合測試，不用準備真實檔案路徑
• 離線網頁：HTML 單檔含所有資源，無網路也能完整顯示

為什麼編出來比原圖大？

Base64 把每 3 個位元組編成 4 個 ASCII 字元，體積必然變大約 33%。再加上 Data URL 前綴（data:image/png;base64, 約 22 字元），極小的圖會看到「比原始大很多」的錯覺，但對絕對大小（KB 級）影響可忽略。

轉一張圖，挑你要的那種寫法

1. 把圖片拖進虛線框，或點「選擇檔案」。單檔上限 5 MB，因為 Base64 本來就不適合大圖。
2. 清單那一行會寫原始大小與 Base64 之後的長度，兩個數字差多少一眼就看得到。
3. 點那一行，下方預覽就會切到這張圖。 五個分頁分別是 Data URL、Raw Base64、HTML、CSS、Markdown。
4. 要直接貼進 <img src> 或 url() 就用 Data URL；要自己接前綴、或送進後端解碼，用 Raw Base64。
5. HTML、CSS、Markdown 三個分頁是幫你接好語法的整段片段，複製就能貼。
6. 按每個分頁右邊的複製鈕，不要反白拖曳。字串很長，手動選很容易漏掉尾巴， 少一個字元圖就出不來。

一次轉一整批、順便拿到一份對照用的 HTML

1. 一次拖進多張，建議 50 張以內。超過 5 MB 或不是圖片的檔案會被略過，並跳出提示說略過幾個、原因是什麼。
2. 上方顯示「處理中（幾張 / 共幾張）」。全程在你的瀏覽器裡跑， 速度只看這台機器，跟網速無關。
3. 點清單裡任何一張切換下方預覽；不需要的用那一行右邊的 ✕ 移掉，或按「清空」整批重來。
4. 只要某一張的純文字檔，用那一行的下載鈕存成 .base64.txt。
5. 按「全部下載 ZIP」把整批打包。每張一個 .base64.txt，同名的自動加編號， 另外附一個 output.html。
6. 用瀏覽器打開那份 output.html，所有圖會一次顯示出來、下面標著原始檔名。 這是最快的驗收方式：圖出得來，代表那串字是完整的。

HTML / CSS / Markdown 怎麼用？

本工具產生的 Data URL 三種貼法：

• HTML：<img src="data:..." />
• CSS：background-image: url("data:...");
• Markdown：![alt](data:...)

三個分頁複製出來的片段都是可以直接貼的完整語法，但 alt 是空的，貼進去之後請自己補上這張圖在說什麼， 讀螢幕的人與圖載不出來的時候都靠它。

• 貼進編輯器之後：確認它是一整行，中間不能被自動換行切開。
• 字串太長不好帶：用下載鈕存成 .base64.txt，或整批下載 ZIP，再用編輯器打開來貼。
• 要反過來把字串還原成圖片：工具上方切到「Base64 → 圖片」，貼上就能預覽與下載。字串解出來是文字而不是圖片的話，改用Base64 編碼解碼。

哪些地方吃 Data URL、哪些不吃

• 瀏覽器：各家對 Data URL 的長度上限不同，現在都在數百 MB 以上，數字見下方常見問題。
• 有設 CSP 的網站：內容安全政策的 img-src 沒有列出 data: 時，內嵌圖會被擋下， 瀏覽器主控台會直接寫是哪一條規則擋的。自架的站要嵌就要記得放行。
• Email：Gmail（網頁版與手機 App）與 Windows 版 Outlook 2016 以前都不顯示 data: 內嵌圖片，Apple Mail 與 Outlook.com 會顯示。 要穩定顯示，傳統做法是把圖當附件、用 CID 參照，或改用外部圖片連結。
• 別人家的 Markdown：不少平台的 Markdown 會基於安全考量過濾掉 data: 開頭的圖片來源，貼上去就是空白。 自己保存、自己分發的 .md 與離線 HTML 沒有這個問題， 要貼到某個平台之前先用一張小圖測一次。
• 版本控制：把大張 Data URL 寫進原始碼，diff 會變成幾萬字元的一行， code review 幾乎沒辦法看。8 KB 以上的圖留成獨立檔案，對協作比較友善。

注意事項與圖片去向

• Base64 是編碼、不是加密：沒有金鑰、誰都能還原。 私密的截圖、證件、合約不要用內嵌的方式放進公開文件。
• 會拖慢首屏：內嵌的圖 跟 HTML 或 CSS 綁在一起下載，沒辦法延後載入、也無法獨立快取， 大圖內嵌等於把首屏的體積直接加上去。
• 不會壓縮、也不會改尺寸：本頁只是換一種表示法，原圖多大就編多大，要縮請先壓縮再來轉。
• 記得補 alt：複製出來的 HTML 與 Markdown 片段 alt 都是空的，直接上線等於少了一張圖的替代文字。

哪裡都沒去。FileReader 把檔案讀進你分頁的記憶體，轉出 Base64 字串就結束了，關掉分頁記憶體就釋放。 過程零網路請求，這也是為什麼轉大圖時速度只取決於你的電腦，跟網速無關。