正在載入您的檔案…

把 PNG 轉成 WebP

把 PNG 轉成 WebP,保留透明度,檔案更小。

或將圖片拖放至此

如何把 PNG 轉成 WebP

如何把 PNG 轉成 WebP

把 PNG 拖到上傳區,或點一下從裝置挑選檔案。檔案一落下轉換就開始,不需要按任何「轉換」按鈕。一般圖片的結果遠在一秒內就會出現。完成後,按「下載」即可用原本的檔名(只換掉副檔名)儲存 WebP。轉換一張圖片在你的瀏覽器中執行,一次轉換多張則傳送到我們的伺服器。同一套流程在桌機和行動裝置的瀏覽器上都能用,不必安裝任何 App。要轉下一張,把下一個 PNG 拖進來就好。動態 PNG 只會取序列中第一張影像,當成單張靜止圖處理。

透明像素原樣帶進 WebP

透明像素原樣帶進 WebP

WebP 支援完整的 8 位元 alpha 色版,意思是你 PNG 裡每一個透明像素,在 WebP 輸出中都維持一樣的透明度。不會被填上白色,去背邊緣不會出現白邊,事後也不需要進編輯器修補。這正是從帶透明的 PNG 轉檔時要選 WebP 而非 JPG 的關鍵原因,因為 JPG 沒有 alpha 色版,必須把透明像素換成一種純色。標誌、圖示、商品去背圖、介面設計稿、圓角截圖,以及任何依賴穿透背景的影像,全都原封不動地轉移過去。沒有任何開關要去啟用透明度保留,它是自動的,因為 WebP 本來就是為了承載 alpha 而設計。

從 PNG 換到 WebP 的理由

從 PNG 換到 WebP 的理由

主要好處是在透明度與視覺品質都完好的前提下,得到明顯更小的檔案。依 Google 官方的 WebP 文件,無損 WebP 約比同等 PNG 小 26%,而帶 alpha 色版的有損 WebP 大約只有相近 PNG 的三分之一大。較小的圖片載入更快,這直接改善「最大內容繪製」,那是 Google 核心網頁指標之一,也是已知的排名訊號。PageSpeed Insights 在它的稽核中會把 PNG 標為「以新世代格式提供圖片」的改善項目,換成 WebP 就能解決那條建議。WebP 的瀏覽器支援度是全面的,Chrome、Firefox、Safari 與 Edge 都原生處理。

品質設定與有損的取捨

品質設定與有損的取捨

本工具輸出的 WebP,以專為網頁發布優化的品質設定寫出。依 Google 的基準測試,有損 WebP 的壓縮率比同等 JPG 畫質高出約 30%,而這個設定位於該範圍的高端,優先保留細節。專業應用程式(如 Photoshop 或 Lightroom)在從 PNG 匯出 WebP 時建議的也是類似的品質區間。相片體積通常縮小 50% 到 70%,圖形與標誌往往縮小幅度更大。對需要像素精確匹配的場合(如醫療影像或印刷母版),請保留原始 PNG,把 WebP 用作發布匯出件。

你的 PNG 在哪裡處理

你的 PNG 在哪裡處理

路徑取決於你轉換多少個檔案。轉換單個 PNG 時,工作在瀏覽器原生影像引擎中執行,在你的裝置上,在你的分頁內,不會上傳任何東西,也不會記錄關於檔案內容的任何東西。你可以開啟瀏覽器的網路面板,在轉換一張圖片時查看,確認沒有任何攜帶該檔案的出站請求。一次轉換多個 PNG 時,它們會送到我們的伺服器,伺服器將它們一起轉換並回傳一個下載給你。該結果會在約 2 小時內從我們的伺服器刪除,你也可以在儲存的那一刻自行刪除。單一轉換在你的瀏覽器中完成,批次則暫時送往伺服器,下載完成後約2小時內刪除。

原始 PNG 仍然合適的時機

原始 PNG 仍然合適的時機

WebP 受到廣泛支援,但並非在每個情境都被接受。有些設計工具、印刷流程與內部內容管理系統仍然要求 PNG。有些作業系統原生支援 PNG 的拖放,但 WebP 卻需要外掛。對於你會在桌面應用程式裡反覆開啟、編輯的工作檔,把無損的 PNG 當母檔可以避免一輪輪解碼再重存所累積的損耗。把 WebP 當成網頁交付的匯出格式,把 PNG 留作來源。如果你需要反過來,把 WebP 變回 PNG,webp-to-png 工具可以處理那個轉換。

運作方式

  1. 拖放或挑選你的 PNG

    將 PNG 檔案拖到上傳區,或點擊開啟檔案選擇器。PNG 中任何透明區域都會在輸出中保留。轉換一張圖片在你的瀏覽器中執行,而一次放入多張會將它們送到我們的伺服器一起處理。

  2. 等候自動轉換

    檔案一載入,瀏覽器就會把 WebP 編好。對螢幕解析度的多數圖片來說,結果遠在一秒內就出現,不必按任何按鈕。

  3. 查看輸出大小

    「下載」按鈕會顯示輸出檔案的大小。透明區域在 WebP 中仍然透明,而檔案應該明顯比來源 PNG 小。

  4. 下載 WebP

    按「下載」儲存檔案。原本的檔名會保留,只把副檔名換成 .webp。要轉另一張 PNG,把它拖到頁面上即可,每個檔案各自獨立執行。

相關轉換器

如果需要反向轉換或其他格式選項,這些工具已準備就緒。

常見問題

把 PNG 轉成 WebP 時透明度會保留嗎?

會。WebP 支援完整的 alpha 色版,所以你 PNG 裡的透明區域在 WebP 輸出中仍然透明。當你從 PNG 出發時,這正是要選 WebP 而非 JPG 的主因,因為 JPG 沒有 alpha,必須把透明度壓平成一種純色,而 WebP 把去背原封保留。標誌、圖示、商品圖,以及帶透明背景的介面素材,全都毫不變動地通過轉換,不需要任何額外步驟。

為什麼要把 PNG 轉成 WebP?

檔案變小了,頁面載入就更快。把 PNG 換成 WebP 是在不損畫質的前提下提升網站顯示速度最直接的方式之一。依 Google 的 WebP 文件,帶 alpha 的有損 WebP 大約可小到三分之一。較輕的圖片讓訪客等待的時間縮短,在行動網路較慢的環境下尤為明顯。Chrome、Firefox、Safari 與 Edge 的支援度是全面的。

把 PNG 轉成 WebP 會損失品質嗎?

是的,在正常瀏覽條件下幾乎無從分辨。在網頁顯示解析度下,本工具的輸出與來源 PNG 看起來實質上一致。社群媒體貼文、網站橫幅、產品圖、介面圖示,通通可以直接使用。除非將圖片放大到 100% 像素層級逐一比對,否則很難找出差別。轉換不會更動來源 PNG,它依舊完好保留在你的裝置上。

WebP 比 PNG 小多少?

依 Google 官方的 WebP 文件,無損 WebP 約比同等 PNG 小 26%,而帶 alpha 色版的有損 WebP 大約只有相近 PNG 的三分之一大。確切比例取決於影像內容,帶有大片透明區域與純色區塊的圖形得益最多,而細節極多的相片得到的縮減較小但仍然可觀。無論如何,WebP 都更小,而透明度也得以保留。

在這裡把 PNG 轉成 WebP 安全嗎?

這取決於你轉換一張還是多張。單個 PNG 直接在你的瀏覽器中轉換,所以該檔案不會被上傳,你可以開啟瀏覽器的網路面板,在轉換期間查看,那裡不會出現任何出站影像請求。當你一次轉換多張時,它們會送到我們的伺服器一起處理,該結果會在約 2 小時內刪除,並可在下載後立即自行刪除。無論哪種方式,除了建立你的下載之外,不會保留你圖片的任何內容。

WebP 在所有瀏覽器都能用嗎?

可以。WebP 在 Chrome、Firefox、Safari 與 Edge 中都受到原生支援,涵蓋了實際使用中的絕大多數瀏覽器。自 2020 年 Safari 14 起支援已是全面的。如果你的目標族群可能包含非常舊的瀏覽器或內嵌 webview,PNG 仍是最保險的選擇。對任何使用過去五年內現代瀏覽器的族群,WebP 都能可靠運作。你可以在 caniuse.com 的 WebP 條目查驗各瀏覽器的支援狀況。

詳細資訊

團隊關於工藝、格式以及一個好結果背後小決定的筆記。

WebP 為何能比 PNG 更小
WebP 使用兩種不同的壓縮模式。無損模式結合空間與色彩預測,搭配比 PNG 的 DEFLATE 更精巧的熵編碼階段,依 Google 公布的基準,在典型影像上達到約 26% 更好的壓縮率。有損模式套用類似影片壓縮的分塊轉換,設計來丟棄人眼感知不到的資訊,同時保留眼睛實際看得見的部分。對帶 alpha 色版的影像,WebP 對 alpha 資料採用獨立的無損子壓縮,同時對 RGB 資料套用有損壓縮,這就是為什麼帶透明的有損 WebP 在相當的視覺品質下能比 PNG 小約三倍。PNG 的 DEFLATE 只有無損,無法利用有損模式所善用的那種感知取捨。格式上的差異就說明了這個落差。
細看 alpha 色版
PNG 與 WebP 都支援 8 位元 alpha 透明度,意思是每個像素都能持有從 0(完全透明)到 255(完全不透明)的不透明值。當平台影像引擎把 PNG 重存成 WebP 時,它讀取每個像素的 RGBA 值,並把 alpha 值直接交給 WebP 的壓縮步驟,在那裡 alpha 以無損壓縮保留,與 RGB 資料如何處置無關。結果就是 PNG 中 alpha 為 0 的每個透明像素、介於 1 到 254 的每個半透明像素,以及 255 的每個不透明像素,都對應到 WebP 中完全相同的狀態。對於帶柔和投影或在透明背景上有抗鋸齒文字的標誌,邊緣的平滑度都完整保留。這與 JPG 形成對比,JPG 的容器規格裡沒有 alpha 欄位,寫出前必須把影像合成到一個背景色上。
核心網頁指標與圖片格式選擇
「最大內容繪製」衡量頁面上最大可見元素出現在可視範圍內所需的時間。對多數內容頁來說,那個元素就是主視覺圖片,而 Google 在它的核心網頁指標評估中把 LCP 當作排名訊號。PNG 影像因為檔案大小,是 LCP 失敗的常見來源,一張 4K 解析度的相片型 PNG 可能重達數 兆位元組,而同等的接近無損 WebP 通常只是其中一小部分。PageSpeed Insights 在它的「以新世代格式提供圖片」稽核項目中會特別標示這點,把 PNG 列為要替換的目標格式。把出現在關鍵繪製路徑上的 PNG 轉成 WebP,是改善實測頁面效能時槓桿最高的單一變更之一。瀏覽器支援的時間軸讓這件事很安全,Chrome 在 2011 年加入 WebP,Firefox 在 2019,Safari 在 2020,Edge 則自它的 Chromium 重構起。
有損輸出與接近無損設定
WebP 的儲存提供 0 到 100 的品質參數,數值越高保留越多細節,代價是更大的檔案。本工具以固定的接近無損設定寫出,調校來在相片、介面圖形與圖示這些典型網頁素材類別之間平衡視覺保真度與檔案大小。在這個設定下,輸出在一般螢幕檢視距離下與來源 PNG 在感知上分辨不出。技術上,相對於真正的無損編碼會損失一些位元層級精度,意思是把解碼後的 WebP 像素與原始 PNG 像素做位元組層級比對,會顯示微小的數值差異。對相片內容而言,這些差異低於人類感知的門檻。對醫療影像、衛星攝影或數位存檔保存這類把無損保真度當硬性要求的工作,正確做法是保留 PNG,只把 WebP 當交付匯出,而非工作副本。
中繼資料的處理方式
用於 PNG 轉 WebP 的流程會從輸出中清除 EXIF、IPTC 與 XMP 中繼資料。這與三大瀏覽器引擎觀察到的行為一致。ICC 色彩描述檔的處理則不一致,Chrome 與 Safari 會在 WebP 輸出中保留 sRGB 的 ICC 描述檔標籤,而 Firefox 會清除包含 ICC 描述檔在內的所有中繼資料。最終結果是轉換後的 WebP 跨瀏覽器都對 sRGB 安全,但來源 PNG 中任何如 Display-P3、Adobe RGB 或 ProPhoto RGB 的廣色域標記,在 Firefox 中不會留存。對色彩要求嚴格的專業流程,這個不一致很重要,所以若最終輸出需要色彩描述檔的保真度,請用一個會明確寫入 ICC 資料的工具轉換,或用專門的影像中繼資料編輯器在後製階段套上描述檔標籤。
何時該保留 PNG,何時 WebP 就足夠
實務上的決策樹很短。如果影像最終的去處是網頁或網頁應用程式,而渲染環境是任何 2020 年以後的瀏覽器,WebP 就是正確的匯出格式。如果影像需要在 Figma、Sketch 或 Affinity Designer 之類的設計應用程式中開啟,請在你使用的特定版本中確認 WebP 支援,因為支援度各異。如果影像會用於印刷流程,PNG 或 TIFF 較佳,因為多數印刷 RIP 不處理 WebP。如果影像會以電子郵件寄出,PNG 較保險,因為郵件用戶端對現代格式向來不一致。如果影像會當成會被反覆編輯與重存的工作檔,請保留 PNG 當母檔。WebP 在接近無損品質下是極佳的交付格式,而 PNG 是更好的存檔與編輯格式。理想的流程是把 PNG 留作原始檔,並匯出 WebP 用於網頁交付。