編碼 | 嵌入 | 最佳化

> 編碼 | 嵌入 | 最佳化 <

// 將圖片轉換為Base64字串,用於網頁開發和資料嵌入

🖼️

將圖片拖放到此處或點擊選擇

點擊瀏覽檔案

// 支援:PNG、JPEG、GIF、WebP、SVG
0 字元
[安全]

本地處理

100%客戶端圖片編碼。您的檔案永遠不會離開瀏覽器。

[快速]

拖放上傳

透過拖放介面快速上傳。瞬間Base64轉換。

[免費]

無限制

編碼任意大小或格式的圖片。無需註冊或API金鑰。

// 常見問題

問:什麼是圖片轉Base64編碼?

答:圖片轉Base64編碼是使用Base64編碼將二進位圖片資料轉換為文字字串的過程。對於直接在HTML、CSS、電子郵件或API中嵌入圖片而無需單獨檔案至關重要。

問:圖片轉Base64轉換有多安全?

答:100%安全的本地處理。所有圖片編碼都在您的瀏覽器中進行。零伺服器上傳。您的圖片永遠不會離開裝置。

問:支援哪些圖片格式?

答:支援所有常見網頁圖片格式:PNG、JPEG、GIF、WebP、SVG、BMP等。保持原始圖片品質和格式。

問:如何在HTML中使用Base64圖片?

答:使用資料URI格式:<img src="data:image/png;base64,YOUR_BASE64_STRING">。非常適合內嵌圖片、圖示或減少HTTP請求。

問:有檔案大小限制嗎?

答:沒有伺服器端限制。處理在您的瀏覽器本地進行。大檔案可能需要更長時間編碼但可以正常運作。

// 常見圖片格式與 MIME 類型

格式MIME 類型
PNGimage/png
JPEGimage/jpeg
GIFimage/gif
WebPimage/webp
AVIFimage/avif
SVGimage/svg+xml

// 程式碼中的 Data URI

HTML     <img src="data:image/png;base64,iVBORw0KGgo..." alt="">
CSS      background: url("data:image/svg+xml;base64,PHN2Zy...");
Linux    base64 -w0 logo.png
macOS    base64 -i logo.png
Python   base64.b64encode(open('logo.png','rb').read()).decode()
Node.js  fs.readFileSync('logo.png').toString('base64')

>> 更多問題

問:為什麼 Base64 圖片會大約增大 33%?

答:Base64 把 3 個位元組編碼為 4 個字元,體積增加約三分之一,gzip 只能部分抵銷。因此內嵌圖片只適合很小的檔案(幾 KB)。

問:Data URI 相較一般圖片檔有什麼缺點?

答:內嵌圖片無法單獨快取,會增大 HTML 或 CSS,並在每次載入該檔案時重複傳輸。較大的圖片請使用獨立檔案。

問:SVG 應該用 Base64 內嵌嗎?

答:通常不需要:SVG 本身是文字。經 URL 編碼的 data:image/svg+xml,… 往往比 Base64 更小且可讀。不過 Base64 在各處都能穩定運作。