為 PNG 加上背景，代表把影像中每個透明像素都替換成選定的純色，同時讓完全不透明的像素保持原樣,而輸出檔的寬度與高度會和來源檔相同。替換是精確的：完全透明的像素會變成選定的顏色,完全不透明的像素不會被動到,介於兩者之間的像素則會依照標準的 Alpha 合成規則進行混合,因此柔邊與陰影在新底色上看起來仍然自然,而不是帶著一條生硬的殘影。你電腦上的原始檔案不會被修改,而新的 PNG 會以檔名結尾為 -background 的方式下載,方便與來源檔區分。整個過程都在目前的瀏覽器分頁中完成,不需要帳號、不需要上傳,也不需要等候遠端伺服器。本指南會用淺顯的英文帶領初學者走過完整流程,說明 Alpha 通道實際上對每個像素做了什麼,示範如何挑選與目的端相符的背景顏色,並介紹開始前值得了解的幾項限制。
PNG 透明度真正的含義
PNG 檔案能儲存大多數影像格式做不到的東西:逐像素的透明度。PNG 中的每個像素都帶有一個 Alpha 通道,用來標示它的透明度。其中有些像素是完全不透明的,代表圖片後面的背景完全透不過來;有些像素是部分透明的,代表底層顏色會以可量測的程度透出來;也有些是完全透明的,代表那個位置完全沒有內容。
當你在一般的影像檢視器中打開帶有透明度的 PNG 時,透明區域會以棋盤格紋顯示。那個圖樣並不是影像的一部分,而是檢視器用來提示那些位置其實沒有被繪製的線索。標誌、商品去背圖、簽名與圖示通常會匯出成透明 PNG,方便之後放到任何顏色的底色上使用。
一旦目的端拒絕接受透明度,這種彈性反而會變成問題。印刷文件、市集商品頁面或社群平台,可能會要求一張普通的、具有正常背景顏色的不透明影像。透明度必須移除,而且必須替換成一個穩定、可預期的色彩。
初學者需要純色背景的常見情境
對於剛接觸影像編輯的人來說,有幾種情境會反覆出現:
- 上傳標誌到不接受透明影像的市集或表單。
- 把簽名或印章放在掃描文件上,需要白色的頁面當底色。
- 把商品去背圖加到型錄頁面中,而該頁面是印在白色或米白色紙張上。
- 準備一份投影片組,投影片背景是深色,但圖示當初是為了淺色模式而以透明方式匯出的。
- 把個人頭像傳送到一個過去曾拒收透明 PNG 的服務。
在每種情況下,目標都一樣:把透明影像轉換成一般的不透明影像,並讓顏色符合目的端。真正的挑戰在於,在柔邊、模糊陰影或圓角周圍不會留下生硬的殘影。
三步驟為 PNG 加上背景
瀏覽器版的 為 PNG 加上背景 工具,正是為了這類初學者任務而設計的。整個流程只需要三個動作。
- 從你的裝置中選擇一個透明或部分透明的 PNG,大小上限為 25 MiB。檔案必須是真正的 PNG,因為工具需要讀取它的 Alpha 通道。
- 使用瀏覽器的色彩控制項挑選純色背景。請使用一個符合圖片將前往的頁面、投影片、文件或商品卡片的六位數 HEX 值。
- 選擇 Add background,檢查頁面上的預覽,然後下載新的 PNG。檔名結尾會是 -background,方便與原檔區分。
整個工作流程就是這樣。原始檔案在你電腦上不會被動到,新檔案會以與來源相同的像素尺寸下載,過程中也不會有任何資料被送到伺服器。
柔邊與陰影會發生什麼事
有趣的地方在於,工具如何處理那些只有部分透明的像素。反鋸齒文字、柔和的投影、飄散的髮絲、羽化的去背邊緣與圓角圖示邊緣,全都落在這個部分透明的範圍。如果把它們當成完全空白或完全填滿來處理,形狀周圍就會留下可見的殘影。
相反地,工具會使用標準公式,將每個來源像素與選定的背景進行合成。對每個像素而言,來源紅、綠、藍值會乘以來源 Alpha,背景顏色則乘以一減去該 Alpha。兩者的結果相加後,各通道會四捨五入成一般的 8 位元整數,輸出的 Alpha 則會設定為完全不透明。
舉一個具體的例子來說明。想像一個來源像素是純紅色 (255, 0, 0),Alpha 為 128/255,大約是半透明,並且疊在選定的純藍色 (0, 0, 255) 背景上。
紅色通道: (255 × 128/255) + (0 × 127/255) = 128 + 0 = 128,四捨五入為 128。
綠色通道: (0 × 128/255) + (0 × 127/255) = 0 + 0 = 0。
藍色通道: (0 × 128/255) + (255 × 127/255) = 0 + 127 = 127,四捨五入為 127。
輸出 Alpha: 255(完全不透明)。
結果是一個 RGB(128, 0, 127) 的深紫色像素,而不是純紅或純藍。這正是柔邊在從原本的棋盤格預覽移動到實際目的端顏色時,應該產生的自然混合效果。
| 來源 PNG 中的像素類型 | 處理前的外觀 | 加上背景後的結果 |
|---|---|---|
| 完全透明 (alpha = 0) | 空白的棋盤格區域 | 完全是選定的背景顏色 |
| 部分透明的邊緣 (alpha 介於 1 到 254 之間) | 顏色與其後方背景混合 | 顏色與新的選定顏色混合 |
| 完全不透明 (alpha = 255) | 原始像素顏色 | 原始像素顏色,不變 |
| 柔和陰影或羽化殘影 | 逐漸淡入棋盤格 | 逐漸淡入選定顏色 |
這與 W3C 合成與混合規範 中所定義、也被瀏覽器 canvas 所使用的 source-over 合成規則相同,因此結果與其他影像編輯器在將透明度攤平到底圖時的行為一致。
挑選與目的端相符的背景顏色
初學者經常預設使用白色,因為白色是最常見的頁面顏色,但正確答案完全取決於圖片的目的地。即將放到印刷發票上的標誌,通常需要紙張白;即將放進深色模式應用程式的商品去背圖,可能需要近乎黑色;即將放到彩色證書上的簽名,通常需要與文件背景完全一致。
工具中的瀏覽器色彩控制項接受六位數十六進位值,例如白色為 #FFFFFF、黑色為 #000000,或暖米色為 #F4E9D8。如果你不知道確切的值,影像顏色挑選器 可以讓你從參考頁面點選一個像素,並直接複製其 HEX 值。工具會在開始處理前驗證該值,因此打錯字會產生明確的錯誤訊息,而不是產出損毀的影像。
一個實用的習慣是,在正常觀看尺寸下,把下載檔案的柔邊與實際目的端進行比對。合成的數學運算雖然精確,但邊緣的視覺感受取決於形狀與其後方表面之間的對比。
加上背景之後
一旦 PNG 有了純色背景,通常會浮現兩個後續需求:不同的像素尺寸,或不同的檔案格式。
如果目的端需要不同的尺寸,正確的做法是在這裡保持畫布大小不變,然後對不透明的結果使用另一個調整尺寸工具。影像調整尺寸工具 可以在不重新處理背景的情況下完成這項工作。如果目的端需要 JPEG,則可以將不透明的 PNG 傳給 PNG 轉 JPG 來產生檔案較小、內容相同的檔案。
把加背景、調整尺寸與變更格式分成三個獨立步驟,代表每個結果都能保持可預期。一個同時調整尺寸、攤平透明度並重新壓縮的單一工具,可能會悄悄改變結果的幾何形狀、檔案大小或視覺品質,而且沒有明顯的方式能看出是哪個步驟造成了變化。
初學者值得了解的限制
為了避免瀏覽器記憶體不足,工具有幾項硬性限制。可載入的檔案上限為 25 MiB;解碼後的影像上限為 16 百萬像素,且任一邊的邊長上限為 12,000 像素。任何超出這些限制的 PNG 都會以明確的訊息拒絕處理,而不是被悄悄截斷。一個副檔名為 .png 但內容不是有效 PNG 位元組的檔案,會產生解碼錯誤,而不是一片空白的畫布。
工具只接受 PNG,因為透明度正是這個工具存在的全部理由。JPEG 沒有 Alpha 通道,因此這項操作對它而言沒有意義。其他可由瀏覽器解碼的格式,在不同應用程式間的透明度行為可能不一致,因此縮小輸入規格有助於讓輸出保持可預期。下載的檔案一律是 Alpha 完全不透明的 PNG,無論來源原本有多透明。
延伸閱讀: 免費將影像合併成 PDF:PNG 或多頁輸出。