無損與 Alpha 版圖片庫

這個圖片庫提供一些範例圖片,以便展示兩種 WebP 新模式:WebP-lossless 和 WebP-lossy 和 Alpha (支援透明度)。

並列比較

下表提供 PNG 圖片 (以 pngcrush 和 pngout 壓縮)、WebP 無損圖片,以及具有 Alpha 版的 WebP-lossy 圖片,以供並排比較。圖片會重疊在方格背景上,就像在圖形軟體中一般完成一樣。

請注意,我們已針對 WebP-lossy 圖片使用 WebP 品質 90,其中含有 Alpha 和預設品質的 WebP 無損圖片。詳情請參閱重現映像檔一節。

我們向無法轉譯 WebP 的瀏覽器提供 WebP 圖片 (已轉換回 PNG)。如果您有相容的瀏覽器,可以在下方找到 WebP 檔案的連結。此外,此頁面上的圖片也經過縮減,以便提供瀏覽便利性。點選任何圖片即可查看原尺寸圖片。

表格也會註明透過各種模式取得的圖片大小。

PNG

WebP 無損

WebP-lossy (含 Alpha 測試版)

「黃玫瑰」1

PNG 最佳化檔案大小:110.7 KB
WebP 無損圖片
WebP-無損檔案大小:79.9 KB
WebP-lossy (含 Alpha) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:17.7 KB
「我的使用者網頁嬰兒服」 2

PNG 最佳化檔案大小:38.1 KB
WebP 無損圖片
WebP-無損檔案大小:27.0 KB
WebP-lossy (含 Alpha) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:13.8 KB
「PNG 透明度示範」 3

PNG 最佳化檔案大小:213.5 KB
WebP 無損圖片
WebP-lossless 檔案大小:149.0 KB
WebP-lossy (含 Alpha) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:51.6 KB
「葛瑞格孟德爾 189 歲冥誕」 4

PNG 最佳化檔案大小:49.2 KB
WebP 無損圖片
WebP-無損檔案大小:33.2 KB
WebP-lossy (含 Alpha) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:18.3 KB
「重疊的透明指南針資訊卡」(適用於疊加層) 5

PNG 最佳化檔案大小:126.8 KB
WebP 無損圖片
WebP-無損檔案大小:97.1 KB
WebP-lossy (含 Alpha) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:57.3 KB
「黃色玫瑰」: WebP-lossless 檔案 (80.1 KB) WebP-lossy (含 Alpha 版) 檔案 (18.4 KB)
「我的使用者網頁寶寶:」 WebP-lossless 檔案 (27.0 KB) WebP-lossy (含 Alpha 版) 檔案 (14.1 KB)
「PNG 透明效果示範」: WebP-lossless 檔案 (149.1 KB) WebP-lossy (with alpha) 檔案 (52.6 KB)
「葛瑞格孟德爾 189 歲冥誕」: WebP-lossless 檔案 (33.3 KB) WebP-lossy (含 Alpha 版) 檔案 (19.0 KB)
「重疊的透明指南針卡」(適用於疊加層): WebP-lossless 檔案 (97.1 KB) WebP-lossy (with alpha) 檔案 (57.3 KB)

圖片來源

本頁的圖片來自多個不同來源。上列圖片的抵免額會依序列出。

1 「免費圖庫相片 (高解析度 - 黃玫瑰 3 - 花朵」)
圖片作者:Jon Sullivan
這個檔案位於公共領域資源。
JPEG 來源
2 「我的使用者頁面嬰兒服」
映像檔作者:Fizyplankton
這個檔案是公共領域資源。
PNG 來源
3 「PNG 透明度示範」
圖片作者:POV-Ray 原始碼
相片已採用 創用 CC 姓名標示 - 分享方式 3.0 未移植授權。
PNG 來源
4 「格雷格曼德爾 189 歲冥誕」
圖片作者:Google Doodle 團隊
感謝 Google Doodle 團隊製作這張圖片。
PNG 來源
5 「透明指南針卡 (適用於重疊)」
圖片作者:Denelson83
這個檔案已取得 創用 CC 授權 姓名標示 - 相同方式 3.0 未移植授權。
PNG 來源

重現映像檔

為提升可重現性及示範某些 WebP 壓縮參數的使用,我們在此說明產生這個圖片庫中的圖片時所需的確切步驟。

工具

對於 PNG 重新壓縮,系統會使用 pngcrush 1.8.13 和 ZopfliPNG 1.0.3 中的最佳結果。使用下列指令列選項

Pngcrush:

pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png

ZopfliPNG:

zopflipng --lossy_transparent input.png output-candidate.png

使用所有濾鏡的 ZopfliPNG:

zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png

為了重新縮放部分較大的來源圖片 (僅供檢視),我們使用了名為 convert 的最新版 ImageMagick,工具可在 https://www.imagemagick.org 取得。確切的指令列如下:

convert image.png -resize 240x image_resized.png

壓縮為 WebP-lossless

我們在 cwebp 工具中使用「無損」選項,將 PNG 轉換成 WebP-無損格式。如要取得最少的輸出內容,請使用確切的指令列如下所示:

cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp

轉譯 WebP 無損轉譯

我們使用 dwebp 工具將無損圖片轉換為 PNG 格式,以便進行算繪。確切的指令列如下所示:

dwebp webp_lossless.webp -o output.png

正在壓縮為 WebP-lossy (含 alpha)

我們使用 cwebp 工具將 PNG 轉換成 WebP-lossy (含 Alpha 透明層)。我們選擇 WebP 品質 90 (有損壓縮) 和 Alpha 品質 100 (無損壓縮)。確切的指令列如下所示:

cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp

轉譯 WebP-lossy (使用 Alpha 版)

我們使用 dwebp 工具進行轉譯,將 WebP-lossy (含 Alpha 版) 圖片轉換回 PNG。確切的指令列如下所示:

dwebp webp_alpha.webp -o output.png