這個圖片庫的內容
這個範本庫提供了一些範例圖片,用於展示兩種 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
