將不透明的 PNG 轉換為 WebP 並比較結果

攝影 PNG 作為網站的 WebP 值得測試。 它可以是從設計工具、渲染的房間場景或扁平的宣傳圖中導出的相機圖像。 單獨匯出並將其與原始版本進行比較，而不是立即刪除 PNG。 檔案大小取決於圖像，因此有用的節省是您實際測量的。

透明度在這裡需要特別的照顧。 雖然 WebP 格式可以儲存 Alpha，但此工具目前會在白色背景上渲染 WebP 輸出。 因此，透明輸入將失去出口中的透明區域。 保留 PNG 以尋找需要位於不同背景上的標誌、切口和覆蓋，並將此轉換用於不透明結果合適的圖像。

預設保持尺寸並以 90% 的品質開始，並帶有銳利化。 嘗試一個帶有小文字的文件，另一個帶有攝影背景的文件。 檢查細邊框、彩色字體和光滑漸層。 當以預期尺寸顯示時，設計可以一目了然地看起來很好，同時在標籤旁邊顯示有色光環。

如果 PNG 是介面的螢幕截圖，那麼可讀性可能比剃掉幾個位元組更重要。 比較一個 PNG 出口 或在 WebP 軟化關鍵細節時保留來源。 對於一張不透明的大照片，在進一步降低品質之前，請在實際顯示邊界內進行測試。 當網站從未顯示它們時，首先減少不必要的像素，但為預期的位置保留足夠的解析度。

WebP 品質滑桿控制此匯出的有損編碼。 較高的設定不會恢復來源中缺少的詳細資訊，且相同的數字並不意味著不同格式的相同視覺結果。 使用它作為比較工具：稍微調整一下，檢查結果並保留滿足您自己品質需求的最小版本。

PNG 不會以同樣的方式使用該品質控制，因此更改擴充功能是一個真正的工作流程選擇。 如果您的 PNG 包含微小的圖表標籤或精確的顏色邊界，即使其檔案較大，保留 PNG 也可能是正確的決定。 此轉換器不會減少 PNG 調色板、產生無損 WebP 設定或編輯平面圖形中的物件和圖層。

下載轉換後的圖像並將其上傳到實際網站系統中的測試頁面。 確認瀏覽器接收WebP，顯示的裁切是正確的，沒有透明的邊緣意外變白。 根據頁面背景查看它，特別是如果來源是為黑暗部分設計的。 應在上下文中檢查轉換，而不僅僅是在文件預覽中。

然後查看移動顯示。 大型行銷圖形可能需要更簡單的佈局，而不是更壓縮的副本，當其字體在手機上無法讀取時。 響應式圖像選擇和保留尺寸仍然是獨立的網站任務。 樣本完好後，將配對的檔案處理在一起。 在此轉換期間，您的影像資料會保留在瀏覽器中，來源 PNG 保持不變。

例如，在轉換任何品牌資產之前，在透明像素上測試白色文字標記。 白色不透明的輸出可以完全隱藏標記，僅此檔案大小的比較就會錯過。