webp性能测评
一、测评目的
通过分析webp图片在不同条件下的性能表现，来确定webp图片的适用场景。
二、测评方式
使用控制变量法，分别从以下3点对webp与jpg图片做对比，得出结论。
1.页面图片总体积。
2.单张图片体积。
3.网速
三、采样数据
测试机器：2015年MacBook Pro
处理器：2.7GHz Intel Core i5
显卡：Intel Iris Graphics 6100
浏览器：Chrome Mac版 52.0.2743.116
1.变化参数：页面图片总体积（通过图片数量变化）
固定参数：每张图片质量为70，尺寸为原图尺寸，网速为Wifi
| 图片总体积(KB) | 18.1(37.2) | 38.6(63.4) | 52.1(93.8) | 99.9(167.6) | 126.3(223.2) | 192.8(325.2) | 222.7(386.7) | 233.6(420.5) | 252.1(458.6) | 283.2(514.9) |
| webp | 207 | 278 | 443 | 718 | 799 | 1073 | 1406 | 1469 | 1662 | 1893 |
| jpg | 116 | 143 | 220 | 270 | 336 | 384 | 452 | 493 | 547 | 617 |
2.变化参数：单张图片体积（通过图片尺寸以及质量变化）
固定参数：网速为Wifi
| 单张图片体积(KB) | 1.0(1.6) | 2.3(3.5) | 3.3(4.9) | 5.0(8.0) | 7.7(13.0) | 9.3(17.0) | 11.3(21.8) | 12.8(26.3) | 14.8(31.4) | 20.2(38.7) |
| webp | 118 | 131 | 136 | 164 | 166 | 240 | 265 | 302 | 314 | 324 |
| jpg | 132 | 133 | 146 | 149 | 150 | 183 | 190 | 217 | 233 | 240 |
3.变化参数：网速（使用Chrome工具模拟网速）
固定参数：图片质量70，尺寸为原图尺寸，webp格式体积18.1KB，jpg格式体积37.2KB
| 网速 | Regular 2G(250k/s) | Good 2G(450k/s) | Regular 3G(750k/s) | Good 3G(1.5m/s) | Regular 4G(4m/s) | Wifi(30m/s) |
| webp | 914 | 522 | 406 | 294 | 235 | 214 |
| jpg | 1519 | 844 | 528 | 293 | 189 | 110 |
四、数据分析
根据以上分析可得出结论：
1.webp图片体积比jpg体积要小40%左右，因此webp图片下载速度比jpg图片更快，耗流量更少。
2.渲染webp比渲染jpg明显要慢。
3.页面图片总体积越大，webp比jpg额外耗时更多。
4.单张图片在5KB以下时，webp加载较快；单张图片在5KB以上时，jpg加载更快。
5.网速在1.5mb/s以上时，jpg更快；网速在1.5mb/s以下时，webp更快。
五、结论
通过以上分析，得出webp的适用场景：
1.网速较差时（由于webp图片体积更小，耗流量更少，网速不好时，性能表现更好）
2.单张图片在5KB以下时
3.页面webp图片总体积在50KB以内时（此时webp与jpg相差在0.2s以内，可以接受）
