這個圖片庫的內容
這個圖片庫提供一些範例圖片,以便展示兩種 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-無損檔案大小:79.9 KB |
WebP-lossy (含 Alpha 版) 檔案大小:17.7 KB |
「我的使用者網頁嬰兒服」 2 | ||
PNG 最佳化檔案大小:38.1 KB |
WebP-無損檔案大小:27.0 KB |
WebP-lossy (含 Alpha 版) 檔案大小:13.8 KB |
「PNG 透明度示範」 3 | ||
PNG 最佳化檔案大小:213.5 KB |
WebP-lossless 檔案大小:149.0 KB |
WebP-lossy (含 Alpha 版) 檔案大小:51.6 KB |
「葛瑞格孟德爾 189 歲冥誕」 4 | ||
PNG 最佳化檔案大小:49.2 KB |
WebP-無損檔案大小:33.2 KB |
WebP-lossy (含 Alpha 版) 檔案大小:18.3 KB |
「重疊的透明指南針資訊卡」(適用於疊加層) 5 | ||
PNG 最佳化檔案大小:126.8 KB |
WebP-無損檔案大小:97.1 KB |
WebP-lossy (含 Alpha 版) 檔案大小:57.3 KB |
以下是 WebP 檔案的連結(在 Chrome 22 以上版本中查看):
「黃色玫瑰」: | 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