PNG（可攜式網路圖形）是圖形、標誌、截圖和任何需要透明度的圖片的首選格式。與JPEG的有損壓縮不同，PNG使用無損壓縮——意味著壓縮過程中不會遺失品質。本綜合指南涵蓋了您需要了解的有關在保持完美品質的同時壓縮PNG檔案的所有內容。
理解PNG壓縮
PNG壓縮的工作原理與JPEG根本不同。它是完全無損的，意味著當您解壓縮PNG檔案時，您得到的像素與原始完全相同。然而，這種完美的品質伴隨著權衡：對於照片，PNG檔案通常比等效的JPEG大得多。
PNG壓縮如何工作：
- 過濾：對像素資料套用預測演算法以提高可壓縮性
- Deflate壓縮：使用與ZIP檔案相同的DEFLATE演算法（基於LZ77和Huffman編碼）
- 分區系統：在標記的區塊中組織資料（IHDR、PLTE、IDAT、IEND等）
- Alpha通道：支援8位元alpha值的像素級透明度
- 顏色類型：灰階、RGB、調色盤、灰階+Alpha、RGBA
關鍵特徵：PNG擅長壓縮具有大面積純色、銳利邊緣和文字的圖片。它在具有複雜紋理和漸層的照片方面表現不佳——與JPEG完全相反。
何時使用PNG格式
PNG的理想使用場景
標誌和品牌資產：
- 公司標誌（特別是帶透明度）
- 圖示和UI元素
- 徽章、獎勵和印章
- 品牌指南資產
- 轉換為點陣的向量風格圖形
截圖和介面擷取：
- 帶銳利文字的軟體截圖
- UI模型和線框圖
- 教學圖片
- 錯誤訊息和警示
- 應用程式介面
需要透明度的圖形：
- 在各種彩色背景上的標誌
- 疊加圖形和浮水印
- 網頁設計元素（按鈕、分隔線）
- 去除背景的產品圖片
- 貼紙和貼花
文字密集的圖片：
- 帶有大量文字的資訊圖
- 迷因和圖片巨集
- 引用圖形
- 教育圖表
- 證書和獎勵
線條藝術和插圖：
- 漫畫藝術作品
- 技術圖紙
- 建築平面圖
- 地圖和圖表
- 帶銳利線條的圖表和圖形
何時不使用PNG
避免PNG用於這些：
❌ 照片：典型的照片作為PNG會比JPEG大5-10倍，沒有可見的品質差異
❌ 複雜的自然圖片：風景、帶自然背景的肖像作為JPEG儲存效果好得多
❌ 高解析度照片：檔案大小變得過大
❌ 當檔案大小至關重要時：除非絕對需要透明度，JPEG或WebP提供更好的壓縮
經驗法則：如果圖片是照片，使用JPEG。如果是圖形、標誌或有透明度，使用PNG。
PNG顏色類型和位元深度
理解PNG的顏色類型對於最佳化至關重要：
| 顏色類型 | 位元深度 | 可用顏色 | 透明度 | 最適合 |
|---|---|---|---|---|
| 灰階 | 1, 2, 4, 8, 16 | 2到65,536色調 | 否 | 黑白圖片 |
| 真彩色（RGB） | 8, 16 | 1670萬到281萬億色 | 否 | 無透明度的全彩圖片 |
| 索引（調色盤） | 1, 2, 4, 8 | 2到256色 | 可選1位元 | 標誌、簡單圖形 |
| 灰階 + Alpha | 8, 16 | 色調 + 透明度 | 是（8或16位元） | 帶透明度的黑白圖片 |
| 真彩色 + Alpha | 8, 16 | 數百萬 + 透明度 | 是（8或16位元） | 帶透明度的全彩圖片 |
最佳化機會：許多「全彩」標誌只使用10-100種不同顏色。從32位元（真彩色+Alpha）轉換為8位元（索引）可以將檔案大小減少50-75%，沒有可見的品質損失。
如何壓縮PNG圖片：完整流程
步驟1：分析您的圖片
確定特徵：
1. 計算不同的顏色（工具可以自動執行此操作）
2. 檢查是否真的需要透明度
3. 識別灰階是否足夠
4. 注意圖片尺寸和用途
決策樹：
- 256色以下 → 使用8位元索引PNG
- 256-65,536色，無透明度 → 使用24位元PNG
- 需要alpha透明度，顏色少 → 嘗試帶alpha的8位元索引PNG
- 複雜顏色帶透明度 → 使用32位元PNG
步驟2：選擇適當的位元深度
轉換指南：
對於簡單圖形（標誌、圖示）：
- 從原始開始（通常為32位元）
- 計算不同的顏色
- 如果在256以下，轉換為8位元索引
- 如果256-65,536，使用24位元
- 僅在需要時新增alpha
對於截圖：
- 檢查是否存在透明度
- 如果沒有透明度，使用24位元
- 考慮是否可接受有損壓縮
- 評估8位元可能性的顏色計數
對於複雜圖片：
- 確定PNG是否是正確格式
- 考慮JPEG或WebP替代品
- 如果PNG必要，使用適當的位元深度
- 不要過度最佳化——平衡品質和大小
步驟3：最佳化調色盤（對於8位元PNG）
調色盤最佳化過程：
- 減少顏色：使用工具找到保持視覺品質的最小顏色計數
- 抖動：如果存在漸層則套用（推薦Floyd-Steinberg演算法）
- 排序調色盤：組織顏色以獲得更好的壓縮
- 刪除未使用：消除圖片中未使用的調色盤條目
- 透明度索引：如果需要，將一種顏色設定為透明
調色盤最佳化工具：
- pngquant（出色的命令列工具）
- ImageAlpha（Mac GUI）
- TinyImagePro（自動最佳化）
步驟4：套用壓縮最佳化
PNG壓縮級別：
PNG檔案已經使用DEFLATE壓縮，但壓縮級別可以變化：
| 級別 | 速度 | 壓縮 | 使用場景 |
|---|---|---|---|
| 0 | 最快 | 無 | 僅暫存檔案 |
| 1-3 | 快 | 低 | 需要快速處理 |
| 4-6 | 中 | 好 | 平衡方法 |
| 7-9 | 慢 | 最佳 | 最終網路資產 |
過濾器選擇：PNG使用掃描線過濾器（無、Sub、Up、平均、Paeth）。最佳工具測試所有過濾器並選擇每個掃描線的最佳過濾器。
推薦工具：
- OptiPNG：出色的無損最佳化器
- pngcrush：測試多種策略
- Zopfli PNG：最慢但最佳壓縮
- advpng（來自AdvanceCOMP）：額外壓縮
步驟5：刪除不必要的中繼資料
中繼資料類型：
文字區塊：
- 建立軟體資訊
- 作者評論
- 版權聲明
- 時間戳
顏色設定檔（ICC）：
- 通常3-50KB
- 對網路圖形通常不必要
- 如果缺失則假定為sRGB
其他區塊：
- 物理像素尺寸（pHYs）
- 直方圖資料
- 修改時間
- 編輯軟體的自訂區塊
節省：刪除所有中繼資料通常每張圖片節省5-50KB。
步驟6：驗證和測試結果
品質檢查清單：
- ✓ 在100%縮放下與原始並排比較
- ✓ 檢查透明度邊緣是否有偽影
- ✓ 驗證文字保持完美清晰
- ✓ 確認顏色完全相同
- ✓ 在預期顯示大小測試
- ✓ 在不同背景上檢視（如果透明）
進階PNG最佳化技術
技術1：有損PNG壓縮
雖然PNG本身是無損的，但您可以在PNG編碼之前套用有損預處理：
方法：
色調分離：減少顏色精度
- 將24位元顏色減少到18位元或21位元
- 人眼無法檢測小顏色差異
- 之後壓縮效果好得多
抖動：模擬刪除的顏色
- Floyd-Steinberg演算法最常見
- 有序抖動用於可預測的圖案
- 誤差擴散用於自然外觀
Alpha通道最佳化：
- 減少半透明像素
- 預乘alpha
- 量化alpha通道
工具：pngquant（出色）、TinyPNG、ImageAlpha
典型節省：50-80%檔案大小減少，可見品質損失最小
何時使用：
- 檔案大小至關重要
- 可接受輕微品質損失
- 圖片以較小尺寸顯示
- 網路圖形和圖示
技術2：帶Alpha透明度的PNG-8
帶alpha通道的8位元PNG提供出色的折衷：
優點：
- 比32位元PNG小得多（通常小60-70%）
- 保持透明度
- 適合簡單圖形
- 解碼更快
限制：
- 最多256色
- 漸層可能需要抖動
- Alpha通道可能被色調分離
最適合：
- 帶透明度的簡單標誌
- 圖示和UI元素
- 網路圖形
- 顏色調色盤有限的圖片
如何建立：
pngquant --quality=65-80 input.png
技術3：交錯PNG
它是什麼：類似於漸進式JPEG的漸進渲染
它如何工作：圖片以7次傳遞顯示，首先顯示低解析度預覽
優點：
- 更好的感知載入速度
- 改進的使用者體驗
- 在慢速連線上立即顯示某些內容
缺點：
- 通常大5-15%的檔案大小
- 解碼期間需要更多記憶體
- 更CPU密集
建議：
- 用於超過50KB的圖片
- 特別是網站主打圖片
- 不要用於小圖示（額外負擔不值得）
技術4：APNG用於動畫
它是什麼：動畫PNG，GIF的現代替代品
相對GIF的優點：
- 24位元顏色（GIF限制為256）
- Alpha透明度
- 更好的壓縮
- 向後相容（第一幀顯示為靜態）
瀏覽器支援：所有現代瀏覽器（截至2023年）
使用場景：
- 動畫標誌
- UI動畫
- 載入旋轉器
- 電影圖
- 簡單影片剪輯
檔案大小：通常比等效GIF小30-50%
技術5：PNGOUT和Zopfli
PNGOUT：
- 專業的PNG最佳化器
- 通常實現最佳壓縮
- 處理非常慢
- 個人使用免費
Zopfli PNG：
- Google的壓縮演算法
- 比標準DEFLATE好3-8%
- 非常慢（慢100-1000倍）
- 相同的解壓縮速度
- 免費和開源
何時使用：重要資產的最終最佳化，處理時間無關緊要
平台特定的PNG最佳化
網路圖形和圖示
最佳實踐：
小圖示（16x16到64x64）：
- 盡可能使用PNG-8
- 刪除所有中繼資料
- 非交錯（太小無法受益）
- 目標：500位元組到5KB
中等圖形（標誌、按鈕）：
- 根據顏色使用PNG-8或PNG-24
- 使用OptiPNG最佳化
- 考慮有損壓縮
- 目標：5-50KB
大圖片（背景、主打）：
- 使用漸進/交錯
- 考慮WebP替代品
- 積極最佳化合理
- 目標：200KB以下
Retina/HiDPI資產：
- 提供@1x和@2x版本
- @2x版本應更積極地最佳化
- 考慮對簡單圖形使用SVG
應用程式資產
iOS開發：
所需圖示大小：
- 20pt (@1x, @2x, @3x)
- 29pt (@1x, @2x, @3x)
- 40pt (@1x, @2x, @3x)
- 60pt (@2x, @3x)
- 76pt (@1x, @2x)
- 83.5pt (@2x)
- 1024pt (@1x)
最佳化策略：
- 每個解析度獨立最佳化
- 刪除所有中繼資料
- 盡可能使用PNG-8
- 對簡單圖示考慮PDF/向量
Android開發：
密度桶：
- mdpi (1x)
- hdpi (1.5x)
- xhdpi (2x)
- xxhdpi (3x)
- xxxhdpi (4x)
最佳化策略：
- 提供適當的密度資產
- 當minSdkVersion ≥ 18時使用WebP
- PNG用於向後相容
- 向量可繪製（XML）用於簡單圖形
電子郵件和文件
電子郵件簽名：
- 保持在10KB以下
- 首選PNG-8
- 如果可能避免透明度（某些電子郵件用戶端渲染不佳）
- 尺寸：最大200-600px寬
PowerPoint/文件：
- 平衡品質和檔案大小
- 照片使用PNG-24
- 標誌和圖表使用PNG-8
- 考慮文件無論如何都會被壓縮（ZIP）
社群媒體
個人資料圖片：
- PNG-8通常足夠
- Facebook/Twitter無論如何都會重新壓縮
- 保持在100KB以下
- 首選正方形尺寸
共享圖形：
- 文字密集的圖片使用PNG
- 照片使用JPEG
- 考慮平台重新壓縮
- 積極最佳化（將被重新壓縮）
常見PNG壓縮問題和解決方案
問題：PNG檔案比原始照片大
症狀：將JPEG照片轉換為PNG建立巨大檔案
原因：PNG使用不適合複雜照片的無損壓縮
解決方案：
- ❌ 不要將照片轉換為PNG
- ✓ 將照片保持為JPEG
- ✓ 僅對圖形、標誌、透明度使用PNG
- ✓ 如果需要透明度，使用PNG-32但預期大檔案
問題：透明度看起來鋸齒狀或像素化
症狀：
- 物體周圍有硬邊
- 可見的階梯效應
- 失去平滑的反鋸齒
原因：
- 轉換為帶1位元alpha的8位元
- 位元深度減少期間抖動不佳
- 原始反鋸齒不佳
解決方案：
- 對平滑透明度使用32位元PNG
- 更好的8位元轉換工具（帶高品質設定的pngquant）
- 用適當的反鋸齒重新建立圖形
- 轉換期間增加抖動級別
問題：最佳化後顏色看起來不同
原因：
- 色彩空間改變（sRGB vs Display P3）
- 刪除ICC顏色設定檔
- 色調分離不佳減少到8位元
- 螢幕校準差異
解決方案：
- 確保整個過程使用sRGB色彩空間
- 如果顏色準確性至關重要，保留ICC設定檔
- 增加8位元轉換的顏色計數
- 更好的抖動演算法
- 在多個校準螢幕上比較
問題：文字變得模糊
原因：
- 套用有損壓縮
- 圖片調整大小不佳
- 以錯誤解析度儲存
- 反鋸齒改變
解決方案：
- 僅使用無損最佳化
- 不要調整基於文字的圖片大小
- 確保螢幕顯示為72-96 DPI
- 如果可能，以目標大小重新建立
- 如果可行，使用向量格式（SVG）
問題：儘管最佳化，檔案大小仍然太大
原因：
- 對照片使用PNG
- 用途的圖片尺寸太大
- 32位元時8位元足夠
- 不使用最佳工具
解決方案：
- 檢查JPEG是否更合適
- 將圖片調整為實際顯示尺寸
- 如果在256色以下轉換為8位元
- 使用進階工具（Zopfli、PNGOUT）
- 考慮有損PNG壓縮
- 嘗試WebP格式代替
將PNG與替代格式比較
PNG vs JPEG
| 方面 | PNG | JPEG |
|---|---|---|
| 壓縮 | 無損 | 有損 |
| 最適合 | 圖形、標誌、文字 | 照片 |
| 透明度 | 是（alpha通道） | 否 |
| 檔案大小（照片） | 非常大 | 小 |
| 檔案大小（圖形） | 小到中 | 中到大 |
| 品質損失 | 無 | 取決於設定 |
| 瀏覽器支援 | 通用 | 通用 |
決策規則：照片？使用JPEG。圖形或透明度？使用PNG。
PNG vs WebP
| 方面 | PNG | WebP |
|---|---|---|
| 無損壓縮 | 好 | 好25-35% |
| 有損壓縮 | 不適用 | 優秀 |
| 透明度 | 8位元alpha | 8位元alpha |
| 瀏覽器支援 | 100% | 96%+（現代瀏覽器） |
| 檔案大小 | 更大 | 相同品質更小 |
| 編碼速度 | 快 | 中等 |
| 採用 | 通用標準 | 快速成長 |
建議：對網路使用帶PNG後備的WebP。僅PNG用於最大相容性。
PNG vs GIF
| 方面 | PNG | GIF |
|---|---|---|
| 顏色 | 1670萬 | 最多256 |
| 透明度 | 8位元alpha（平滑） | 1位元（硬邊） |
| 動畫 | APNG（有限支援） | 是（通用） |
| 壓縮 | 更好 | 更差 |
| 檔案大小 | 大多數圖片更小 | 更大 |
| 現代使用 | 靜態首選 | 僅用於動畫 |
現代方法：對靜態圖形使用PNG。在支援時使用APNG或WebP用於動畫，GIF用於向後相容。
PNG vs SVG
| 方面 | PNG | SVG |
|---|---|---|
| 類型 | 點陣（像素） | 向量（數學） |
| 縮放 | 放大時像素化 | 無限縮放 |
| 檔案大小 | 基於尺寸固定 | 根據複雜性變化 |
| 編輯 | 像素級編輯 | 易於修改形狀 |
| 瀏覽器支援 | 通用 | 非常好（IE9+） |
| 最適合 | 複雜圖片、照片 | 簡單圖形、圖示 |
| 動畫 | 否（APNG有限） | 是（CSS、SMIL、JS） |
決策規則：簡單圖形/圖示？使用SVG。複雜點陣圖片或照片？使用PNG或JPEG。
PNG壓縮工具
線上工具
TinyImagePro（推薦）：
- 免費，無需註冊
- 用戶端處理（私密）
- 無損和有損選項
- 多檔案支援
- 壓縮PNG圖片
優點：
- 無需安裝
- 適用於任何裝置
- 隱私（用戶端處理）
- 即時結果
命令列工具（進階）
OptiPNG（無損）：
optipng -o7 image.png
- 最佳化級別0-7（7最佳）
- 測試多種策略
- 僅無損
- 免費和開源
pngquant（有損）：
pngquant --quality=65-80 --ext .png --force image.png
- 出色的有損壓縮
- 50-80%檔案大小減少
- 保持視覺品質
- 8位元PNG輸出
pngcrush（無損）：
pngcrush -brute input.png output.png
- 測試所有過濾器/壓縮組合
- 最慢但徹底
- 無損最佳化
- 免費
Zopfli（最佳無損）：
zopflipng -m input.png output.png
- 最佳可能的無損壓縮
- 非常慢（用於最終資產）
- 比OptiPNG好3-8%
- Google的演算法
advpng（額外最佳化）：
advpng -z -4 image.png
- AdvanceCOMP工具的一部分
- OptiPNG後的額外壓縮
- 通常提供1-5%額外節省
桌面應用程式
ImageOptim（Mac，免費）：
- 拖放介面
- 自動組合多個工具
- 批次處理
- 顯示壓縮節省
- 刪除中繼資料
FileOptimizer（Windows，免費）：
- 支援200+檔案格式
- 多個最佳化引擎
- 批次處理
- 非常徹底的最佳化
- 可用可攜式版本
RIOT（Windows，免費）：
- 即時預覽
- 並排比較
- 批次處理支援
- 中繼資料檢視器/編輯器
- 顯示壓縮設定
批次處理
最佳化整個目錄（Linux/Mac）：
# 使用OptiPNG無損最佳化
find ./images -name "*.png" -exec optipng -o7 {} \;
# 使用pngquant有損最佳化
find ./images -name "*.png" -exec pngquant --ext .png --force --quality 65-80 {} \;
# 使用zopflipng最大壓縮
find ./images -name "*.png" -exec zopflipng -m {} {} \;
Windows PowerShell：
Get-ChildItem -Path .\images -Filter *.png -Recurse |
ForEach-Object { optipng -o7 $_.FullName }
PNG最佳化工作流程
對於網路開發人員
開發階段：
- 使用高品質來源資產
- 將原始保留為無損格式
- 單獨建立網路最佳化版本
- 版本控制原始和最佳化
最佳化管線：
# 1. 如需要調整大小
convert input.png -resize 800x600 resized.png
# 2. 如果合適轉換為8位元
pngquant --quality=65-80 resized.png
# 3. 無損最佳化
optipng -o7 resized-fs8.png
# 4. 最終Zopfli傳遞（可選，慢）
zopflipng -m resized-fs8.png final.png
自動化建置過程：
- 整合到Webpack、Gulp或Grunt
- 建置時自動最佳化
- 除錯的來源映射
- dev/prod的不同最佳化級別
對於圖形設計師
匯出設定：
- 選擇適當的顏色模式
- 刪除不必要的圖層
- 如果不需要透明度則扁平化
- 在Photoshop中使用「為Web儲存」
- 在現代工具中「匯出為」
Photoshop匯出：
- 檔案 > 匯出 > 為Web儲存（舊版）
- 選擇PNG-8或PNG-24
- 如果可能減少顏色
- 勾選「轉換為sRGB」
- 刪除中繼資料
Sketch/Figma：
- 以所需的確切大小匯出
- 使用@1x、@2x表示法
- 選擇PNG格式
- 匯出後最佳化
對於行動應用程式開發人員
iOS資產工作流程：
1. 首先建立@3x版本（最高品質）
2. 縮小到@2x和@1x
3. 獨立最佳化每個
4. 對所有資產使用ImageOptim
5. 包含在資產目錄中
Android資產工作流程：
1. 建立xxxhdpi版本（4x）
2. 縮放到其他密度
3. 對於API 18+考慮WebP
4. 最佳化PNG用於舊裝置
5. 放置在適當的drawable資料夾中
常見問題解答
問：PNG壓縮真的是無損的嗎？ 答：是的！標準PNG壓縮是100%無損的。解壓縮的圖片與原始位元完全相同。然而，「有損PNG」是指在無損PNG壓縮之前的預處理（減少顏色）。
問：為什麼我的PNG檔案比等效JPEG大得多？ 答：PNG使用無損壓縮而JPEG使用有損。對於具有複雜細節的照片，JPEG可以實現5-10倍更好的壓縮比。PNG是為圖形而不是照片設計的。
問：我可以將JPEG轉換為PNG以提高品質嗎？ 答：不可以！將有損轉換為無損不會恢復遺失的品質。它只會使檔案更大。盡可能始終從原始來源檔案工作。
問：PNG-8、PNG-24和PNG-32有什麼區別？ 答：PNG-8使用8位元顏色（最多256色），PNG-24使用24位元顏色（1670萬），PNG-32是PNG-24加8位元alpha透明度（每像素總共32位元）。
問：我應該使用交錯PNG嗎？ 答：對網站上超過50KB的圖片使用交錯（更好的感知載入）。不要用於小圖示（額外負擔不值得）或如果檔案大小至關重要（交錯大5-15%）。
問：我可以在不損失品質的情況下壓縮PNG多少？ 答：使用無損工具（OptiPNG、pngcrush），通常減少10-40%，品質損失為零。使用有損預處理（pngquant），減少50-80%，可見品質損失最小。
問：我應該對我的標誌使用PNG還是SVG？ 答：對簡單標誌使用SVG（無限縮放，更小的檔案大小）。對帶漸層、效果或目標平台不支援SVG的複雜標誌使用PNG。
問：PNG檔案可以包含病毒嗎？ 答：PNG格式本身是安全的，但任何檔案都可以重新命名。始終使用防毒軟體掃描下載，僅從可信來源開啟PNG。
結論
PNG壓縮需要理解檔案大小、視覺品質和透明度要求之間的平衡。雖然PNG不適合照片，但對於標誌、圖形、截圖和任何需要透明度的圖片來說是不可替代的。
關鍵要點：
- 對256色以下的圖形使用PNG-8（通常比PNG-32小50-70%）
- 無透明度的全彩圖形使用PNG-24
- 僅在需要alpha透明度時使用PNG-32
- 刪除所有不必要的中繼資料（節省5-50KB）
- 使用OptiPNG或pngquant等最佳化工具
- 考慮有損PNG壓縮以顯著減小尺寸
- 對現代網路應用始終與WebP比較
- 保留原始未壓縮來源檔案
- 選擇正確格式：圖形用PNG，照片用JPEG
最佳化策略摘要：
- 分析：確定顏色計數、透明度需求、圖片類型
- 轉換：使用適當的位元深度（8位元vs 24位元vs 32位元）
- 最佳化：套用無損最佳化（OptiPNG）
- 考慮有損：如果檔案大小至關重要使用pngquant
- 清理：刪除所有中繼資料
- 驗證：檢查品質和檔案大小
- 替代：考慮帶PNG後備的WebP
準備以專業結果最佳化您的PNG圖片？試試我們的免費PNG圖片壓縮器以在保持完美品質的同時獲得即時壓縮。
相關指南：
