電子郵件用戶端，無法可靠地猜出一張透明 PNG 背後應該是什麼顏色。大多數用戶端，會退回到某個預設值，像是白色、淺灰色，或訊息本身的背景色，這代表附加在一封郵件上的標誌、簽名，或產品去背圖片，收到時看起來，可能與螢幕上顯示的模樣截然不同。可靠的解法，是在附加之前，先把這張 PNG，攤平成一張帶有你選定純色背景的不透明圖片，這樣收件人看到的，就正好是你選定的顏色。為 PNG 加上背景這個工具，會一次完成這件事：每一個像素，都會疊加在一個純色上，畫布會保留原始的寬度與高度，結果則會匯出成一張新的不透明 PNG，檔名結尾會加上 -background，因此原本的透明來源檔案不會被動到。因為整個流程，都是從本機檔案讀取來源、在記憶體中合成，並透過瀏覽器寫出結果，這裡不涉及任何上傳步驟，這在圖片內容是草稿標誌、尚未發布的產品模型，或私人簽名時，就很重要。
為什麼透明 PNG 在電子郵件附件中會出問題
透明 PNG，依賴的是大多數電子郵件用戶端處理得不太好的一項屬性：Alpha 色版。Alpha 色版，讓每一個像素，都能帶有自己的透明度值，因此一個標誌，可以疊在任何網頁背景上，而不會出現一個明顯的方框。然而，一旦這張圖片離開瀏覽器，這項屬性就會變成問題，因為電子郵件用戶端，根本不知道這張圖片背後，原本設計上想要的是什麼顏色。
這個缺失的顏色，會如何被補上，依用戶端而異。有些用戶端，會用訊息本身的背景色來替代，因此一個原本設計給淺色網站用的標誌，在淺色訊息中看起來沒問題，在深色訊息中卻會顯得很怪。另一些用戶端，會替代成一個固定的預設值，像是白色或淺灰色。還有一些，會把透明像素，算繪成棋盤格圖樣，或乾脆把該圖層顯示成黑色。少數行動郵件應用程式，會在伺服器端，把附加的圖片攤平成 JPG，這會完全刪除 Alpha 色版，並把結果，鎖定在轉換程序所選定的任何白色背景上。
實際的後果是，你在螢幕上看到的那張 PNG，不見得就是你的收件人看到的那張 PNG。在附加之前先加上一個純色背景，能讓每一個用戶端，拿到同樣的起始資料，消除猜測的空間。這也能避免最糟糕的情況：一個自動轉換程序，把你透明的標誌，剝除成一張坐落在一塊混濁灰色矩形上的 JPG。
三步驟為電子郵件用的 PNG 加上背景
- 在瀏覽器中開啟「為 PNG 加上背景」，並選擇你打算附加的那張透明或部分透明的 PNG。這個檔案，在解碼之前最多可以到 25 MiB，解碼後的圖片，最多可以到 16 百萬像素，任何一邊都不能超過 12,000 像素。
- 使用瀏覽器的顏色控制項，選擇一個純色背景。這個輸入框，預期的是一個六位十六進位值，邏輯會在開始處理之前先驗證它，因此一個無效的輸入，會立即失敗，而不會產生亂碼輸出。
- 選擇「加上背景」，在頁面上的預覽中檢視結果，再下載這張 PNG。輸出結果，會使用與來源完全相同的寬度與高度，檔名也會加上 -background，讓原本的透明檔案，在你的下載資料夾中依然容易辨識。
每一個步驟，都在本機執行。瀏覽器會解碼這個檔案，把像素資料讀進一個記憶體中的畫布，把每一個像素，疊加在選定的背景上，把每一個色版，四捨五入到 8 位元，並透過一個暫時的本機 Object URL，匯出這張新的 PNG，這個 URL，會在圖片改變或頁面關閉時被釋放。沒有任何圖片、顏色選擇，或輸出結果，會被送到 Lizely，這在圖片內容是草稿標誌、尚未發布的產品模型，或個人簽名時，就很有用。
讓背景符合這封郵件的設計
正確的背景色，是收件人實際上會在圖片背後看到的顏色。從一個棋盤格預覽畫面去猜測，並不可靠，因為同一張攤平後的 PNG，在一種訊息版面中看起來可能正確，在另一種版面中卻可能出錯。
對日常附件，例如發票、內部備忘錄，或簡單的產品照片來說，純白色（FFFFFF）是一個安全的預設值，也符合大多數電子郵件用戶端的內文顏色。對行銷郵件與品牌素材，請使用你品牌系統定義的確切十六進位值，而不是一個近似值。對深色主題的電子報，或使用夜間模式的收件人，請選擇一種深色中性色，例如 1A1A1A，這樣這件作品，就不會出現在一則原本是深色訊息中，一個明亮的白色方框裡。如果你不知道確切的顏色，可以在攤平這張 PNG 之前，用圖片顏色選取器工具，從目的地頁面，或一張參考圖片中取色。
| 電子郵件目的地 | 建議的背景 | 原因 |
|---|---|---|
| 標準收件匣（Gmail、Outlook 網頁版） | 白色 FFFFFF | 符合大多數訊息內文的背景色 |
| 品牌電子報或行銷郵件 | 取自風格指南的品牌十六進位色 | 讓標誌與素材維持品牌一致性 |
| 深色模式電子報 | 深色中性色，例如 1A1A1A | 避免在一個深色版面中，出現一個明亮的方框 |
| 列印或掃描的附件 | 白色 FFFFFF | 印表機預期的是不透明的白色紙張色調 |
| 正式文件用紙上的文件或簽名 | 白色 FFFFFF | 模擬實際的紙張表面 |
一旦針對實際的目的地，選定了背景色，收件人在他們那一端看到的圖片，就會與你在你這一端看到的一致。
柔和邊緣是如何疊加到新背景上的
攤平一張透明 PNG 時，最常見的錯誤，是把抗鋸齒邊緣與陰影，當成完全透明，或完全不透明來處理。在弧形標誌、簽名、頭髮，以及帶羽化的陰影周圍，許多邊緣值，只是部分透明，而一種粗率的替換方式，要嘛會產生一圈明顯的光暈，要嘛會產生一個與原始設計不符的銳利裁切邊緣。
「為 PNG 加上背景」使用的是標準的 source-over 合成方式，搭配一個不透明的底色，做法與W3C 合成與混合規範中定義的相同。對每一個解碼後的 RGBA 像素，來源的 RGB 值，會乘上來源的 Alpha 值，背景的 RGB 值，則會乘上「一減去來源 Alpha 值」；這兩個貢獻值相加，每個色版，都四捨五入成一般的 8 位元整數，輸出的 Alpha 值，則會設為完全不透明。
舉例來說，假設有一個半透明的紅色來源像素，坐落在一塊完全透明、你打算用藍色背景填滿的區域上方。來源顏色是 (255, 0, 0)，Alpha 值是 128（滿分 255），大約是 0.502。背景是 (0, 0, 255)。結果的紅色色版，是 255 × 0.502 + 0 × 0.498 ≈ 128.01，四捨五入為 128。綠色色版，是 0 × 0.502 + 0 × 0.498 = 0。藍色色版，是 0 × 0.502 + 255 × 0.498 ≈ 126.99，四捨五入為 127。輸出的像素，是 (128, 0, 127)，一種紫色，這正是若紅色原本就畫在藍色上時，肉眼會感知到的視覺顏色。一個完全不透明的來源像素，會被原封不動地保留，而一個完全透明的像素，則會完全變成背景色。
| 來源像素狀態 | Alpha 值 | 合成後的結果 |
|---|---|---|
| 完全透明 | 0 | 正好是選定的背景色 |
| 半透明 | ≈ 128 / 255 | 來源與背景 50/50 混合 |
| 大部分透明 | 低非零值 | 以背景為主的混合 |
| 完全不透明 | 255 | 來源像素不變 |
這是標準的 source-over 合成方式，搭配一個不透明的底色，而不是一個閾值判斷，或粗略的透明遮罩。正是這個差異，讓抗鋸齒文字、柔和陰影、頭髮、圓角圖示，以及羽化裁切邊緣，看起來仍像原始作品，而不是在原本透明的地方，露出一道生硬的邊緣。
把 PNG 附加到電子郵件之前的最後檢查
一旦這張不透明的 PNG 下載完成，幾項快速檢查，能省下一次與收件人來回確認的麻煩：
- 開啟結果，確認寬度與高度，與原始檔案相符。這個工具會保留來源的尺寸，但如果檔案先前經過其他軟體匯出，尺寸可能會有所偏移。
- 放大檢視任何簽名、標誌，或頭髮細節的柔和邊緣，並與選定的背景比較。一個乾淨的結果，會顯示邊緣顏色平滑地過渡到背景中，沒有任何明顯的光暈。
- 檢查檔案大小。一張帶有純色背景、攤平後的 PNG，通常會比透明的原始檔案壓縮得更小，因為大塊相同顏色的區域，能有效率地編碼。
- 如果目的地電子郵件版面，預期一個特定的像素尺寸，請先攤平背景，再用圖片縮放工具改變尺寸。把這兩個步驟分開，能讓每一次轉換都保持可預期。
- 如果這個附件必須是 JPG，而不是 PNG，請用PNG 轉 JPG工具，轉換這張攤平後的 PNG。在攤平之前先調整尺寸或重新壓縮，可能會在柔和邊緣周圍，引入原本應該由加背景這一步乾淨處理掉的畫質損失。
整個工作流程，都在本機完成。這張 PNG，在瀏覽器中解碼，像素資料，從一個記憶體中的畫布讀取，合成運算，在裝置上執行，結果則透過一個暫時的本機 URL 匯出。這張圖片、選定的顏色，或輸出結果，都不會被傳送到 Lizely，這讓這個工具，很適合用在機密草稿與私人產品圖片上，不過對任何包含敏感內容的圖片，你仍然應該遵循你所屬組織的本機裝置規範。
延伸閱讀：用於電子郵件附件的黑白照片轉換工具。
延伸閱讀：如何在 TikTok 照片與背景上使用模糊效果。