Data URL 與純 Base64 有什麼差別？

Data URL 帶 data:image/png;base64, 前綴，可直接放進 CSS background-image、HTML img src 或 Markdown。純 Base64 只有編碼本體，適合放程式變數或 API 負載。本工具兩種模式都可一鍵複製。

Base64 會讓圖片變大嗎？

會。Base64 把 3 個位元組編為 4 個字元，體積膨脹約 33%，且無法被瀏覽器獨立快取。只建議用於幾 KB 的小圖示與佔位圖；正式圖片應保持為壓縮後的檔案。

CSS：background-image: url("貼上 DataURL")。HTML：。Markdown：把 DataURL 放進圖片語法的括號裡。用純 Base64 模式時，請自行補上 data:image/png;base64, 前綴（png 換成實際格式）。

不會。編碼由瀏覽器內建 FileReader 在本機完成——圖片不離開你的裝置，離線可驗證。

Base64 文字約為原圖 1.33 倍。10 MB 的圖會產生超過 13 MB 的字串，複製貼上時足以卡死編輯器。大圖請先在首頁壓縮到幾百 KB。

CSS：background-image: url("貼上 DataURL")。HTML： 。Markdown：把 DataURL 放進圖片語法的括號裡。用純 Base64 模式時，請自行補上 data:image/png;base64, 前綴（png 換成實際格式）。

圖片轉 Base64

把小圖示與圖片變成可直接內嵌的 DataURL 或純 Base64 文字，一鍵複製進你的程式碼。轉換在本機瀏覽器中運行——不上傳。

DataURL / 純 Base64 雙模式本機轉換 · 不上傳單張最大 10 MB

點擊選擇圖片，或拖曳圖片到這裡

也可以直接貼上截圖上傳

JPGPNGWebPAVIFGIFSVG

單張最大 10 MB；編碼在瀏覽器本機完成，圖片不上傳

Base64 會把體積放大約 33%，僅建議用於小圖示與行內情境

Base64 內嵌把圖片變成文字。適用場景：幾 KB 的小圖示（省一次 HTTP 請求）、HTML 郵件（許多客戶端封鎖遠端圖片）、單檔 HTML 分發（Demo、離線文件），以及 canvas 或程式碼需要直接拿到圖片資料的情況。

但它不是萬用答案：體積會膨脹約 33%，資料無法被獨立快取，過長字串還會拖慢 HTML 解析。真正的頁面配圖，正確做法是壓縮成 WebP/AVIF 檔案——同樣清晰，體積只有零頭。先壓縮，再決定要不要內嵌，效能與便利兼得。