圖片轉 Base64 資料 URI
上傳圖片並轉換為 Base64 資料 URI，可直接嵌入 HTML、CSS 或 JavaScript，無需額外 HTTP 請求。
此轉換僅在您的瀏覽器中執行，不會上傳任何內容。
拖放圖片，或在下方選擇
PNG、JPEG、GIF、SVG、WebP · 最大 10 MB
UTF-8 文字 Base64（非圖片）請使用 Base64 編碼器與解碼器
這個工具是什麼？
用瀏覽器 FileReader 讀取本機圖片，產生完整 data URI（data:image/…;base64,…）或 純 Base64（僅載荷）。複製前可預覽確認。
適合小圖示、自包含示範與測試夾具。Base64 約增大三分之一，且繞過 URL 快取；大圖應放 CDN／靜態託管，不要塞進 HTML 或郵件正文。
上限 10 MB。必須內嵌時請優化到數百 KB 以下。
常見用途
- 組出無需額外請求的
imgsrc或 CSSbackground-image: url(…) - 在 HTML 郵件／簽名嵌入小 logo（注意整封郵件體積）
- 產生測試用 Base64 夾具，無需提交二進位檔
如何使用
- 將圖片拖入投放區或瀏覽選擇（PNG、JPEG、GIF、SVG、WebP · 最大 10 MB）。
- 確認預覽與 MIME／體積晶片。
- 選擇 Data URI 或 純 Base64，然後 複製。
- Sample 載入 1×1 PNG；Clear 重設。
範例
| 用途 | 形態 | 說明 |
|---|---|---|
| HTML 圖片 | <img src="data:image/png;base64,…" alt=""> | Data URI 分頁；圖示保持很小。 |
| CSS 背景 | background-image: url("data:image/svg+xml;base64,…") | SVG 通常更省體積。 |
| API／設定欄位 | 不要 data: 前綴的純 Base64 | Raw 分頁。 |
| 郵件中的大圖 | 用託管 URL，勿用 Base64 | 用戶端常有容量上限。 |
實務上常見陷阱
- 郵件體積： Base64+MIME 易超過 Gmail／Outlook 限制；照片走託管，內嵌僅留微型圖示。
- 大 data URI 增加記憶體與渲染成本；超過約 500 KB 時介面會警告。
- 僅面向圖片。UTF-8 文字 Base64 請用文字工具。
參考資料
最後審閱: 2026-07-27
常見問題
- Data URI 與純 Base64 差在哪？
- Data URI 形如 `data:image/png;base64,…`，可直接用於 `img` `src` 或 CSS `url()`；純 Base64 只有逗號後內容，適合只要 Base64、不要 `data:` 前綴的 API。
- 應該把大圖內嵌進郵件或 HTML 嗎？
- 通常不建議。Base64 約增大三分之一，且許多郵件用戶端有容量上限。照片用託管 URL；內嵌留給小圖示。
- 圖片會上傳到伺服器嗎？
- 不會。僅用瀏覽器 FileReader 本機讀取。
- 和文字 Base64 工具有何不同？
- 本頁處理圖片檔→data URI／純 Base64；文字工具面向 UTF-8 字串（API、Basic Auth），不是二進位圖片。