01
1. 什麼是Base64編碼
Base64是一種將二進位資料轉換為ASCII字串的編碼方式。它可以把圖片、音訊、影片等二進位檔案以文字形式表示，從而能夠在電子郵件、JSON、XML等以文字為基礎的協定中傳輸二進位資料。它僅使用64個ASCII字元(A-Z、a-z、0-9、+、/)來表示所有二進位資料。在HTML中以Data URL方式內嵌插入圖片，或在API回應中包含圖片時非常有用。不過它的缺點是轉換後體積會比原始大小增加約33%。
🖼️ Base64圖片轉換
將圖片轉換為Base64字串，或將Base64還原為圖片。
📁
點擊或拖放圖片到此處
瞭解更多
02
2. Base64圖片的應用場景
Base64圖片在各種Web開發場景中都有應用。在CSS中用background-image內嵌插入小圖示，可以減少HTTP請求次數，從而提升頁面載入速度。在郵件範本中，它被用於繞過外部圖片被封鎖的問題。當以單一HTML檔案形式發布完整網頁時，可以將所有圖片以Base64形式包含進去。在RESTful API中，可以將圖片直接包含在JSON回應裡，無需單獨上傳檔案即可傳輸。將Canvas API產生的圖片傳送到伺服器時，也會使用Base64。
03
3. Data URL格式
Data URL是一種以URL形式表示檔案的方案。格式為data:[<mediatype>][;base64],<data>。例如: data:image/png;base64,iVBORw0KG... mediatype為MIME類型，可指定image/png、image/jpeg、image/gif等。;base64表示編碼方式，其後是實際的Base64字串。在HTML的img標籤中可以像<img src="data:image/png;base64,...">這樣直接使用。在CSS中也可以用background: url(data:image/svg+xml;base64,...)的形式使用。瀏覽器會像處理一般URL一樣處理Data URL來顯示圖片。
04
4. 效能最佳化注意事項
使用Base64圖片時需要考慮效能。對於小圖片(1-2KB以下)，內嵌插入比HTTP請求的開銷更有利。而大圖片由於Base64帶來的33%體積增加以及解析開銷，反而可能變慢。Base64圖片無法利用瀏覽器快取，每次都會隨HTML/CSS一起下載。對於反覆使用的圖片，最好以單獨檔案的形式提供以便快取。Gzip壓縮對Base64字串同樣有效，因此請在伺服器端啟用它。將Base64用於裝飾性圖片或圖示(而非關鍵內容)是比較合適的做法。
05
5. 安全注意事項
Base64圖片同樣存在安全風險。在將使用者上傳的圖片轉換為Base64並顯示時，需要警惕XSS攻擊。SVG圖片由於可以包含JavaScript，因此尤其危險。可以透過Content-Security-Policy回應標頭來限制data:方案的使用。設定檔案大小上限，以防止記憶體耗盡攻擊。進行圖片類型驗證，只處理允許的MIME類型(image/png、image/jpeg)。應在伺服器端驗證是否為真實的圖片檔案，並檢查其中是否包含惡意程式碼。
06
6. 各程式語言的Base64轉換
大多數程式語言都原生提供Base64編碼。JavaScript用btoa()進行編碼、atob()進行解碼，並可透過FileReader API將檔案讀取為Base64。Python在base64模組中提供b64encode()和b64decode()。PHP使用base64_encode()和base64_decode()函式。Java透過java.util.Base64類別提供getEncoder()和getDecoder()。Node.js用Buffer.from(data).toString("base64")進行編碼，用Buffer.from(base64, "base64")進行解碼。讀取圖片檔案並轉換為Base64的操作，在所有語言中都能用標準函式庫輕鬆實現。