圖片檔案與Base64(Data URI)相互轉換
簡單3步完成轉換:
拖放圖片檔案或點選選擇
支援格式: PNG, JPEG, GIF, WebP, SVG (建議最大10MB)
圖片的Base64編碼在Web開發中有以下應用場景:
將小圖示或Logo圖片直接嵌入HTML的<img>標籤或CSS的background-image中,可以減少HTTP請求,提高頁面載入速度。特別適合作為圖示字型的替代方案。
不使用將多個小圖片合併到一個檔案的「CSS Sprite」,而是將每個圖片Base64編碼後嵌入CSS,管理更加簡便。
某些郵件用戶端會封鎖外部圖片載入,因此將重要圖片(如Logo)作為Data URI嵌入可以確保顯示。
在JSON API中傳送和接收圖片資料時,透過Base64編碼可以將二進位資料作為文字格式處理。無需使用多部分通訊,只需簡單的JSON格式即可傳輸圖片。
在Progressive Web Apps (PWA)或Electron應用中,將圖片Base64編碼後嵌入HTML,即使在離線環境下也能確保顯示圖片。
在React Native、Ionic、Flutter等跨平台框架中使用Base64編碼的圖片,可以統一不同平台間的圖片處理方式。
Data URI(資料URI,也稱為Data URL)是一種URL方案,用於將圖片或字型等小檔案直接嵌入HTML或CSS。它將檔案內容Base64編碼為文字,並作為URL的一部分表示。
Data URI採用以下格式:
data:[MIME類型];[編碼方式],[編碼後的資料] 範例(PNG): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
支援PNG、JPEG、GIF、WebP、SVG等瀏覽器支援的所有圖片格式。最常見的是PNG和JPEG。
技術上沒有限制,但考慮到效能和瀏覽器記憶體,建議10MB以下。實際應用中,5KB以下的小圖片最有效。
Base64編碼後約為原檔案大小的133%(增加約33%)。例如,9KB的圖片會變成約12KB的Base64字串。
是的,透明PNG圖片可以直接轉換。透明資訊會保留,嵌入HTML或CSS後也能正確顯示透明效果。
直接貼上到<img>標籤的src屬性中。例:<img src="data:image/png;base64,iVBORw0KG...">
像這樣貼上到url()函式中:background-image: url('data:image/png;base64,iVBORw0KG...');
不會,所有處理都在瀏覽器中完成。圖片資料絕不會傳送到伺服器。
是的,本工具完全免費,無論商業或非商業用途都可自由使用。
Encode image data in Base64
Convert image file formats
Encode and decode Base64