什麼是 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 抓檔。

常見使用情境

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

HTML / CSS / Markdown 怎麼用？

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

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

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

Data URL 雖方便，但不是萬靈丹。Base64 編碼後大小會增加約 33%，而且嵌進 HTML / CSS 後會跟著文件一起重新下載，無法被瀏覽器獨立快取。

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

為什麼編出來比原圖大？

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

常見問題

為什麼 Gmail 看不到我嵌的圖？

Gmail 對整封信總大小 102 KB 有「自動截斷」限制，超過會被收進「顯示完整郵件」連結後面。Data URL 圖很容易把信撐爆。建議：保留外部圖片連結，或圖縮成 < 50 KB 再嵌。

Data URL 有長度上限嗎？

規範本身沒有上限，但實作有：Chrome 約 2 MB、Firefox 約 32 MB、Safari 約 2 MB。本工具擋在 5 MB 是預防保護，避免 Base64 後撐爆瀏覽器分頁記憶體。實務上圖 > 100 KB 就該考慮獨立檔案了。

SVG 也要轉 Base64 嗎？

通常不用。SVG 本身就是文字，可以直接 URL-encode 後嵌進 CSS（data:image/svg+xml,...），體積比 Base64 小。Base64 比較適合 PNG / JPG 這種二進位格式。

會壓縮圖片嗎？

不會。本工具只做格式轉換（檔案 → Data URL），品質不變，檔案也不會變小。需要先壓縮再轉，請用圖片壓縮工具先處理。

圖片去了哪裡？

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

圖片轉 Base64