如何使用
- 將 PNG、JPG、SVG、WebP 或 GIF 圖片拖到上傳區，或點擊選擇檔案。
- 在預覽區確認圖片、MIME 類型、原始大小和 Data URI 大小。
- 按需複製完整 Data URI、純 Base64 字符串、CSS
background-image或 HTML<img>代碼。 - 將代碼貼上到 CSS、HTML、郵件模板或 JSON 配置中。
示例：點擊「載入 SVG 示例」，工具會生成一個本機 SVG 圖示並轉換爲 Data URI，你可以直接複製 CSS 或 HTML 片段。
核心功能
- 即時生成 Data URI：拖曳輸入圖片後在瀏覽器中生成
data:image/...;base64,...，可直接用於前端代碼。 - CSS 與 HTML 代碼片段：一鍵複製 CSS
background-image或 HTML<img>標籤，不必手寫前綴。 - 支援常見 Web 圖片格式：可處理 PNG、JPG、SVG、WebP、GIF、AVIF 等瀏覽器可讀取的圖片。
- 批次圖片隊列：一次拖曳輸入多張小圖示或郵件素材，逐個預覽並複製需要的代碼。
- 100% 本機隱私：圖片通過原生
FileReader在當前設備讀取，不上傳到伺服器。
相關工具
線上 Base64 轉換工具：支援圖片/檔案轉 Base64 Data URL，或將 Base64 還原爲可下載檔案。支援 WebP、批次處理與 CSS background 代碼生成，純本機不上傳。
在瀏覽器本機將 Base64 或 Data URI 還原爲圖片，即時預覽並下載爲原始格式、PNG、JPG 或 WebP。
免費線上 JSON 工具：一鍵美化/壓縮、語法校驗、錯誤高亮，並自動生成 TypeScript 接口與 Zod Schema。純瀏覽器本機處理，資料不上傳。
免費的 JSONPath Tester / Evaluator：貼上 API JSON，實時提取匹配節點、查看路徑並複製 JSON 結果。解析與查詢都在瀏覽器本機完成。
在瀏覽器本機將 JSON 對象或對象數組轉換爲 CSV，展開嵌套字段，預覽結果並複製或下載檔案，無需上傳資料。
將 CSV 文本或檔案在瀏覽器本機實時轉換爲 JSON 數組，支援表頭、逗號/分號/Tab 分隔、拖曳檔案、複製和下載，無需上傳資料。
在瀏覽器本機比較兩個 JSON，按 Key 排序後做語義化 Diff，忽略字段順序幹擾，標記新增、刪除和修改字段，無需上傳資料。
把格式化 JSON 壓縮爲一行，移除縮進、換行和多餘空白，並實時查看壓縮前後體積與節省比例。
計算邏輯
Base64 會把二進位圖片資料編碼成 ASCII 字符串，因此可以直接嵌入 HTML、CSS 或 JSON。Data URI 的基本結構是 data:[mime-type];base64,[encoded-data]，瀏覽器可以把它當作圖片資源讀取。
需要注意：Base64 不是圖片壓縮。編碼後體積通常會增加約 33%，因此更適合小圖示、Logo、郵件內聯圖片或減少少量 HTTP 請求的場景；大照片和大量素材通常仍建議使用普通圖片檔案並配合壓縮工具。
常見問題
爲什麼要把圖片轉成 Base64？
常見用途是把小圖示、郵件圖片或配置中的小型圖片直接嵌入代碼，減少外部請求或避免郵件使用者端攔截遠程圖片。
Base64 會壓縮圖片嗎？
不會。Base64 編碼通常會讓體積增加約 33%。它最佳化的是嵌入和請求數量，不是圖片存儲大小。
支援哪些圖片格式？
支援 PNG、JPG、JPEG、SVG、WebP、GIF、AVIF 等瀏覽器能讀取的圖片格式。
我的圖片會上傳嗎？
不會。轉換使用瀏覽器原生 FileReader.readAsDataURL 完成，圖片不離開當前設備。
可以直接複製 CSS 或 HTML 嗎？
可以。每張圖片都會生成完整 Data URI、純 Base64、CSS background-image 和 HTML <img> 代碼。