如何把 PNG 轉成 WebP
把一張 PNG 拉進放置區，或點一下去瀏覽選一張。檔案一落下，工作就此啟動，沒有任何「轉換」按鈕，而日常圖片遠在一秒內就收工。接著一個「下載」按鈕會用來源名稱、配上新結尾把 WebP 存下來。轉換一張在你的瀏覽器裡跑，交幾張則一起上傳到我們的伺服器。同一條路服務手機與桌機，毋須安裝。要再處理一張，丟下一張 PNG 就好。交給它一張動態 PNG，只有第一幀存活，因為它在這裡做出的 WebP 是一張靜止圖而非一段動態序列。
PNG 轉 WebP，更小的檔案，留住透明
用一個保有透明、載入更快的精簡 WebP，換掉笨重的 PNG。
或將圖片拖放至此
轉換中…
0%
正在轉換您的圖片
這可能需要一分鐘左右——多個檔案會稍久一些。請保持此分頁開啟。
圖片已轉換為 WebP
關於此工具
Araluma 把 PNG 變成 WebP，保留透明的部分。交一張圖片，瀏覽器的影像引擎會在你自己的裝置上重建它，所以它不會被送到任何地方。一次交幾張，它們會前往我們的伺服器，一起逐張處理並回傳一個下載，然後在約 2 小時內清掉那個下載。PNG 透明的地方，WebP 也保持透明，因為 WebP 帶有完整的 alpha 通道，正因如此，當你想要更輕的檔案又不壓平去背時它勝過 JPG。按 Google 自己的 WebP 數據，無損 WebP 比同等 PNG 低約 26%，帶 alpha 的有損 WebP 接近三分之一大小。這裡出來的是接近無損設定的有損 WebP，用一絲位元級細節換取更小的檔案，同時在正常螢幕尺寸下看起來和來源 PNG 一樣。對於像素級封存副本，請留著原始 PNG。
透明像素原樣穿進 WebP
一條 8 位元的 alpha 色版就住在 WebP 裡頭，所以你 PNG 裡每一個透明像素，落到 WebP 時一樣透明。沒有東西轉白，沒有邊緣環著去背，事後也不必進編輯器收尾。這正是當你的 PNG 帶著透明時，要偏好 WebP 勝過 JPG 的理由，因為 JPG 不擁有 alpha，只能把清透的像素換成一種純色。標誌、圖示、商品去背、介面草模、圓角截圖，任何擱在穿透背景上的東西，全都原封越過。沒有開關要為此撥動，它就這麼發生，因為承載 alpha 本就是 WebP 被造出來要做的事。
從 PNG 換到 WebP 的理由
主要來說，你拿到一個輕得多的檔案，而透明與視覺品質仍守得住。Google 官方的 WebP 數字顯示無損 WebP 大約落在同等 PNG 之下 26%，帶 alpha 的有損 WebP 則接近一張可比 PNG 的三分之一。輕的影像到得更早，這直接餵進 Largest Contentful Paint，那是 Google 核心網頁指標之一，也是一項已知的排名因素。PageSpeed Insights 甚至會在它的新世代格式建議底下點名 PNG，而搬到 WebP 就清掉那面旗。支援也不是阻礙，因為 Chrome、Firefox、Safari 與 Edge 全都原生讀 WebP。
品質設定與有損的取捨
Araluma 把 WebP 寫在一個為相片與圖形雙雙調過的接近無損設定上，所以在一般檢視尺寸下，它看起來就和它出身的那張 PNG 相同。壓在這個層級時，WebP 在技術上是有損的，也就是相對於一份毫無瑕疵的無損副本，交出了一點位元層級的精度。對幾乎所有的網頁工作，標誌、圖示、介面素材、相片，那道縫隙是看不見的。當任務要逐像素精確時，比如醫療掃描或存檔母片，留著 PNG，讓 WebP 當匯出就好。在相片上你通常能預期 50 到 70% 的體積下滑，疊在 WebP 本就壓過 PNG 的結構優勢之上。
PNG 實際在哪裡被轉換
這取決於你交多少張。轉換單張 PNG，整個任務都發生在分頁裡，在瀏覽器自己的影像引擎上，在你的裝置上，沒有任何東西上傳，也沒有任何關於檔案的紀錄。自己驗證，開啟 DevTools，在轉換那一張時讓網路面板開著，數一數攜帶它的出站請求為零。一次轉換一把，它們會上傳到我們的伺服器，逐張處理並回傳一個下載。那個下載會在約 2 小時內從我們的伺服器清掉，你也可以在儲存的那一刻刪除。這樣一張圖片永不離開瀏覽器，而一批只在拼出你帶走之物所需的時間裡停留在我們的伺服器上。
原始 PNG 仍是對的選擇之時
WebP 走得很遠，但不是每個地方。少數設計程式、印刷管線與內部內容系統依然開口要 PNG。有些作業系統二話不說就拖放 PNG，卻為了 WebP 要個外掛。對於一個你會在桌面應用裡一再開啟、一再編輯的工作檔，留著無損的 PNG 當母檔，省下你一輪輪解碼再重建堆積出來的損耗。讓 WebP 當你給網頁的匯出，讓 PNG 留作來源。而要是你哪天得反向跑、把一張 WebP 變回 PNG，webp-to-png 工具能罩住那趟路。
運作方式
-
交出一張 PNG
把 PNG 滑到頁面上，或在選擇器裡找它。透明的部分一同前來。轉換一張，它留在你的機器上，放入多張，它們會上傳到我們的伺服器一起處理。
-
往後靠著等
你不必再做什麼。一張尋常的圖差不多在你手指抬起那一刻就成了 WebP，途中沒有「轉換」步驟，也沒有轉圈圈。
-
看著它瘦下來
結果會報出它出來多大。清透的地方依舊清透，而那張 WebP 該會比你起頭的那張 PNG 明顯輕些。
-
留下你的 WebP
在「下載」上點一下就寫出去，舊名字、嶄新的 .webp 結尾。排了更多，把每張往頁面上一丟，它們一張接一張地過。
常見問題
把 PNG 轉成 WebP 時透明度會保留嗎？
會。因為 WebP 握著一整條 alpha 色版，你 PNG 裡每一塊清透的地方，一旦成了 WebP 仍然清透。就是這一個事實，讓 WebP 在你從一張透明 PNG 起頭時勝過 JPG 作為目標，因為 JPG 不擁有 alpha，只能把清透的部位塗上一種純色，而 WebP 把去背原封留在它找到的樣子。標誌、圖示、商品照、擱在穿透背景上的介面零件，全都整塊越過，不向你多要什麼。
為什麼要把 PNG 轉成 WebP？
為了一個更精瘦、卻同時留住透明與外觀的檔案。照 Google 的 WebP 數字，無損那一型大約落在同等 PNG 之下 26%，帶 alpha 的有損型則接近其中一張的三分之一。精瘦的影像到得更早，這幫上 Largest Contentful Paint，那是 Google 在排名裡衡量的一項核心網頁指標。PageSpeed Insights 甚至在它的影像稽核裡把 PNG 指作一個新世代格式的機會。此外，每個主要瀏覽器，從 Chrome、Firefox 到 Safari、Edge，都不必幫忙就讀得了 WebP。
把 PNG 轉成 WebP 會掉品質嗎？
在 Araluma 採用的接近無損設定下，相片與圖形在一般檢視尺寸下看起來就和來源 PNG 相同。WebP 壓在這裡技術上是有損的，所以有一絲位元層級的精度走向了一個更小的檔案。對日常的網頁用途，標誌、圖示、相片，那道縫隙看不見。對逐像素精確或存檔工作，留著 PNG，把 WebP 當交付副本。轉換不碰你的 PNG，它就擱在你的裝置上，和原先一樣。
WebP 比 PNG 小多少？
Google 官方的 WebP 數字把無損 WebP 放在比同等 PNG 約少 26% 處，帶 alpha 的有損 WebP 則接近一張可比 PNG 的三分之一大。確切比例隨內容起伏，帶著大片清透區域與純色色塊的圖形得益最多，而忙碌、細節滿滿的相片看到的降幅較小但仍然有用。無論哪一種，WebP 出來都更輕，而透明也存活了下來。
在這裡把 PNG 轉成 WebP 安全嗎？
這取決於你轉換一張還是多張。單張 PNG 直接在瀏覽器裡重建，所以那個檔案不會被傳送，你可以開啟 DevTools，在轉換中途查看網路面板來驗證，那裡不會出現任何出站影像請求。一次轉換多張，它們會上傳到我們的伺服器一起處理，那個下載會在約 2 小時內清掉，儲存後你也能自己移除。無論哪種方式，除了拼出你的下載之外，你圖片的任何內容都不會留下。
WebP 在所有瀏覽器都能用嗎？
能，就一切實務而言。原生的讀取在 Safari 14 於 2020 出貨時就遍及各處，加入了 Chrome、Edge 與 Firefox 的行列，它們合起來幾乎涵蓋人們真正在用的每個瀏覽器。例外是真正老舊的那些，以及某些內嵌 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 的壓縮步驟，無論它怎麼處置 RGB，都把 alpha 留在無損壓縮底下。於是一個在 0 上全然清透的像素、一個落在 1 到 254 之間半清透的像素，以及一個在 255 上紮實的像素，各自對應到 WebP 中同一個狀態。在一個帶著柔和投影、或在清透背景上有抗鋸齒字樣的標誌上，那道細膩的邊緣柔度整塊穿了過去。JPG 做不到這件事，因為它的容器沒有 alpha 欄位，編任何東西之前都得先把影像逼上一種背景色。
核心網頁指標與影像格式的選擇
Largest Contentful Paint 量的是一頁上最大的可見元素花多久現身於可視範圍，而在多數內容頁上那個元素就是主視覺圖。Google 把 LCP 摺進它的核心網頁指標排名訊號，而 PNG 在 LCP 上是個慣犯，純因為重量，一張 4K 的相片型 PNG 可能跑到好幾 MB，而同一張圖作為接近無損的 WebP 只是其中一小塊。PageSpeed Insights 在它的新世代格式項目下直接點名這事，把 PNG 指作該換掉的格式。把擱在一頁關鍵繪製路徑上的那些 PNG 轉成 WebP，是為了實測速度而能下的回報最高的單一手之一。那條時間軸讓它安全，WebP 在 Chrome 自 2011、Firefox 自 2019、Safari 自 2020，而 Edge 自它的 Chromium 重建起。
有損輸出與接近無損的設定
WebP 露出一個從 0 到 100 的品質旋鈕，數字越高握住越多細節、也吃掉越多位元組。Araluma 把那個旋鈕釘在一個接近無損的點上，選來在相片、介面圖形與圖示這些尋常網頁類別之間，把保真度與體積平衡好。在這個點上，輸出在一般螢幕距離下讀起來與來源 PNG 分辨不出。嚴格說，相對於一次真正的無損編碼會滑掉一點位元層級的精度，所以在解碼後的 WebP 與原始 PNG 之間做逐位元組的核對，會浮出細小的數值間隙，全都落在人眼對相片素材的感知門檻之下。對醫療掃描、衛星影像，或無損是一條硬規矩的存檔保存而言，對的那一手是留著 PNG，把 WebP 純當交付匯出而非工作副本。
中繼資料的行為
把一張 PNG 變成 WebP 會把 EXIF、IPTC 與 XMP 欄位從輸出上掃掉，這是三大瀏覽器引擎每一個都會做的事。色彩描述檔則是引擎們分道揚鑣之處。Chrome 與 Safari 把 sRGB 標籤留著騎在 WebP 上，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 送往網頁。