PNG、JPEG、WebP 與 AVIF：有意識地選擇圖片格式 | Toolars

無損格式逐位元保存每個像素；有損格式丟棄人眼幾乎察覺不到的細節，換來大幅縮小的體積。這個選擇無關品味——而在於檔案的用途：是要反覆編輯的母版，還是只交付一次的產物。

無損保留一切無損（PNG，以及 WebP 與 AVIF 的無損模式）：解碼後逐位元還原原始像素，無論開啟和另存多少次都不會劣化。
有損消耗細節有損（JPEG，以及 WebP 與 AVIF 的有損模式）：編碼器模擬人眼視覺，丟棄它預測你不會察覺的資訊——這份節省是永久的，不存在事後可以剝離的一層。
母版與交付物實務上的劃分：母版用無損保存，交付用有損匯出，絕不要把有損匯出當作下一次編輯的來源。

壓縮格式各有所長。JPEG 的餘弦轉換偏愛平滑的照片漸層、卻會毀掉銳利邊緣；PNG 的 deflate 偏愛平坦色塊與精確線條、卻會把雜點多的照片撐大；WebP 與 AVIF 借用影片編解碼器的技巧，兩者都能處理得不錯。

照片照片與漸層：中等品質的 JPEG 比 PNG 小得多，且在交付尺寸下損失不可見——這正是有損格式為之而生的負載。
平面圖形標誌、圖示、介面截圖與線條畫：平坦區域與銳利邊緣在 PNG 中壓縮得乾淨俐落，而 JPEG 會在每個硬過渡周圍留下可見的振鈴。
混合內容混合內容，例如內含照片的截圖：兩種都試——WebP 常常落在兩種舊格式之間，但決定權在像素構成，而不在標籤上。

如果版面需要透出背景，格式就必須攜帶 alpha 通道。PNG、WebP 與 AVIF 都支援透明度；JPEG 不支援——把圖像壓平到純色背景上不是可選項，而是必然。

Alpha 是逐像素的Alpha 通道在顏色之外逐像素儲存不透明度，這正是標誌能乾淨地落在任何背景上、而不是坐在一塊白色矩形上的原因。
JPEG 會壓平把透明 PNG 轉成 JPEG 時，alpha 會被替換成實色打底；要有意識地選擇這個底色，因為它會永久進入像素。
選對打底色圖片格式轉換器會如實說明這次壓平，並要求你選擇使用的背景色，讓這筆取捨明明白白，而不是日後在版面裡才被發現。

WebP 在所有現代瀏覽器中都能解碼；AVIF 能在目前的 Chrome、Firefox 與 Safari 中解碼，但在舊瀏覽器和部分下游工具中不行。支援是目標端的屬性，而不是格式的屬性——承諾整批交付前，先檢查真實的管線。

目標端說了算編碼支援落後於解碼：有些瀏覽器能顯示 WebP，卻無法透過 Canvas 編碼它，所以轉換器必須探測能力，而不是想當然。
編碼需要探測圖片格式轉換器會預先進行這項探測，在缺少編碼能力時停用 WebP 匯出，而不是默默地塞給你一個名叫 .webp 的 PNG。
誠實處理 AVIFAVIF 輸入只有在瀏覽器確實能解碼時才會被接受；不能解碼時，工作區會明說，並請你先匯出 PNG 或 JPEG，而不是輕信檔案簽名。

每次有損保存都會對已經近似過的圖像再次量化，失真因此疊加：同一張圖第三次另存為 JPEG，在相同品質檔位下也明顯比第一次更糟。只轉換一次，在管線末端，用你手裡最好的來源。

只轉換一次在無損母版中編輯，把有損匯出作為最後一步；每一次中間的有損保存都是一代無法復原的損傷。
附帶影響Canvas 重編碼還會丟棄 ICC 色彩描述檔、EXIF 中繼資料與任何動畫——GIF 會以其第一幀的形式進入，工作區會在檔案旁邊如實說明。
保留原圖轉換後保留原圖；轉換結果是交付產物，不是母版，反向轉換永遠找不回已經花掉的細節。

在位元組數說話之前，格式建議都只是假設。圖片格式轉換器按實際產出的位元組如實報告轉換前後的體積，JPEG 與 WebP 品質可在 0.50 到 0.95 之間調節（預設 0.85），於是權衡變成螢幕上的數字，而不是民間傳說。

用真實檔案轉換用真實檔案轉換，而不是樣本：位元組節省取決於實際內容，報告會並排展示兩種體積。
像素是槓桿位元組仍然超預算時，像素是下一個槓桿：寬和高各減半大約去掉四分之三的像素，往往比任何換格式都省。
明確的限制兩個工具都接受最大 12 MiB、單邊最長 8,192 像素的檔案，縮放器還能鎖定長寬比，讓一個維度跟隨另一個。