無損與 Alpha 版圖片庫

這個範本庫提供了一些範例圖片,用於展示兩種 WebP 新模式: 支援 WebP 的無損和 WebP-lossy (Alpha 支援)。

並列比較

下表顯示 PNG 圖片 (使用 pngcrush 和 pngout 壓縮)。 並支援 WebP 無損圖片和 WebP 失真圖片 (Alpha 版) 比較。圖片跟平常一樣,在方格圖案背景上 都是在繪圖軟體中完成

請注意,我們已在 WebP 損益圖像中使用 WebP 品質 90 (Alpha 版和 預設品質。詳情請見 詳情請參閱「重現映像檔」一節。

針對不支援 多半也不需要轉譯 WebP如果您擁有相容的瀏覽器,也可以 連結至下方的 WebP 檔案。此外,本網頁上的圖片 為方便瀏覽點選任何圖片即可檢視完整大小 圖片。

這份表格也會指出透過各種模式取得的圖片大小。

PNG

WebP 無損

WebP-lossy (使用 Alpha 版)

「Yellow Rose」1 個

PNG 最佳化檔案大小:110.7 KB
無損 WebP 圖片
WebP 無損檔案大小:79.9 KB
WebP-lossy (含 Alpha 版) 圖片
WebP-lossy (含 Alpha 版) 檔案大小:17.7 KB
「baby tux for my user page」 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 無損檔案大小: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
「Yellow Rose」: WebP-lossless 檔案 (80.1 KB) WebP-lossy (含 Alpha) 檔案 (18.4 KB)
"baby tux for my user page": WebP-lossless 檔案 (27.0 KB) WebP-lossy (含 Alpha) 檔案 (14.1 KB)
「PNG 半透明示範: WebP-lossless 檔案 (149.1 KB) WebP-lossy (含 Alpha) 檔案 (52.6 KB)
「格雷戈爾門德爾 189 歲冥誕: WebP-lossless 檔案 (33.3 KB) WebP-lossy (含 Alpha) 檔案 (19.0 KB)
「用於疊加畫面的透明指南針資訊卡」: WebP-lossless 檔案 (97.1 KB) WebP-lossy (含 Alpha) 檔案 (57.3 KB)

圖片來源

本頁圖片來自多個不同來源。的抵免額 以上圖片按順序排列

1 「免費圖庫相片 (高解析度) - 黃色玫瑰粉 3 - 鮮花」
圖片作者:Jon Sullivan
這個檔案屬於公共領域資源。
JPEG 來源
2 分 「我的使用者頁面的嬰兒 tux」
圖片作者: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

如要重新縮放部分較大的來源圖片 (僅供檢視),我們使用 最新版 ImageMagick 工具「convert」,下載網址: https://www.imagemagick.org.確切的指令列如下:

convert image.png -resize 240x image_resized.png

壓縮為無損 WebP

我們使用了「無損」cwebp 工具中的選項,可將 PNG 轉換為 WebP- 也不必擔心為了盡可能減少輸出內容,確切的指令列 如下所示:

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

轉譯無損 WebP

我們使用 Dwebp 工具將無損的 WebP 圖片轉換回 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 損失 (使用 Alpha 版)

我們使用 dwebp 工具,將 WebP-lossy (含 Alpha 測試) 圖片轉換回 PNG 格式,用於 算繪。確切的指令列如下:

dwebp webp_alpha.webp -o output.png