拖放、貼上或選擇一張圖片
JPG · PNG · WebP · AVIF · HEIC — 最大 50 MB
PNG 顏色數量：你的圖片需要幾種顏色？
一般 PNG 可容納數百萬種顏色，但大多數 Logo、圖示和螢幕截圖用到的顏色少得多，改用小型色盤儲存就能縮小檔案，肉眼幾乎看不出差別。
| 顏色數 | 適合用途 | 注意事項 |
|---|---|---|
| 無損 | 需逐像素一致的素材、不能改動的照片 | 只重新編碼，通常省不了多少 |
| 256 | 螢幕截圖、UI 設計稿、帶漸層的插畫 | 幾乎和原圖分辨不出來 |
| 128 | 網頁圖像、圖表、多數商品去背圖 | 柔和漸層可能開始出現輕微色階斷層 |
| 64 | Logo、圖示、純色填滿的示意圖 | 留意陰影和反鋸齒文字 |
| 32 | 簡單圖示、線稿、雙色徽章 | 漸層會變成明顯的階梯 |
| 16 | 像素畫、網站小圖示（favicon）、非常平面的圖像 | 只適合顏色真的很少的圖片 |
能省多少取決於圖片本身。先試較低的設定，用前後對比滑桿檢查，看到色階斷層就往上調一級。
用白話解釋色盤 PNG
檔案不再替每個像素存一個完整顏色，而是存一份簡短的顏色清單，每個像素只指向其中一色。清單越短，資料越少。
平面圖像效果最好
Logo 和 UI 螢幕截圖有大面積的相同顏色，轉成色盤後幾乎看不出任何變化。
以 PNG 儲存的照片是特例
存成 PNG 的照片色調太多，小色盤裝不下。請維持 256 色，或改轉成 JPG 或 WebP。
PNG 壓縮後透明背景完整保留
減少顏色並不會把 PNG 壓平到某個背景上。Alpha 通道是色盤的一部分，去背圖放在任何頁面顏色上都能正常顯示。
柔和邊緣得以保留
Logo 或商品周圍的半透明像素會以帶有各自不透明度的色盤項目儲存，邊緣不會變得鋸齒狀。
在深色和淺色背景上測試
壓縮後，把 PNG 分別放在白色和深色背景上檢查。出現淡淡的光暈，就是顏色數設得太低的第一個徵兆。
不會加上白色底色
和轉成 JPG 不同，圖片後方不會被填上任何顏色。原圖中透明的部分，壓縮後依然透明。
依用途取得最小的 PNG 檔案
顏色數量和像素尺寸相輔相成。兩者搭配，就能得到在實際顯示位置看起來依然正確的最輕檔案。
先縮小尺寸，再減少顏色
以 1200 px 顯示的 4000 px 螢幕截圖會浪費資料。先設定最長邊，再選擇顏色數量。
不加抖色，純色區塊乾淨
工具會把每個像素對應到最接近的色盤顏色，不加入雜訊圖樣，讓純色區域保持乾淨，壓縮效果也更好。
何時該放棄 PNG
如果照片在 256 色時仍有好幾 MB，問題出在格式本身。改用 WebP 或 JPG 會輕得多。
PNG 壓縮：常見問題
這個 PNG 壓縮工具是怎麼縮小檔案的？
它把圖片減為有限的色盤，原理和常見的有損 PNG 最佳化工具相同，然後寫出新的 PNG。不同的顏色越少，需要儲存的資料就越少。
壓縮 PNG 會讓透明背景消失嗎？
不會。不透明度和每個顏色一起存在色盤中，所以完全透明和半透明的像素都會保留在壓縮後的 PNG 裡。
顏色數量應該從哪個設定開始？
多數圖像從 128 色開始，帶漸層的螢幕截圖則從 256 色開始。如果前後對比滑桿看不出差異，再往下試一級。
「無損」選項有什麼作用？
它會重新編碼 PNG，但不改動任何一個像素。這能去除低效率的編碼和多餘的資料區塊，不過省下的空間比減少顏色少得多。
為什麼 PNG 裡的天空出現條紋？
這叫色階斷層（banding）：平滑的漸層需要比色盤更多的色調。請調高到 256 色，或把照片類圖片存成 JPG 或 WebP。
可以壓縮網站 Logo 或 favicon 用的 PNG 嗎？
可以。Logo 通常在 64 色以下看起來完全一樣，要求逐像素精準的 favicon 甚至可以低到 16 色。記得保留一份無損的原始檔，方便日後修改。
相關工具
大家常搭配使用的其他最佳化工具。
