為什麼我的透明 PNG 變成黑色了？

你有一個透明背景的 logo。你上傳它、或轉換它、或把它放進一份文件，然後透明的部分變成一塊實心黑色矩形。那個檔案剛才明明好好的。

沒有任何東西損毀。過程中某個環節必須決定「透明的地方要放什麼」，而它選了黑色。

Alpha 通道，以及缺少它的格式

一個透明的 PNG 每個像素存四個值：紅、綠、藍，以及 alpha——那個像素有多不透明。alpha 為零代表完全透明，而那裡的顏色值通常沒有意義，往往就留成零。零紅、零綠、零藍，就是黑色。

JPEG 完全沒有 alpha 通道。它無法表示「這裡什麼都沒有」。所以把一張透明 PNG 轉成 JPEG 會逼出一個決定：每一個透明像素都必須變成某個真實的顏色。

一個謹慎的轉換器會問你，或者預設填白色。一個草率的則直接丟掉 alpha 通道、留下底下原本的顏色值——而如上所述，那通常是零。黑色就是從這裡來的。它不是刻意選了黑色；它是沒有做選擇。

它會在哪裡咬你

• 連結預覽圖。多數預覽渲染器不支援透明，而一張透明背景的 Open Graph 圖常常顯示成一張黑色卡片。
• iOS App 圖示。Apple 要求完全不能有 alpha 通道。一個透明的圖示不是被退就是被填黑——這就是為什麼那麼多送出去的 App 圖示看起來像一個 logo 浮在深色磚塊上。
• 電子郵件。好幾個郵件軟體會把圖片壓平到它自己選的背景上，而在深色模式下那個選擇可能是黑的。
• Office 文件和列印。透明通常能活到 PowerPoint 和 Word 裡，但匯出成某些格式、以及多數列印路徑，會把它壓平。
• 較舊的看圖軟體。有些會把透明顯示成黑色，而不是你習慣的棋盤格——這種情況下檔案是好的，只有預覽在誤導你。

解法：刻意地壓平

可靠的做法是自己做那個決定，而不是留給下一個碰到這個檔案的軟體。

在轉換之前，把圖片放在一個你要的顏色的實心背景上，然後壓平。接著再轉換。現在沒有透明可以丟失，下游也沒有任何工具需要做選擇。

要哪個顏色取決於它要去哪。多數文件和淺色頁面用白色，預覽卡片用你的品牌色，如果你知道實際的頁面背景就用那個。重點是你選了它，一次，而且是知情的。

而在透明真的被支援的地方——一個網站、一個 App 介面——就留著 PNG，根本不要轉。這個問題只存在於「有 alpha 的格式」遇上「沒有 alpha 的格式」的那個交界。

哪些格式支援透明

• PNG——完整的 256 級 alpha。標準選擇。
• WebP——完整 alpha，而且檔案比 PNG 小。
• AVIF——完整 alpha，又更小。
• SVG——透明是原生的；它根本不是像素格式。
• GIF——只有一個位元。見下。
• PDF——支援，但列印可能會壓平它。
• JPEG——沒有。這就是每個人都會絆倒的那一個。
• BMP——技術上可能，實務上支援很差。

GIF 的一位元透明與難看的光暈

GIF 支援透明，但只是一個開關：每個像素不是完全透明就是完全不透明。沒有中間。

這件事要緊，因為平滑的邊緣仰賴部分透明。一個曲線的 logo 邊緣，是由 30% 不透明、60% 不透明……這樣的像素畫出來的，和後面的東西融合。GIF 存不了那些，所以每一個都變成不是實心就是不見。

結果就是 GIF logo 那種鋸齒、硬邊的樣子，以及那個惡名昭彰的白色光暈：如果圖片是在白底上做的，半透明的邊緣像素會被四捨五入成不透明的白，於是 logo 抵達深色頁面時戴著一圈淡淡的邊。

沒有任何設定能修好這個。這就是格式本身。用 PNG 或 WebP。

反過來的同一個問題：淡色邊

偶爾一張有正常 alpha 的 PNG，在深色背景上還是會顯出一圈淺色輪廓。這是一個相關的缺陷：那些邊緣像素在製作圖片時就已經和白色混合過了，而那個白被烤進了半透明像素的顏色值裡。

解法在上游——從原始稿件重新輸出一次，在透明或同樣深色的背景上。一旦那圈邊進了像素裡，沒有任何轉換能移除它。

寄出去之前的檢查

兩個快速測試，幾乎能抓到全部：

• 放在黑底和白底上各看一次。一個只在其中一個上看起來對的 logo，有邊緣問題。一個在其中一個上會消失的，需要一個明確的背景。
• 確認目的地到底支不支援 alpha。如果不支援——預覽卡片、App 圖示、印刷工作——在交出去之前自己把它壓平。

速查

• JPEG 沒有 alpha 通道；轉換必須填滿透明的區域
• 會出現黑色，是因為完全透明底下被丟棄的顏色值通常是零
• 轉換之前自己壓平到一個選定的顏色上
• 在透明真的被支援的地方就留著 PNG 或 WebP
• GIF 只有一位元透明——鋸齒邊和白色光暈，無法避免
• 淡色邊代表白色被烤進邊緣像素；從原稿重新輸出
• 每一張透明圖都要在黑底和白底上各測一次