webp圖片技術調研最終結論(徹底真實數據可自行分析)

關於webp圖片格式調研及測試

資料收集

• 什麼是 WebP？

WebP（發音 weppy），是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％ 的文件大小。

2010 年發佈的 WebP 已經不算是新鮮事物了，在 Google 的明星產品如 Youtube、Gmail、Google Play 中均可以看到 WebP 的身影，而 Chrome 網上商店甚至已徹底使用了 WebP。國外公司如 Facebook、ebay 和國內公司如騰訊、淘寶、美團等也早已嚐鮮。目前 WebP 也在我廠不少的項目中獲得應用，如騰訊新聞客戶端、騰訊網、QQ空間等，同時也有一些針對 WebP 的圖片格式轉換工具，如智圖（http://zhitu.tencent.com），iSparta（http://isparta.github.io/）等。

• WebP 的優點

上面只是簡單介紹了這種圖片格式的背景和應用，不過 「talk is cheap」，這種格式優點在哪裏？除了壓縮效果極好，圖片質量可否獲得保障？這須要更理性客觀的數據：

這裏列舉一個簡單的測試：對比 PNG 原圖、PNG 無損壓縮、PNG 轉 WebP（無損）、PNG 轉 WebP（有損）的壓縮效果。更多測試查看 https://isparta.github.io （請用 Chrome 瀏覽器打開）

• 有損 WebP VS JPG

當 WebP 將 JPG 壓縮到至關於原圖 90% 質量 時，圖片體積減小了 50% 左右。當 WebP 將 JPG 壓縮到至關於原圖 80% 質量時，圖片體積則減小了 60%~80%。





有損 WebP 壓縮性能優於 JPG 的緣由主要是其預測編碼技術先進，而且宏塊自適應量化也帶來了壓縮效率的提高，而布爾算術編碼與霍夫曼編碼相比提高了 5%~10% 的壓縮性能。

• 無損 WebP 對比 PNG

• 與主流圖片對別

實際測試

1. 使用Python的PIL庫測試(須要最新版本6.0支持webp格式)

• 參數說明
  im.save(filename + 「.webp」, 「WEBP」,quality=quality)

• 文件大小小於1M

圖片名	原始大小(k)	質量100(轉換後大小k:消耗時間ms:壓縮率)	質量75(轉換後大小k:消耗時間ms:壓縮率)
1.jpg	99.57	93.75 : 167.89 : 5.85%	21.2 : 53.97 : 78.71%
10.jpg	34.11	53.72 : 32.98 : -57.49%	14.22 : 23.98 : 58.31%
100.jpg	22.88	34.61 : 28.98 : -51.27%	8.31 : 21.99 : 63.68%
101.jpg	26.57	41.72 : 30.98 : -57.02%	9.48 : 23.98 : 64.32%
102.jpg	18.67	27.0 : 25.99 : -44.62%	5.78 : 19.99 : 69.04%
103.jpg	110.72	110.11: 74.95 : 0.55%	26.27 : 54.97 : 76.27%
104.jpg	179.54	47.26 : 30.98 : 73.68%	10.8 : 22.99 : 93.98%
105.jpg	32.43	50.91 : 31.98 : -56.98%	13.47 : 23.99 : 58.46%
106.jpg	31.81	52.32 : 32.98 : -64.48%	12.48 : 29.98 : 60.77%
107.jpg	66.18	144.21: 83.95 : -117.91%	35.42 : 62.96 : 46.48%
108.jpg	32.6	61.65 : 79.96 : -89.11%	12.31 : 50.96 : 62.24%

• 文件大於1M

圖片名	原始大小(k)	質量100(轉換後大小k: 消耗時間ms:壓縮率)	質量75(轉換後大小k: 消耗時間ms :壓縮率)
17.jpeg	931.15	939.24 : 2178.65 : -0.87%	306.95 : 5579.53 : 67.04%
1.jpeg	2620.27	3258.7 : 3557.79 : -24.37%	984.66 : 6579.91 : 62.42%
16.jpeg	1657.2	687.56 : 6576.91 : 58.51%	143.93 : 4463.23 : 91.31%
14.jpeg	4386.87	2677.85 : 4474.22 : 38.96%	466.51 : 10093.73 : 89.37%
13.jpeg	3068.32	4566.25 : 6616.89 : -48.82%	996.69 : 13679.5 : 67.52%
12.jpeg	1061.62	1346.44 : 9029.39 : -26.83%	353.87 : 15291.46 : 66.67%
18.jpeg	1121.79	1280.48 : 12631.14 : -14.15%	112.97 : 7239.41 : 89.93%
19.jpeg	848.29	1344.75 : 14135.18 : -58.52%	353.47 : 5392.59 : 58.33%
100.jpeg	9446.42	2697.1 : 16651.65 : 71.45%	313.62 : 21351.52 : 96.68%
11.jpg	5780.23	2102.63 : 20296.39 : 63.62%	236.71 : 16375.65 : 95.9%
15.jpeg	5231.54	1843.42 : 18833.29 : 64.76%	154.02 : 21408.48 : 97.06%

1. 使用libwebp

• time cwebp -lossless -q 100 filename -o filename.webp

• 壓縮參數說明：

  -lossless：無損壓縮
  -q：壓縮質量，值越大越圖片質量越好
  -m：壓縮方式，值越大則圖片質量越好，體積越小，可是耗時較長

  能夠發現，無損壓縮表現很穩定，壓縮質量越高，壓縮效果也越好。而有損壓縮在壓縮質量設置爲 75 以上以後，壓縮效果反而減弱，甚至壓縮後的圖片體積會大於壓縮前的體積。

圖片名	原大小	無損100（大小:消耗時間s)	有損100(大小:消耗時間s)	有損75(大小:消耗時間s)
1.jpg	117k	435K:1.50s	177K:0.27s	48K:0.20s
2.jpg	272k	1.6M:3.21s	680K:0.90s	259K:0.75s
3.jpg	300k	938K:4.50s	448K:0.81s	113k:0.75s
4.jpg	576k	753K:1.94s	296K:0.49s	67K:0.38s
5.jpg	805k	3.2M:9.88s	1.2M:1.52s	274K:1.12s
6.jpg	1.4M	5.5M:9.04s	2.3M:1.70s	551K:1.49s
01.jpg	119K	338K:1.55s	119K:0.25s	28K:0.19s
02.jpg	207K	486K:2.22s	229K:0.35s	76K:0.24s
03.jpg	305K	1.4M:3.58s	653K:0.87s	225K:0.87s
04.jpg	477K	2.5M:4.84s	1000K:0.59s	307K:0.85s
05.jpeg	617K	740K:3.31s	418K:0.82ss	54K:0.79s
06.jpeg	932K	2.4M:4.82s	940K:1.13s	307K:0.99s

• jpg 壓縮

• time -p convert -quality 100 filename.jpg filename.jpg

• 壓縮參數說明：

  -quality: 圖片壓縮質量

圖片名	原大小	quality=100(大小:消耗時間s)	quality=75(大小:消耗時間s)
1.jpg	117k	227K:0.14s	63K:0.04s
2.jpg	272k	694K:0.16s	297K:0.13s
3.jpg	300k	744K:0.23s	262K:0.2s
4.jpg	576k	544K:0.13s	107K:0.09s
5.jpg	805k	1.8M:0.21s	430K:0.36s
6.jpg	1.4M	2.7M:0.57s	720K:0.42s
01.jpg	119K	188K:0.05s	50K:0.04s
02.jpg	207K	288K:0.07s	93K:0.05s
03.jpg	305K	734K:0.20s	307K:0.17s
04.jpg	477K	1.2M:0.24s	450K:0.20s
05.jpeg	617K	707K:0.24s	151K:0.19s
06.jpeg	932K	1.6M:0.32s	477K:0.24s

最終的結論：

選擇無損壓縮時，「-lossless -q 100」 是最佳方案,注意:cwebp 僅僅對png格式的圖片使用無損壓縮時，會有較爲高效的壓縮率和圖片質量

選擇有損壓縮時，「-q 75」是最佳方案（圖片質量與體積大小達到均衡）建議其餘格式圖片使用有損壓縮

不管何種壓縮參數，加上「-m 6」都能使得輸出的 WebP 圖片進一步減小體積，量級是1%~2%，可是會增長耗時

非png格式的圖片選擇無損壓縮時，「-lossless -q 100」 時編碼時間長，圖片質量反而極高可能變大，編碼時間時間很長，cpu使用率飆升跑滿，不建議使用

建議選擇有損壓縮時，「-q 75」是最佳方案（圖片質量與體積大小達到均衡）建議使用

webp 和jpg 同比例壓縮對比可知

即便jpg圖片同比例壓縮爲jpg和webp圖片 webp圖片也要比jpg圖片質量低百分之10~20之間

參考的實時轉換的網站和參考文章

• 實時轉換webp圖片格式website

  • https://squoosh.app/editor 支持多種格式，支持無損壓縮，自定義參數
  • http://isparta.github.io/ 僅支持png apng webp互轉
  • https://www.upyun.com/webp 又拍雲 壓縮方式應該使用的是有損壓縮，

• 參考文章

  • https://cloud.tencent.com/developer/article/1151876 webp的應用分析
  • https://www.cnblogs.com/xiaozz/p/6450178.html 該文章對於webp的兼容性，編碼效率，cpu使用狀況等進行了詳細分析
  • http://www.cnblogs.com/yjken/p/3922299.html 前端支持webp的方式
  • http://www.cnblogs.com/season-huang/p/5804884.html 支持webp的實踐方案
  • http://www.cnblogs.com/Pickcle/p/6247740.html webp加載速度性能測試

​