Command Palette

Search for a command to run...

PN

PNG 轉 WebP 轉換器

在瀏覽器中批次將 PNG 圖片轉換為 WebP,並保留透明度

贊助Toolz.dev 使用的主機Hostinger Partner
使用 Hostinger 讓您的網站上線
  • 免費網域
  • 免費 SSL
  • 30 天退款保證
Trustpilot 評分 4.6,超過 73,000 則評價
領取優惠 優惠碼

什麼是 PNG 轉 WebP 轉換器?

PNG 轉 WebP 轉換器會把 .png 重新編碼為 .webp,減少網頁需要傳送的位元組。PNG 是無損格式,製作圖片時這正是你需要的,但瀏覽器下載時就不一定了。主視覺圖、螢幕截圖或商品照如果一直保留為 PNG,雖然忠實保存了每個像素,卻要訪客付出載入時間的代價。WebP 本來就是為網頁傳輸而設計的格式,這也是網頁體積檢測工具總是點名 PNG 檔案的原因。

這裡的轉換完全在用戶端進行。PNG 由你自己的瀏覽器解碼並重新編碼,不會上傳任何內容,因此整個素材資料夾都能轉換,不必把客戶專案交給第三方。

舉個例子。一張 1920 x 1080 的螢幕截圖有 2,073,600 個像素,PNG 必須原封不動地記錄每一個像素,所以一張普通的截圖也會達到數 MB。把它拖到這裡,就會以預設品質 90 立即轉換。每一列會顯示 PNG 大小、箭頭、WebP 大小和變化百分比,所以節省多少是看得到的數字,而不是要你直接相信的說法。把滑桿移到 70,檔案會再轉換一次,你就能先比較兩種大小,再決定要用哪一個。

最多人問的問題是:品質滑桿的範圍是 10 到 100,100 會要求瀏覽器編碼器盡可能保留細節,但輸出結果取決於該編碼器,不保證與 PNG 逐位元完全一致。請把 PNG 當作母版,把 WebP 當作發布用的副本。透明度則會完整保留,所以去背圖片和標誌會保有 alpha 通道,不會多出白色背景。

WebP 有時也不是正確答案,早點知道比較省事。電子郵件附件、印刷廠、較舊的 CMS、要交給客戶的 Word 文件,以及早於此格式推出的桌面軟體,使用 PNG 或 JPG 都會更順利。動態 PNG 在這裡會被當作靜態圖片處理,所以輸出不會有動畫。EXIF、GPS 座標和色彩設定檔會在重新編碼時被移除。超過 100 百萬像素的圖片會被拒絕並顯示提示訊息,空檔案也會被拒絕,檔案位元組大小沒有限制,但有每日轉換次數限制。此工具免費,無需註冊。

如何將 PNG 轉換為 WebP

  1. 加入 PNG 檔案

    將 PNG 圖片拖曳到框內,或點擊上傳。可一次加入多個檔案,不會上傳任何內容,每個檔案一加入就會立即轉換。其他格式的檔案會被退回,並附上可處理該格式的轉換器連結。

  2. 調整品質滑桿

    品質範圍是 10 到 100,預設為 90,對照片類圖片來說是合理的起點。含有小字的螢幕截圖通常需要更高的品質。停止移動滑桿約 300 毫秒後,所有已加入的檔案會重新轉換,因此拖曳一次只會轉換一次,也不會再次計入每日次數。

  3. 檢查每個結果

    每一列會顯示縮圖、狀態和一行大小資訊,包括轉換前後的大小,以及 WebP 比原檔小或大多少。點擊縮圖可放大查看 WebP,在「轉換前」和「轉換後」之間切換,並查看其像素尺寸。

  4. 下載 WebP 檔案

    按下列上的下載圖示可儲存單一檔案,或使用清單標題中的「全部下載(n 張圖片)」下載整批,檔案會以 converted-webp.zip 提供,重複的檔名會自動加上編號。按「全部清除」可清空清單。

為什麼要將 PNG 轉換為 WebP?

選擇 WebP 的理由在於網頁傳輸。製作和保存圖片時,PNG 仍然是正確的格式,而 WebP 是傳送給訪客的較輕量副本。

頁面更輕,最大內容繪製更快

圖片通常是頁面中最重的部分,而主視覺圖往往正是最大內容繪製(Largest Contentful Paint)所測量的元素。使用 PNG 主視覺圖,瀏覽器就必須下載顯示時用不到的無損資料。

以合理的品質設定換成 WebP,通常能大幅減少下載量,不過實際節省多少仍取決於圖片本身。每一列都會以百分比顯示大小變化,因此在正式環境替換任何檔案之前,你可以先用自己的檔案確認效果。

透明度,卻沒有 PNG 的體積

在 WebP 出現之前,要透明就得用 PNG,要檔案小就得用 JPG,兩者無法兼得。WebP 保留完整的 alpha 通道,同時以有損方式壓縮色彩資料,所以去背商品圖或帶有柔和陰影的標誌可以變得更小,也不會多出白色方塊。

如果圖片沒有透明度,而且必須在較舊的軟體中開啟,將 PNG 轉換為 JPG 是相容性更好的做法。

PNG 與 WebP:該用哪一個

PNG 與 WebP 在網頁傳輸上的比較
項目PNGWebP
壓縮方式無損。照片和細節豐富的螢幕截圖檔案很大。有損或無損。此處的輸出由瀏覽器依你設定的品質進行編碼。
透明度完整的 alpha 色版。完整的 alpha 通道,轉換後仍會保留。
動畫僅支援 APNG,在這裡會當作靜態圖片讀取。格式本身支援動畫,但此轉換器只輸出靜態 WebP。
一般檔案大小對大多數照片和螢幕截圖來說,兩者中較大的一個。通常只有 PNG 的一小部分。請查看每個檔案的大小資訊。
色彩深度每個色板最高 16 位元。每個色板 8 位元,有損模式下色彩會以較低解析度儲存。
最大尺寸遠超過瀏覽器分頁能解碼的範圍。每邊 16,383 像素。
軟體支援通用。目前所有主流瀏覽器都支援。在電子郵件、印刷和較舊的桌面應用程式中支援較弱。
最適合母版、編輯、電子郵件和印刷。網站和網頁應用程式中提供的圖片。

了解 WebP 品質

此格式定義於 RFC 9649。其有損模式以 VP8 影片關鍵影格編碼為基礎:圖片會被切成區塊,根據相鄰像素進行預測,再依品質數值以較粗或較細的捨入方式儲存差異。設定為 90 並不代表保留 90% 的任何東西,它只是控制編碼器可以捨入多少的旋鈕。

有損 WebP 也會以亮度一半的寬度和一半的高度儲存色彩。人眼對色彩細節的敏感度遠低於明暗,所以照片能把這點掩飾得很好。但在平面背景上的細彩色線條,以及紅色或藍色的小字就不行了,可能會出現柔和的色邊。這就是螢幕截圖需要比照片更高品質設定的原因。

編碼是由你的瀏覽器完成的,而不是由此頁面內建的編解碼器完成。Chrome、Edge 和 Firefox 可以從畫布寫出 WebP。無法做到的瀏覽器會收到明確的訊息,說明它無法儲存 WebP 檔案,而不是悄悄地把 PNG 改名為 .webp。

隱私與安全

  • PNG 檔案由瀏覽器的 Canvas API 在用戶端解碼,並重新編碼為 WebP。未發布的設計稿和客戶素材絕不會上傳。
  • 批次前的次數限制檢查會傳送工具名稱、裝置識別碼,若你已登入,還會傳送帳號權杖。其中不含任何圖片資料。
  • 批次完成後傳送的使用紀錄包含檔案數量、以位元組計算的總大小和輸出格式,絕不包含檔名或像素。
  • 轉換不依賴該請求是否成功,因此頁面載入後即使離線也能繼續運作。
  • EXIF 欄位、GPS 座標和內嵌的色彩設定檔不會帶入 WebP,這也順便去掉了一些你用不到的體積。
  • 轉換後的檔案會保留在分頁的記憶體中,直到你移除它們、按下「全部清除」或關閉頁面。

主要功能

  • 每一列都顯示兩個檔案大小

    原始位元組數、箭頭、新位元組數和變化百分比,每次拖動滑桿都會更新。看著兩個實際數字來選擇品質設定,比參考一篇談平均值的部落格文章可靠得多。

  • 品質滑桿,10 到 100

    從預設的 90 開始,再依圖片需要調整。照片可以接受比較低的設定,但滿是小字的螢幕截圖或細線圖表就不行。

  • 保留透明度

    WebP 和 PNG 一樣支援 alpha 通道,所以去背圖、標誌和任何帶有柔邊的圖片轉換後都不會多出白色背景。

  • 一次處理整個資料夾

    一次加入專案中的所有 PNG,讓它們依序轉換,然後下載 converted-webp.zip。同名檔案會自動編號,不會互相覆蓋。

常見問題

將 .png 檔案拖放到此頁面,等該列顯示「完成」後下載 WebP。檔案一加入就會在瀏覽器中轉換,該列會顯示轉換前後的大小,無需上傳,也不用註冊帳號。移動品質滑桿,就會重新轉換。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

png to webpconvert png to webppng to webp converterbulk png to webppng to webp compressconvert png to webp without losing qualityhow to convert png to webppng to webp freepng to webp online