點擊或拖曳上傳圖片
支援 JPG、JPEG、PNG、GIF、BMP、WebP、AVIF、SVG 格式，單張最大 50MB
輸出設定
為什麼選擇易工具的圖片Base64互轉器？
毫秒級即時轉換
上傳圖片後即時輸出Base64編碼，無需等待伺服器回應，本機Canvas渲染速度提升10倍。
本機處理不上傳
所有轉換均在瀏覽器完成，圖片檔案不會離開您的裝置，敏感檔案和商業素材100%安全。
多格式一鍵複製
提供純Base64、HTML img標籤、CSS background、Markdown四種程式碼格式，直接複製貼上即用。
全格式圖片支援
涵蓋JPEG、PNG(含透明)、GIF、WebP、BMP、AVIF、SVG、HEIC等主流格式，單檔案最大50MB。
視覺化資訊面板
顯示原圖尺寸、原始大小、編碼後大小、體積膨脹率等關鍵參數，助您決策是否內嵌。
全端裝置適配
完美適配Windows、macOS、Linux桌面系統，iOS/Android行動裝置以及平板電腦，響應式設計。
使用步驟詳解
選擇或拖曳圖片
點擊上傳區域開啟檔案瀏覽器，或直接將本機圖片拖曳到虛線框內。可處理最大50MB的單張圖片。
調整輸出參數（可選）
根據需求選擇輸出格式（保持原格式/JPG/PNG/WebP），調節壓縮品質。建議WebP格式在同等畫質下體積最小。
選擇程式碼格式
根據使用場景選擇：純Base64字串、HTML img標籤（網頁嵌入）、CSS background（樣式表）、Markdown（文件/筆記）。
複製或下載結果
點擊「一鍵複製程式碼」直接貼上到專案中，或下載為txt檔案備份。反向操作：貼上Base64可立即還原圖片並下載。
什麼是Base64圖片編碼？科普詳解
Base64 編碼原理
Base64是一種基於64個可列印ASCII字元（A-Z、a-z、0-9、+、/）來表示任意二進位資料的編碼方案。編碼時將每3位元組（24位元）二進位資料拆分為4組6位元，每組對應一個Base64字元，不足3位元組時用=號填充。例如：將PNG圖片的二進位像素資料轉換為純文字字串，即可直接嵌入HTML、CSS、JSON、XML等文字格式中，無需單獨的圖片檔案。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVduwg...
Base64 圖片的應用場景
- CSS小圖示內嵌：網站小於8KB的小圖示、按鈕背景圖直接寫入CSS檔案，減少HTTP請求數，提升首屏渲染速度。
- HTML郵件嵌入圖片：郵件用戶端通常遮蔽外連圖片，使用Base64內嵌可確保圖片直接顯示無需用戶手動下載。
- 單檔案HTML分發：製作離線HTML報告、電子書、簡報時將所有圖片內嵌，打包為單個檔案便於傳輸分享。
- 前端本機儲存：在localStorage、IndexedDB、Web SQL中快取圖片資料，實現離線可用的PWA應用。
- JSON/API傳輸圖片：行動裝置與伺服器通訊、微服務呼叫時避免檔案上傳協定，直接將小圖Base64放入JSON欄位。
- Canvas匯出圖片：前端Canvas繪製的QR Code、海報、圖表匯出時toDataURL()方法本身就回傳Base64字串。
常見錯誤與正確做法說明
將幾百KB甚至幾MB的大圖轉為Base64寫入HTML/CSS，不僅檔案膨脹33%，還阻塞HTML/CSS解析，首屏白屏時間大幅增加。
✅ 正確：僅對 ≤10KB 的圖示使用內嵌；大圖使用CDN獨立URL + 懶載入。
直接貼上純Base64字串到img src，瀏覽器無法識別格式導致圖片裂開。
✅ 正確：使用標準格式 data:image/jpeg;base64,{編碼}，或勾選本工具「包含Data URI前綴」選項。
照片類JPG圖片強行轉PNG輸出，不僅體積成倍增加，畫質也無任何提升。
✅ 正確：照片選JPG/WebP；圖示/截圖帶透明選PNG；需要最高壓縮率選WebP。
為美化程式碼在Base64中間插入換行或空白，部分老舊瀏覽器解析失敗。
✅ 正確：保持Base64為連續單行；CSS中如需換行請用反斜線\轉義換行字元。
常見問題 FAQ
Q1：圖片轉Base64編碼後體積會變大多少？
Base64編碼將每3位元組二進位資料轉為4個ASCII字元，因此編碼後資料體積約增加33.3%。例如：100KB圖片編碼後約為133KB，1MB圖片編碼後約為1.33MB。建議僅對小於10KB的小圖示和縮圖使用Base64內嵌方式，大圖片仍使用獨立URL位址配合瀏覽器快取更佳。
Q2：使用本工具上傳的圖片會被儲存到伺服器嗎？隱私安全嗎？
絕對安全，不會上傳。本工具完全基於HTML5標準的FileReader API和Canvas API實現，所有檔案讀取、編碼轉換、圖片解碼操作均在您的瀏覽器本機沙箱中完成，圖片檔案的二進位資料不會產生任何網路上傳請求。您可以在瀏覽器開發者工具→網路面板中驗證：轉換過程中全程無XHR/Fetch請求。商業機密圖片、個人照片、含敏感資訊的截圖均可放心使用。
Q3：HTML中使用Base64內嵌圖片有什麼優缺點？
✅ 優點：（1）減少HTTP請求次數，加快小圖示載入速度；（2）避免圖片路徑失效、跨域、防盜鏈問題；（3）便於打包單檔案HTML/CSS分發和離線查看；（4）郵件中可直接顯示無需下載附件。
❌ 缺點：（1）體積增大33%，浪費頻寬和流量；（2）無法利用瀏覽器圖片快取（每次修改CSS/HTML需重新下載）；（3）增大CSS/HTML檔案體積，阻塞頁面關鍵渲染路徑；（4）IE8以下舊瀏覽器不支援；（5）程式碼可讀性差，原始檔臃腫。
最佳實踐：單張圖片 ≤ 8KB 且該頁面全站複用 → 用Base64內嵌；否則使用獨立圖片URL + CDN加速。
Q4：Base64編碼圖片支援哪些瀏覽器？最大尺寸限制是多少？
✅ 瀏覽器相容：Chrome 4+、Firefox 3.6+、Safari 5+、Edge全版本、Opera 11.5+；IE 8支援最大32KB Base64，IE 9+無限制。行動端iOS Safari 4.2+、Android 2.3+全支援。
📐 實際尺寸限制：瀏覽器本身無硬性限制，但建議單張Base64內嵌圖片不超過200KB，否則嚴重拖慢頁面載入速度。超過1MB的圖片使用獨立URL是更穩妥的方案。
Q5：Base64轉圖片失敗、顯示裂開或亂碼怎麼辦？
按照以下順序排查90%以上的問題：
1️⃣ 檢查空白字元：將Base64中的換行、空白、定位字元全部刪除，只保留連續的A-Za-z0-9+/=字元。部分網站複製程式碼時會自動插入換行符。
2️⃣ 檢查前綴完整性：確保格式為 data:image/正確格式;base64,。常見錯誤：png寫成jpg導致png圖片解碼失敗。
3️⃣ 檢查字元遺漏：Base64字元數必須是4的倍數，結尾0-2個=號填充。末尾少1個字元會導致整張圖片無法解碼。
4️⃣ 檢查來源完整性：確認Base64來源是完整的圖片檔案，非僅部分片段。可先用本工具反向解碼再重新編碼比對。