這個圖片庫的內容
這個範本庫提供了一些範例圖片,用於展示兩種 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 無損檔案大小:79.9 KB |
WebP-lossy (含 Alpha 版) 檔案大小:17.7 KB |
「baby tux for my user page」 2。 | ||
PNG 最佳化檔案大小:38.1 KB |
WebP 無損檔案大小:27.0 KB |
WebP-lossy (含 Alpha 版) 檔案大小:13.8 KB |
「PNG 透明度示範」 3 | ||
PNG 最佳化檔案大小:213.5 KB |
WebP 無損檔案大小: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 以上版本查看):
「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