重點摘要
- 01JPG 用於相片、PNG 用於圖形和透明度、WebP 和 AVIF 是擊敗兩者的較新格式。
- 02AVIF 通常會產生最小的檔案、WebP 是支持最好的現代格式，而 JPG/PNG 對於相容性仍然是最安全的。
- 03有損格式（JPG、WebP、AVIF）丟棄細節以縮小檔案；PNG 是無損的，保留每個像素。
解釋一切的一個概念：有損與無損
在比較格式之前，請了解驅動所有這些格式的分割。無損格式精確地存儲每個像素，可以永遠重新打開和重新保存而不會造成任何降級——PNG 是主要的。有損格式丟棄眼睛不太可能注意到的資訊，以較小的檔案交換一點品質——JPG、WebP 和 AVIF 都做這個。沒有單一的「最佳」格式，因為正確的選擇取決於你的影像是相片、標誌還是螢幕截圖，以及你對尺寸與相容性的重視程度。
快速決策規則
如果你只記住別的什麼，記住這五行。
- 01網路相片，最大相容性：使用 JPG。它被所有東西理解並很好地壓縮相片。
- 02標誌、圖示、螢幕截圖或任何需要透明度的東西：使用 PNG。它完美地保留銳利邊緣和透明背景。
- 03現代網站，你想要更小的檔案並控制受眾：使用 WebP。它在尺寸上擊敗 JPG 和 PNG，並得到所有當前瀏覽器支持。
- 04尖端網站追求最小可能的檔案：使用 AVIF。它通常在尺寸上獲勝，特別是對於相片，對於舊版瀏覽器有後備方案。
- 05沒有視訊的動畫：WebP 或 AVIF（動畫）在尺寸和顏色上擊敗舊的 GIF。
四種格式，逐一說明
JPG（或 JPEG）是老兵。它是為相片而建，使用針對真實世界影像平滑漸變的有損壓縮。它沒有透明度，其壓縮可能在銳利邊緣和文字周圍留下方塊偽影，這就是為什麼它對標誌和螢幕截圖是錯誤的。其超能力是通用支持：每個設備、編輯器和網站都接受 JPG。
PNG 是無損選擇。它保留每個像素並支持完全透明，使其成為具有硬邊的圖形、文字、UI 螢幕截圖和任何具有透明背景的東西的標準。成本是檔案大小：PNG 相片通常比相同相片作為 JPG 大幾倍，所以 PNG 對於網路上的攝影內容是一個糟糕的選擇。
Google 的 WebP 是現代通用機器。它提供有損和無損模式以及透明度和動畫，在類似品質下，它產生的檔案大約比 JPG 小 25-35%，通常比 PNG 小得多。每個當前瀏覽器都支持它，這使其成為快速網站今天的實用預設值。
AVIF 是四種中最新的，基於現代視訊編解碼技術。它通常實現所有格式中最小的檔案——在相片上經常以很大的差距擊敗 WebP——並支持透明度、寬色彩和高動態範圍。支持現在很廣泛，但不是完全通用，所以網站通常以 WebP 或 JPG 後備提供 AVIF 以支持最後的幾個舊客戶端。
如何在格式之間轉換
轉換是一個兩分鐘的工作，完全在你的瀏覽器中進行，所以原件永遠不會離開你的設備。
- 01
選擇正確的轉換器
選擇與你的方向相符的工具——例如 PNG 轉 JPG 以縮小充滿圖形的相片，或 WebP 轉 JPG 以恢復相容性。
- 02
拖放你的影像
添加一個檔案或整個批次。轉換在瀏覽器中本地執行。
- 03
如果是有損則設定品質
對於 JPG、WebP 或 AVIF 輸出，選擇品質等級——更高保留更多細節，更低製作更小的檔案。
- 04
下載結果
保存單個影像或導出批次。保留你的原件以防你再次需要它們。
將其組合用於真實頁面
優化良好的網頁很少為所有東西使用一種格式。相照作為 WebP 或 AVIF 用於速度，帶有 JPG 後備方案。標誌、圖示和任何具有透明度的東西保留為 PNG——或更好，如果它們是向量藝術則為 SVG——因為有損格式會模糊它們的清晰邊緣。文字的螢幕截圖看起來最好的 PNG 是出於相同的原因。
如果你不確定是否值得進行切換，轉換一個代表性的影像並比較檔案大小和它在完全縮放時的外觀。從 JPG 到 WebP 或 AVIF 的尺寸下降通常是戲劇性的，沒有明顯的品質損失，這正是使頁面載入速度更快的勝利。當相容性比位元組更重要時——電子郵件附件、舊系統、列印店——回退到 JPG 或 PNG，兩種在任何地方都有效的格式。
影像格式常見問題
WebP 比 JPG 好嗎？
對於網路，通常是。WebP 產生的檔案大約比 JPG 小 25-35%，品質相似，也支持透明度和動畫。JPG 仍在需要最大相容性時獲勝，例如向未知收件者的附件。
我何時應該使用 PNG 而不是 JPG？
對圖形、標誌、圖示、螢幕截圖和任何需要透明背景或銳利邊緣的影像使用 PNG。對相片使用 JPG，其中 PNG 不必要地大。
AVIF 比 WebP 好嗎？
AVIF 通常產生比 WebP 更小的檔案，特別是對於相照，並支持寬色彩。WebP 有稍微更廣泛的支持和更快的編碼，所以許多網站使用 AVIF 和 WebP 後備。
在格式之間轉換會喪失品質嗎？
轉換為有損格式（JPG、WebP、AVIF）會丟棄一些細節，重複的有損保存會加重損失。轉換為 PNG 是無損的。始終從你擁有的最高品質原件轉換。