如何使用
- 將 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在當前設備讀取，不上傳到伺服器。
相關工具
2026 最新 FIRE 財務自由計算機(剔除通膨版)。拒絕虛高數字，精準模擬實際購買力下的複利增長。支援 4% 法則驗證與退休金缺口反向推算。支援一鍵匯出 CSV，完美適配 Excel 或 Notion 財務看板。隱私優先，本機計算零上傳。
根據帳戶資金、風險比例、進場價和停損價計算交易倉位。所有計算在瀏覽器本機完成，不上傳帳戶資料，可對比多檔風險方案。
輸入本金、定期投入、年化報酬率和投資年限，計算複利增長結果，並用互動式圖表展示本金、利息和最終總額。資料僅在本機計算。
使用 Loan Calculator／Mortgage Calculator 在瀏覽器本機計算每月還款額、總利息與還款明細。輸入貸款金額、年利率和期限，立即查看圖表與還款計畫表。
使用 Investment Calculator／ROI Calculator 在瀏覽器本機估算初始本金、每月定期定額、年化報酬率和通膨後的投資結果。立即查看複利圖表、本金／收益拆解、ROI 與年度明細。
使用 APR to APY Calculator 在瀏覽器本機完成 APR/APY 雙向換算。輸入利率並選擇複利頻率，立即查看有效年利率、差值和多頻率比較表。
使用這款利潤率計算機在瀏覽器本機計算毛利、Margin 和 Markup。輸入成本和售價，或輸入成本與目標毛利率，立即推算售價並避免把加成率誤當利潤率。
使用 CPM 與 CPC 計算機在瀏覽器本機試算廣告花費、曝光數、點擊數、CPM、CPC 和 CTR。輸入預算與目標成本，快速推演可獲得的曝光或點擊。
計算邏輯
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> 代碼。