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以内，可以接受）