為 PNG 加上背景以達到 100KB 是兩步驟的工作,不是一步。短語「add background to PNG to 100KB」混雜了兩個不同的需求:需要純色背景的透明 PNG,以及接近 100KB 的目標檔案大小。第一個需求透過將每個透明像素合成到單一選定顏色上來解決,使結果完全不透明。第二個需求透過壓縮或重新編碼該不透明 PNG 來解決,直到檔案大小接近 100KB。單一工具若同時承諾這兩件事,一定隱藏了其中一個步驟。Add Background to PNG 只能處理第一項工作:它讀取透明 PNG,將每個像素與您選擇的顏色混合,並匯出與原始像素尺寸相同的不透明 PNG。它不會裁剪、調整大小、銳利化、降噪,或瞄準特定檔案大小。要在加上背景後達到 100KB,請使用影像壓縮工具跑第二輪。將工作流程視為兩個獨立操作,可讓輸出保持可預測:因為幾何形狀被保留,所以背景看起來正確;因為壓縮沒有與合成步驟糾纏,所以檔案大小會落在您想要的位置。

add background to png to 100kb
為 PNG 加上背景以達到 100KB

「Add Background to PNG to 100KB」實際上代表什麼

當透明 PNG 需要背景時,目標就是不透明。最常見的情境是標誌、商品去背圖、簽名、圖示,以及匯出的設計檔,這些檔案帶有透明度,但現在必須出現在頁面、市集上架、郵件簽名或印刷版面中,這些場景期望的是沒有 alpha 色道的普通影像。來源中的透明區域會被填充為單一純色,半透明像素會自然地向該顏色混合,結果會儲存為不透明 PNG。

100KB 的部分是另一個獨立的考量。許多上傳表單、大頭貼欄位、CMS 限制以及郵件閘道會拒絕超過 100KB 的影像,或對大型附件提出警告。要達到這個目標,幾乎永遠意味著壓縮、重新編碼或縮減尺寸,而不是換一種背景。把這當作同一個步驟的一部分,會迫使工具悄悄改變幾何形狀或品質來湊到某個大小,這完全違背「加上背景」的本意。搜尋這個短語的讀者,通常磁碟上有一個透明 PNG、一個需要不透明影像的入口網站,以及原始檔案遠超過的大小上限。兩個工具依序執行即可解決問題。

如何為 PNG 加上背景

  1. 在瀏覽器中開啟 Add Background to PNG。檔案不會被傳送到任何伺服器。
  2. 從您的裝置選擇一個透明或半透明的 PNG,大小可達 25 MiB。具有 .png 副檔名但包含無效位元組的檔案,會產生明確的解碼錯誤,而不是損壞的結果。
  3. 使用瀏覽器的色彩控制項選擇實心背景顏色。控制項接受六位數十六進位值,並在任何像素處理開始前驗證該值。
  4. 選取 Add background。瀏覽器會將 PNG 解碼到記憶體中的畫布,把每個 RGBA 像素合成到選定的顏色上,將輸出 alpha 設定為完全不透明,並在頁面上呈現不透明預覽。
  5. 以實際目的地而非棋盤格背景為基準來檢查預覽。確認柔邊邊緣、經過反鋸齒處理的文字、陰影以及圓角形狀在正常檢視大小下看起來正確。
  6. 下載 PNG。檔名會加上「-background」,讓新檔案容易與透明來源區分。下載的 PNG 與輸入具有相同的寬度與高度,絕不會被裁剪或調整大小。

合成如何取代透明度

對於瀏覽器讀取的每個 RGBA 像素,來源 RGB 色道會乘以來源 alpha (0 到 1),選定的背景 RGB 色道會乘以一減去該 alpha,然後將兩個貢獻相加。結果四捨五入為 8 位元整數色道,並以輸出 alpha 設定為 255 (完全不透明) 的形式匯出。這符合 W3C Compositing and Blending Level 1 規格中所描述的簡單 alpha 合成操作,也就是網頁上 canvas 元素使用的標準 source-over 混合方式。

演算範例:來源顏色 RGB (255, 0, 0)、alpha 為 0.5 的像素,合成到選定背景顏色 RGB (0, 0, 255) 之上。

  • 紅色色道:(255 × 0.5) + (0 × 0.5) = 127.5,四捨五入為 128
  • 綠色色道:(0 × 0.5) + (0 × 0.5) = 0
  • 藍色色道:(0 × 0.5) + (255 × 0.5) = 127.5,四捨五入為 128

該像素變成 RGB (128, 0, 128),也就是中間紫色。完全不透明的來源像素保持不變,完全透明的像素則剛好變成選定的背景顏色。經過反鋸齒處理的邊緣、柔邊陰影、毛髮、圓角圖示以及羽化去背,都會接受這種處理,而不是被閾值化為完全透明或完全不透明的硬邊區域。如果只替換 alpha 為零的像素,半透明像素在視覺上仍會與舊背景相連;標準合成可避免這種光暈。

讓不透明 PNG 接近 100KB

加上背景後,將該不透明 PNG 交給壓縮工具。Add Background to PNG 不會調整尺寸或瞄準檔案大小,這是刻意的設計:改背景不該悄悄地改變幾何形狀或降低品質。如果該不透明 PNG 目前遠大於 100KB,請開啟 Image Compressor 並以該大小作為輸出目標。如果目的地接受 JPG,請使用 PNG to JPG 將不透明 PNG 轉檔,因為失真重新編碼通常比重新壓縮同一個 PNG 更接近 100KB。

來源內容加上背景後的一般行為朝 100KB 壓縮的路徑
小型標誌,以透明像素為主不透明 PNG 遠低於 100KB檢查大小;通常已達標而無需後續步驟
中等標誌或圖示 (長邊小於 1000px)不透明 PNG 落在 30KB 至數百 KB 之間如果精準的 100KB 很重要且不再需要 alpha,請以失真方式重新編碼為 JPG
照片尺寸的透明去背圖 (長邊數千像素)即使加上實心背景,不透明 PNG 仍可能輕易超過 1MB縮減尺寸或轉換為 JPG 以達到 100KB
具有羽化邊緣的簽名或掃描檔 (寬度小於 600px)不透明 PNG 通常落在 50KB 至 300KB 的範圍直接在 PNG 上使用 Image Compressor,目標設為 100KB

壓縮行為取決於實際的像素內容,所以應讓壓縮工具輸出實際的檔案大小,而不是預先承諾一個數字。實際位元組取決於影像內容,而不是某個固定規則。

選擇正確的背景顏色

請選擇與實際目的地相符的顏色,而不是棋盤格預覽中的顏色。白色 (#FFFFFF) 常用於市集、文件上傳以及許多商品上架表單。淺灰色有時用於呈現深色文字並需要較柔和底色的入口網站。品牌專屬的十六進位值,則在社群圖片、深色介面以及背景屬於設計系統一部分的印刷版面中,是必要設定。霧黑偶爾用於深色主題下的單色標誌。

在確認顏色前,先確認目的地是否預期為 sRGB 與六位數十六進位值。如果目的地包含設計系統或風格指南,請從該文件複製精確的十六進位值。所選背景與實際目的地之間若不相符,合成後下載的影像會在經過反鋸齒處理的邊緣周圍留下可見的光暈,因為邊緣像素是被混合到「假設的」背景,而非實際背景。此工具會產出技術上定義明確的合成結果,但不會認證品牌合規、印刷色彩匹配、市集接受度或無障礙對比。

開始前需要知道的限制

限制數值
接受的輸入格式僅限 PNG
解碼前的最大檔案大小25 MiB
最大解碼像素數1600 萬像素
任一邊的最大像素12,000
顏色輸入六位數十六進位,經驗證
輸出格式不透明 PNG,寬度與高度與來源相同
輸出檔名後綴-background
網路行為不上傳、不傳輸到工具的伺服器

達到或超過這些上限的檔案會產生明確的解碼或大小錯誤,而不是悄悄地降低輸出品質。1600 萬像素的上限存在,是因為未壓縮的 RGBA 像素緩衝區所消耗的記憶體可能遠高於壓縮檔案大小所顯示的水準,該上限可避免瀏覽器分頁被推到不穩定的狀態。僅限 PNG 的輸入規範是刻意的:JPEG 沒有 alpha 色道,而其他瀏覽器可解碼的格式在不同應用程式間的透明度與中繼資料行為可能不一致。保持輸入規範嚴格,可讓輸出保持可預測。

何時應針對同一來源改用其他工具

如果實際目標不是改背景而是改大小,請從正確的工具開始。如果目的地需要不同的像素尺寸,請先套用背景,然後在該不透明 PNG 上使用 Image Resizer。如果目的地需要 JPEG,請先套用背景,下載不透明 PNG,然後使用 PNG to JPG 進行轉檔。如果目的地不需要透明度,但需要較小且特定大小的檔案,Image Compressor 可直接瞄準檔案大小。

以錯誤的順序組合步驟,是最常見的品質損失來源。先調整透明 PNG 的大小再加入背景,可能在 alpha 被降取樣的地方留下可見的光暈。先加入背景再調整大小,可保持合成結果乾淨。不先進行合成就直接將透明 PNG 轉為 JPG,在目的地的背景上可能會出現邊緣模糊的問題,因為 JPG 沒有 alpha 色道,轉換器必須自行想像一個背景。想進一步了解「保留尺寸」這項承諾的讀者,可在 How to Add a Background to a PNG File (Keep Same Size) 中找到更直接的說明。