教學

HEIC 轉 WebP:網頁開發者的現代格式

koboshiCo-founder
·2 分鐘閱讀
概述

WebP 給你現代的壓縮效果,又沒有 HEIC 的相容性包袱,而且幾乎所有瀏覽器都支援它好幾年了。這份指南教你如何把 HEIC 檔案轉成網頁用的 WebP、尺寸比較長什麼樣,以及如何把它做進管線。

使用者上傳了一張用 iPhone 拍的照片。檔案是 HEIC,約 1.8 MB。你的 <img> 標籤不能指望它:Chrome、Firefox 或 Edge 對 HEIC 都沒有原生支援。所以這張圖不是變成 3.4 MB 的 JPG,就是變成約 1.2 MB、肉眼分不出差別的 WebP。這個差距,正是對以 HEIC 抵達的照片而言 WebP 是解答的原因。

這份指南涵蓋把 HEIC 轉成 WebP、跨格式的尺寸比較長什麼樣,以及從瀏覽器工具到可以丟進建置流程的 shell 命令等各種選項。

為什麼是 WebP 而不是 HEIC

HEIC 在儲存照片上很出色,同等品質下大約只有 JPEG 的一半大小。它作為傳遞格式在網路上也完全沒用。Chrome、Firefox、Edge 和 Safari 支援 WebP 已經好幾年,而 HEIC 的支援只存在於 Safari 和少數廠商特定的地方。你不能把 HEIC 當作使用者上傳圖片的依靠,這正是轉換管線存在的原因。

WebP 覆蓋了與 HEIC 相同的範圍:它是建立於現代壓縮技術之上的有損格式,附帶無損模式與 alpha 透明。對照片來說,同等視覺品質下,WebP 與 JPG 的實際差異是檔案大約小 25% 到 35%。對圖片很多的頁面來說,這是實打實的節省。

尺寸比較

同一張 1200 萬畫素的照片,同樣的視覺品質:

格式大小瀏覽器備註
HEIC~1.8 MB僅 SafariiPhone 的來源格式
JPG~3.4 MB全部基準
WebP~1.2 MB全部有損,支援 alpha
PNG~24 MB全部無損,不適合照片

網頁圖片格式指南有完整的比較,如果你需要了解 WebP 對上 JPG 和 PNG 的定位背景。

選項 1:在瀏覽器裡轉換

最簡單的路徑是一個完全在裝置上執行的工具。HEIC 轉 WebP 轉換器用 WebAssembly 在本機解碼 HEIC、寫出 WebP 檔案,所以照片永遠不會離開你的機器。你可以設定品質、轉換整個資料夾,並以 ZIP 下載結果。這適合一次性轉換,也適合不善於命令列的設計師或編輯。

選項 2:在命令列轉換

對管線來說,經典組合是 libheiflibwebp。在 macOS 上用 Homebrew:

brew install libheif webp

然後用 heif-convertcwebp 轉換:

heif-convert input.heic output.png
cwebp -q 82 output.png -o output.webp

或者用 ffmpeg 跳過中間檔案:

ffmpeg -i input.heic -c:v libwebp -quality 82 output.webp

兩個命令都接受品質參數,而 cwebp 的控制項最多,包括無損模式,以及產生最慢、最小輸出的 -m 6。要處理整個資料夾,用迴圈:

for f in *.heic; do heif-convert "$f" "${f%.heic}.png"; cwebp -q 82 "${f%.heic}.png" -o "${f%.heic}.webp"; done

這樣就足以接進一個 shell 腳本,或一個在伺服器端處理上傳的 CI 工作。

在 WebP 中選擇品質與格式

有兩個決定對輸出的影響比什麼都大:

  • 有損 vs 無損。 cwebp -lossless,或搭配無損旗標的 -q 100,會保留每一個像素,但產生更大的檔案。用於螢幕截圖、標誌,以及任何平色和文字為主的東西。照片用有損。
  • 品質數字。 -q 82 對照片是合理的預設:視覺上乾淨,又遠比 JPG 小。對高品質目標,-q 90 要花更多位元,但更接近來源。這與 JPG 品質設定的取捨相同,HEIC 轉 JPG 不損失品質有詳細說明。

WebP 也處理 alpha,所以帶有透明通道的 HEIC 影像可以安全過關,而 JPG 會丟掉它。

關於更新格式的備註

AVIF 是以 AV1 為基礎的後繼者,一般來說在大小上勝過 WebP,而且現在所有主流瀏覽器都支援它。如果你在搭建全新的管線、可以自選解碼器,AVIF 值得拿來和 WebP 針對你的特定圖片比較。取捨是編碼器速度與工具鏈成熟度,這正是 WebP 對多數團隊仍是安全預設的原因。網頁圖片格式指南對每種格式的定位有更多說明。

簡短總結

任何最終要放上網站的東西,都把它從 HEIC 轉成 WebP。它到處都支援、同等品質下比 JPG 替代方案小,而且能用瀏覽器工具或兩條 shell 命令的管線完成轉換。把原始 HEIC 留作來源真相,在上傳時或批次工作中轉換,載入時間這筆帳就讓格式自己去算。

更多推薦閱讀