PNG、JPG 和 WebP：您應該使用哪一種圖片格式？
由 FileTinker 團隊撰寫閱讀時間 6 分鐘
JPG、PNG 和 WebP 是您每天都會遇到的三種圖片格式，選擇錯誤的格式可能會浪費頻寬，或者降低圖片品質。簡單來說：JPG 適用於照片，PNG 適用於需要清晰邊緣或透明度的圖形，而 WebP 則可以在較小的檔案大小下同時完成這兩項任務。但細節很重要，尤其是那些會悄悄破壞圖片品質的陷阱。以下說明每種格式的實際用途以及何時應該使用它。
簡潔的一句話回答。
對於照片，請使用 JPG 格式；如果需要透明背景或清晰的文字和線條，請使用 PNG 格式；如果希望檔案更小，且目標受眾使用較新的瀏覽器，請使用 WebP 格式。幾乎所有實際的決策都歸結於兩個問題：圖片是否有透明背景，以及它是照片還是圖形？
- 照片，不需要透明度：使用 JPG 格式（或使用 WebP 格式以產生較小的檔案）。
- 商標、圖示、螢幕截圖，或任何具有透明度的圖像：請使用 PNG（或 WebP）格式。
- 如果您想在網站上顯示圖片，並且希望檔案大小盡可能小，那麼 WebP 格式是個不錯的選擇。
JPG：一種為照片設計的有損壓縮格式。
JPG（也稱為 JPEG）採用有損壓縮。它會捨棄人眼不太可能注意到的影像資料，這使得照片檔案的體積比原始像素小得多。對於海灘照片或具有柔和漸層和數千種顏色的肖像照片，這正是我們所需要的，而且通常來說，畫質的損失是微乎其微的。
JPG 格式有兩個明顯的缺點。首先，它沒有 Alpha 通道，因此每個像素都是不透明的，沒有透明度。其次，它在處理銳利邊緣時效果不佳：如果將黑色文字或一條清晰的線條放在純色背景上，JPG 會在邊緣周圍產生模糊、帶有色塊的暈影，這就是所謂的壓縮失真。這就是為什麼將文件截圖儲存為 JPG 格式時，截圖看起來會變得模糊，而以 PNG 格式儲存的相同截圖則會保持清晰銳利。
PNG：無損壓縮，支援完全透明度。
PNG 採用無損壓縮技術。它能在不丟失任何像素資料的情況下縮小檔案大小，因此您輸入的內容與輸出的內容完全相同。這使得 PNG 非常適合用於製作商標、圖示、螢幕截圖、圖表以及任何包含文字或銳利邊緣的圖像，而且不會產生像 JPG 那樣的模糊瑕疵。
PNG 檔案最突出的特色是具備完整的 Alpha 通道：像素可以完全透明、完全不透明，或是介於兩者之間。這就是為什麼一個標誌可以完美地置於任何背景顏色之上。但這也意味著檔案大小會增加。對於一張色彩豐富的照片，PNG 檔案的尺寸通常會比同等大小的 JPG 檔案大好幾倍，因為無損壓縮技術無法像有損壓縮那樣大幅縮小雜訊較多的照片。因此，當您需要透明效果或像素級別的精準邊緣時，才應該使用 PNG 檔案，而不是用於拍攝假日照片。
WebP：同時兼具兩項優勢的現代格式
WebP 是 Google 推出的新格式，它支援有損壓縮模式（類似於 JPG）和透明度（類似於 PNG），而且通常檔案大小比這兩種格式都小。一般來說，相同畫質的 WebP 照片會比 JPG 更小，而具有透明度的 WebP 圖形也會比 PNG 更小。這就是為什麼現在有這麼多網站採用 WebP 格式的原因。
問題在於相容性。WebP 格式在所有目前主流的瀏覽器中都能正常運作，但對於非常舊的瀏覽器以及某些較舊的桌面應用程式、電子郵件客戶端和圖片編輯軟體而言，它們可能無法正確顯示 WebP 圖片。如果您要將圖片發佈到現代化的網站上，WebP 是一個很好的預設選項。如果您要將檔案以電子郵件方式傳送給客戶，或將檔案交給使用未知軟體的人，那麼使用 JPG 或 PNG 格式會更安全。此外，還有 AVIF 格式，這是一種更新的格式，壓縮效果更好，但其編碼支援度較不穩定，因此最好將其視為一種額外選項，而不是預設選項。
兩種會悄悄破壞照片品質的陷阱
陷阱一：將 PNG 轉換為 JPG 會破壞透明度。JPG 格式沒有 Alpha 通道，因此每個透明像素都必須變成不透明的像素。工具會用純色填滿這些透明區域，而白色通常是首選顏色。FileTinker 的轉換器就是這樣做的：當您轉換為 JPG（或 GIF 或 BMP）格式時，所有透明區域都會被填滿，變成白色背景。如果您的標誌有透明的邊角，轉換後就會變成白色。這並非錯誤，而是使用 JPG 格式時無法避免的情況。若要保留透明度，請改為轉換為 PNG 或 WebP 格式。
陷阱二：反覆儲存 JPG 格式的檔案會導致畫質下降。由於 JPG 是一種有損壓縮格式，每次儲存都會丟失一部分資料。開啟一個 JPG 檔案，進行小幅修改，然後以 JPG 格式儲存，重複幾次，就會產生可見的畫質劣化，也就是「影印的影印」的效果。色彩會變得模糊，並且會出現越來越多的雜點。同樣的道理也適用於有損壓縮的 WebP 格式。解決方法是將原始檔案以無損壓縮格式（例如 PNG 或原始相機檔案）儲存，然後在最後才將其匯出為 JPG 或 WebP 格式，這樣做一次即可。
FileTinker 是如何進行轉換的（以及為何它能保持其可靠性）
FileTinker 的「圖片轉換器」和「圖片壓縮工具」完全在您的瀏覽器中運行，因此不會上傳任何內容，但了解它們如何處理您的圖片像素是有幫助的，這樣您就不會感到意外。
這個轉換器會解碼您的圖片，將其繪製到畫布上，然後以目標格式重新編碼。PNG 輸出的檔案是無損的，因此轉換為 PNG 格式時，每個像素都會保持不變。但 JPG、WebP 和 AVIF 輸出的檔案是以約 0.92 的固定品質進行編碼，屬於有損壓縮。這表示將照片轉換為 JPG 或 WebP 格式，實際上是重新編碼，而不是完美複製，而且重複儲存會持續累積損失。對於這些格式來說，這都是正常的，而且 0.92 是一個高品質的設定，但這並非魔法：這裡沒有無損的 JPG 或無損的 WebP 轉換。AVIF 僅在您的瀏覽器能夠編碼時才會提供（目前為 Chrome 和 Edge，而非 Firefox），因此它僅作為一個選項顯示，而不是一種保證。
壓縮圖片」工具會保留原始圖片的格式，當瀏覽器可以重新編碼圖片時（例如 JPG、PNG 或 WebP），否則會改為使用 JPG 格式。此外，它也不會傳回實際上沒有變小的檔案：如果重新編碼後的檔案大小無法小於原始檔案，它會保留原始檔案而不做任何修改，而不是將較大的檔案偽裝成較小的檔案。
- 轉換為 PNG 格式：無損壓縮，保留透明度。
- 轉換為 JPG 格式：採用有損重新編碼（約 0.92），並將透明度轉換為白色。
- 轉換為 WebP 格式：採用有損重新編碼（約 0.92），保留透明度。
- 壓縮：在可行的情況下，會保留原始檔案的格式，且絕對不會產生更大的檔案。
快速決策參考指南
當您正在查看「另存為」對話框時，請依以下順序操作：
- 是否需要透明背景？如果需要，請使用 PNG 或 WebP 格式，絕對不要使用 JPG 格式。
- 這是一張色彩豐富、具有多種漸層效果的照片嗎？如果是，請使用 JPG 或 WebP 格式。
- 這是商標、圖示、螢幕截圖，還是線條圖？是 PNG 還是 WebP 格式？
- 在現代網站上，圖片大小是否重要？WebP 格式或許能提供解答。
- 您是要傳送給使用舊版或不明軟體的收件者嗎？是傳送 JPG（照片）還是 PNG（圖形）格式的檔案？
- 您會繼續修改它嗎？請保留一份無損的 PNG 原始檔案，並在最後才將其匯出為 JPG 或 WebP 格式。