使用方法
- 將 PNG 拖到上傳區域，點選選擇檔案，或從剪貼簿貼上截圖。
- 保持原格式即可編碼 PNG 的原始位元組；圖片過大時，可以設定最大寬度縮小尺寸。
- 對比頁面顯示的原始大小和編碼後大小。
- 複製或下載 Data URI、純 Base64、img 標籤、CSS 或 Markdown 輸出。
PNG 與 Base64
PNG（行動式網路圖形，MIME 型別為 image/png）是一種無損點陣圖格式，支援完整的 Alpha 透明通道，因此常用於圖示、Logo、示意圖和截圖。所有 PNG 檔案都以相同的 8 位元組簽名開頭，所以 PNG 的 Data URI 也總是以 data:image/png;base64,iVBORw0KGgo... 開頭。
Base64 不會改動任何像素。解碼後得到的檔案與原檔案逐位元組相同，顏色和透明區域都完全一致。
適合使用 PNG Data URI 的場景
- 需要透明背景的小型介面圖示和 Logo。
- 嵌入自包含 HTML 報告、缺陷報告或匯出文件中的截圖。
- 伺服器生成後通過 JSON 返回的圖表和二維碼。
- 由
canvas.toDataURL()生成的圖片，它預設輸出的就是 PNG 格式的 Data URI。
編碼前先壓縮 PNG
PNG 每減少 1 個位元組，Base64 就少大約 1.33 個字元。編碼前可以先用 oxipng、zopflipng（無損）或 pngquant（減少調色盤顏色）最佳化檔案。也要檢查像素尺寸：按顯示尺寸 3 倍匯出的圖示，通常可以用「最大寬度」選項縮小。
轉換為 WebP 能保留透明度，體積往往小很多；轉換為 JPEG 會去掉透明度，透明區域會變成純色。瀏覽器重新編碼 PNG 時並不會做壓縮最佳化，結果可能比最佳化過的原圖更大，複製前請先對比大小。
使用輸出結果
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="設定">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# 命令列：GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png常見問題
Base64 會保留 PNG 的透明背景嗎？
會。Base64 原樣編碼檔案位元組，Alpha 通道不受影響。只有把圖片轉換為 JPEG 時才會失去透明度。
為什麼 PNG 的 Base64 總是以 iVBORw0KGgo 開頭？
這幾個字元就是 PNG 檔案簽名的 Base64 形式。如果一個號稱 PNG 的字串開頭不同，那它要麼是其他格式，要麼已經損壞。
可以直接貼上截圖嗎？
可以。複製截圖後在頁面上貼上即可。瀏覽器通常會把貼上的截圖作為 PNG 處理，因此得到的是
data:image/png 結果。多大的 PNG 適合嵌入為 Base64？
常見的經驗是幾 KB，最多 10 KB 左右。更大的圖片最好作為單獨檔案提供，這樣瀏覽器可以快取並並行載入。