> PNG | 編碼 | 資料URI <
// 將PNG圖像編碼為Base64字串和資料URI — 保留Alpha透明度，完全在您的瀏覽器中執行
將PNG拖放到此處或點擊選擇
點擊瀏覽PNG檔案
保留Alpha透明度
PNG的Alpha通道、調色盤和gAMA/tRNS區塊逐位元組編碼 — 不重新壓縮，無品質損失。
100%客戶端處理
您的PNG永遠不會離開瀏覽器。編碼透過FileReader + btoa()在本地進行 — 無伺服器往返。
複製即用
獲得符合標準的data:image/png;base64,… URI，可直接用於HTML、CSS、電子郵件、JSON負載和內嵌SVG。
// 常見問題 — PNG轉BASE64
問：什麼是PNG轉Base64編碼？
答：它使用RFC 4648中定義的Base64字母表將.png檔案的二進位內容轉換為ASCII字串。編碼後的文字可直接嵌入HTML <img>標籤、CSS background-image、電子郵件訊息、JSON API負載或任何其他純文字傳輸通道。PNG位元組本身不變 — 每個IHDR、IDAT、tRNS和IEND區塊都被編碼，並可完整還原。
問：如何在瀏覽器中將PNG編碼為Base64？
答：將您的PNG拖入放置區（或點擊瀏覽）。該工具使用FileReader.readAsDataURL()讀取檔案，該方法直接返回可用的data:image/png;base64,… URI。如果您想直接貼到<img src="…">中，選擇資料URI；如果您的API/資料庫需要不帶data:image/png;base64,前綴的原始Base64部分，選擇僅Base64負載。
問：將PNG編碼為Base64會遺失透明度或品質嗎？
答：不會。Base64是純粹的二進位到文字的轉換 — 原始PNG中的每個位元組都會被保留，包括Alpha通道、調色盤和色彩設定檔（iCCP/sRGB區塊）。當您將字串解碼回來時，檔案與原始檔案位元完全相同。解碼後PNG的SHA-256雜湊值將與原始檔案相符。這就是為什麼Base64是嵌入圖示、標誌和螢幕截圖的正確工具，特別是在需要像素精度的場景中。
問：PNG經Base64編碼後會變大多少？
答：Base64每3個輸入位元組使用4個字元，因此編碼後的字串比原始PNG檔案大約33%。準確大小為4 × ⌈n / 3⌉字元，其中n是PNG的位元組大小。一個10 KB的PNG會變成約13.6 KB的Base64文字。由於HTTP壓縮（gzip、Brotli）能相當好地處理Base64文字，實際傳輸開銷通常更接近10–15%。
問：Base64編碼的PNG長什麼樣？
答：每個PNG Base64字串都以iVBORw0KGgo開頭。該前綴是8位元組的PNG簽名89 50 4E 47 0D 0A 1A 0A重新編碼為Base64的結果。因此iVBORw0KGgoAAAANSUhEUg...永遠是PNG，看到此前綴是您的資料完整的快速視覺檢查。包裝為資料URI時的樣子：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
問：如何在HTML中以Base64嵌入PNG？
答：將完整的資料URI貼到<img>標籤的src屬性中：<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
瀏覽器會解碼Base64負載並像從URL載入一樣呈現PNG。不會發起額外的HTTP請求，這對於關鍵路徑圖示、電子郵件簽名和離線優先應用程式非常有用。
問：如何將Base64 PNG用作CSS背景？
答：將資料URI包裝在url()函式中：.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
為了重複使用，將其儲存在CSS自訂屬性中：:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }.brand { background: var(--logo); }
內嵌背景消除了每個圖示的一次HTTP請求，但會使CSS檔案膨脹，因此僅對小圖示（< 4 KB）使用。
問：如何在JavaScript / Node / Python / PHP中將PNG編碼為Base64？
答：
JavaScript（瀏覽器）：const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js：fs.readFileSync('logo.png').toString('base64')
Python：import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP：base64_encode(file_get_contents('logo.png'))
Go：base64.StdEncoding.EncodeToString(pngBytes)
Ruby：Base64.strict_encode64(File.read('logo.png'))
問：什麼時候應該使用Base64 PNG而不是普通的圖像檔案？
答：當滿足以下條件時使用Base64 PNG資料URI：
• 圖像 < 4 KB（可節省一次HTTP往返）
• 您需要將其嵌入HTML電子郵件中（許多用戶端會封鎖遠端圖像）
• 您正在發佈單一檔案的HTML報告或儀表板
• 您將圖像儲存在JSON負載或資料庫欄位中
當圖像較大、在多個頁面中重複使用或需要獨立的CDN快取時，優先使用外部.png檔案。
問：Base64編碼適用於PNG透明度和調色盤PNG嗎？
答：是的。因為Base64是位元對位元的轉換，每種PNG色彩模式都被同等支援：
• RGBA / 真彩色 + Alpha — 32位元色彩，完整透明度
• 調色盤（PLTE）+ tRNS — 具有1位元透明度的索引調色盤PNG
• 灰階 + Alpha — 8/16位元灰階帶Alpha
• 16位元深色PNG — 用於醫學影像和科學視覺化的HDR風格PNG
所有這些都能透過Base64完整往返，並在理解PNG的瀏覽器中正確顯示。
問：Base64編碼的PNG是加密的或私密的嗎？
答：不是。Base64是一種編碼，不是加密。任何能讀取該字串的人都可以在毫秒內將其解碼回原始PNG。如果螢幕截圖包含密碼、API權杖或個人資訊，將其編碼為Base64並不能保護它 — 請在Base64輸出之上使用真正的加密層（AES-GCM、age、PGP），或透過TLS將圖像傳輸到套用存取控制的伺服器。
問：我可以在這裡編碼的PNG最大尺寸是多少？
答：沒有人為上限。由於編碼在本地執行，限制是您瀏覽器的記憶體 — 桌面裝置通常為100 MB以上，行動裝置為40–60 MB。對於非常大的PNG（高解析度醫學或衛星影像），我們會分段讀取檔案並對每個分段呼叫btoa()，以保持主執行緒的回應性。如果您的圖像大於約100 MB，請考慮直接從伺服器端編碼器串流傳輸，而不是載入到瀏覽器中。
問：PNG轉Base64 vs JPG轉Base64 — 我應該用哪個？
答：對於標誌、UI圖示、螢幕截圖、圖表以及任何具有透明度或清晰邊緣（文字、圖表）的內容，使用PNG → Base64。PNG是無損的並且支援Alpha。對於照片或具有許多顏色、可以接受有損壓縮的圖像，使用JPG → Base64。對於照片而言，JPEG檔案通常比PNG小5–20倍，因此Base64負載會短得多。經驗法則：如果圖像來自相機或包含照片式漸變，使用JPG；否則使用PNG。