Webp转图

Webp转图与图片的压缩质量quality、图片的色彩数（色值）color、图片的透明度alpha、图片压缩方式method、图片的面积尺寸等

WebP格式同样丢失色彩细节大量细节，因为WebP 使用了与 WebM 相同的VP8编码器来压缩图像，利用预测编码技术，通过部分像素块的颜色来预测其邻近块的颜色值，并只记录两者的差值，因为多数情况下两者差距很小，甚至 零差距，因而大大提高了压缩的比率。简单的说，Google 想打造出一种文件体积又小，而且画质和JPEG一样的图像格式，以在保证画质的前提下提高网页图像浏览的速度

图片的压缩质量quality

lossless：无损压缩，值为true|false，lossless=false为有损压缩，lossless=true为无损压缩

quality ：压缩质量，值为0到100，值越大越图片质量越好

指令如下：

/usr/local/bin/convert  s1.jpg -quality 75  -define webp:lossless=true  s1_75_true.webp

/usr/local/bin/convert  s1.jpg -quality 75  -define webp:lossless=false  s1_75_false.webp

/usr/local/bin/convert  s1.jpg -quality 75   s1_75_no.webp

/usr/local/bin/convert  s1.jpg -quality 75   s1_75_no.jpg

结果：

1）取其中一张图s1.jpg测试数据:

压缩质量	jpg压缩(_no.jpg)	webp有损(_false.webp)	webp/jpg 压缩比值	webp无损(_true.webp)	不指定有损(_no.webp)
100	1057667	570746	53.96	1240600	1240600
95	590865	434982	73.61	1240138	434982
90	419761	304424	72.52	1240196	304424
85	338909	231062	68.18	1249354	231062
80	287944	187562	65.14	1249342	187562
75	252466	154344	61.13	1249330	154344
70	229808	146322	63.67	1249410	146322
65	210235	137118	65.22	1249650	137118
60	193884	130304	67.21	1249662	130304

2）截取网上实验曲线：

可见，无损压缩表现很稳定，压缩质量越高，压缩效果也越好。而有损压缩在压缩质量设置为 75 以上之后，压缩效果反而减弱，甚至压缩后的图片体积会大于压缩前的体积。

结论：

1）选择无损压缩时，“-define webp:lossless=true -quality 100” 是最佳方案

2）选择有损压缩时，“-define webp:lossless=false -quality 75”是最佳方案（图片质量与体积大小达到均衡）

注意：若指令没有指定-define webp:lossless是否为有损压缩，测试发现imagemagick执行转图处理时，当 quality 100时，默认使用WebP无损压缩；当quality <100时，默认使用webp有损压缩；因为WebP的优势体现在有损压缩，建议在指令中加上参数-define webp:lossless=false 

图片的色彩数（色值）color

指令如下：

/usr/local/bin/convert  s1.jpg -colors 131072 -depth 8 -quality 75   -define webp:lossless=false  s1_75_c131072.webp

/usr/local/bin/convert  s1.jpg -colors 65536 -depth 8 -quality 75   -define webp:lossless=false  s1_75_c65536.webp

/usr/local/bin/convert  s1.jpg -colors 2048 -depth 8 -quality 75   -define webp:lossless=false  s1_75_c2048.webp

/usr/local/bin/convert  s1.jpg -colors 1024 -depth 8 -quality 75   -define webp:lossless=false  s1_75_c1024.webp

/usr/local/bin/convert  s1.jpg  -quality 75   -define webp:lossless=false  s1_75_cno.webp

结果：

1）取其中两张图的测试数据对比，图片的压缩比值不是固定的，色值丰富的图，压缩效果较差（渐变和杂色图片都是增加了色彩数）

S1

压缩质量	jpg压缩	webp有损	webp/jpg 压缩比值
100	1057667	570746	53.96
95	590865	434982	73.61
90	419761	304424	72.52
85	338909	231062	68.18
80	287944	187562	65.14
75	252466	154344	61.13
70	229808	146322	63.67
65	210235	137118	65.22
60	193884	130304	67.21

D1

压缩质量	jpg压缩	webp有损	webp/jpg 压缩比值
100	1373008	880006	64.01
95	800583	682764	85.28
90	590074	511118	86.62
85	489334	408364	83.45
80	426368	340452	79.85
75	379863	282084	74.26
70	350204	265816	75.90
65	323286	253572	78.44
60	300988	239652	79.62

S1

色彩数	jpg压缩	webp有损	webp/jpg 压缩比值
no	252466	154344	61.13
131072	252466	154344	61.13
65536	252466	154344	61.13
2048	254841	156082	61.24
1024	255806	157338	61.50

D1

色彩数	jpg压缩	webp有损	webp/jpg 压缩比值
no	379863	282084	74.26
131072	381302	285254	74.81
65536	381302	285254	74.81
2048	382190	285098	74.59
1024	382190	285194	74.62

改变-color参数值所得到的图的上面几个属性一样，那么色彩数根据哪里得知？

2）截取网上实验曲线

可见，在色彩数相对较少的前提下，无损压缩的效果要优于有损压缩；而色彩数很多时，有损压缩效果要优于无损压缩，这个分界点在 256±100 之间。

结论：

建议原创表情尽量控制颜色数在 256 色以内，采用无损压缩性价比最高。

1)小于 256 色：以图标，图形，剪贴画为代表，最适合采用 WebP 无损压缩，体积大幅减少；

2)大于 256 色：以多数表情图，广告图为代表，最适合采用 WebP 有损压缩，选择较高压缩比（建议压缩质量为 100% ~ 75%）

3)远大于 256 色：以风景照，视频截图为代表，最适合采用 WebP 有损压缩，选择适中压缩比（建议压缩质量为 75% 以下）

注意：大多图片都是远大于256色，图片自身的色彩数在进行WebP 有损压缩时对体积有影响；尝试通过设置指定-color色彩数进行有损压缩，发现若设置-color>原图色彩数，图片体积不变，若设置-color<原图色彩数,图片体积反而增大，所以无论何种色彩数，都没能使得输出的 WebP 图片进一步减少体积。

图片的透明度alpha

图片压缩方式method

指令如下：

/usr/local/bin/convert  s1.jpg  -quality 65    -define webp:method=0   -define webp:lossless=false s1_65_m0.webp

/usr/local/bin/convert  s1.jpg  -quality 65    -define webp:method=2   -define webp:lossless=false s1_65_m2.webp

/usr/local/bin/convert  s1.jpg  -quality 65    -define webp:method=4  -define webp:lossless=false s1_65_m4.webp

S1

压缩质量	jpg压缩	webp有损	webp/jpg 压缩比值	m0	m2	m4	m6	m6/m4
100	1057667	570746	53.96
95	590865	434982	73.61	484668	434358	434982	415060	0.95
90	419761	304424	72.52
85	338909	231062	68.18	271646	237004	231062	207016	0.89
80	287944	187562	65.14
75	252466	154344	61.13	188456	160498	154344	137002	0.88
70	229808	146322	63.67
65	210235	137118	65.22	169912	142984	137118	120308	0.87
60	193884	130304	67.21

D1

压缩质量	jpg压缩	webp有损	webp/jpg 压缩比值	m0	m2	m4	m6	m6/m4
100	1373008	880006	64.01
95	800583	682764	85.28	696750	685236	682764	677570	0.99
90	590074	511118	86.62
85	489334	408364	83.45	431426	423136	408364	399356	0.98
80	426368	340452	79.85
75	379863	282084	74.26	301584	297614	282084	278946	0.99
70	350204	265816	75.90
65	323286	253572	78.44	271858	269034	253572	248596	1.11
60	300988	239652	79.62

结论：

默认压缩方式值为4，无论何种压缩质量参数，加上“method=6”都能使得输出的 WebP 图片进一步减少体积，量级是1%~2%，但是会增加耗时。

采样密度（即采样因子）-sampling-factor

/usr/local/bin/convert w1x1.jpg -quality 80  -sampling-factor 1x1   -resize '800x600>' w1x1_800x600_80.jpg

/usr/local/bin/convert w1x1.jpg -quality 80  -sampling-factor 2x2   -resize '800x600>' w2x2_800x600_80.jpg

/usr/local/bin/convert w1x1_800x600_80.jpg -quality 30  -sampling-factor 1x1   -define webp:lossless=false  w1x1_800x600_30_1.webp

/usr/local/bin/convert w1x1_800x600_80.jpg -quality 30  -sampling-factor 2x2   -define webp:lossless=false  w1x1_800x600_30_2.webp

/usr/local/bin/convert w1x1_800x600_80.jpg -quality 30   -define webp:lossless=false  w1x1_800x600_30_no.webp

w1x1_800x600_80.jpg(98557) w2x2_800x600_80.jpg(77010)

结果：

w1x1原图	-sampling-factor 1x1	-sampling-factor 2x2	无采样因子
1x1采样图 转jpg	40447	34451	40447
1x1采样图 转webp	18604	18604	18604
2x2采样图 转jpg	39753	34209	34209
2x2采样图 转webp	18462	18462	18462

通过阅读文献了解到WebP 使用的是 Fancy 采样算法，既然是采样算法必然有采样区块，而 JPEG 的采样区块是 8*8，对于原始图片的长宽不是 8 的倍数，都需要先补成 8 的倍数，使其能一块块的处理，所以对于 8 的整数倍的图片，压缩会更高效。

在图片像素数据流中，信息可以被分为一段接一段的最小编码单元（Minimum Coded Unit，MCU）数据流。所谓MCU，是图像中一个正方矩阵像素的数据。

大多图片的采样因子为4：1：1或1：1：1。其中，4：1：1即2x2,1x1,1x1；1：1：1即1x1,1x1,1x1

下面通过一幅图像大小（32px*35px）的图片，对上面列出两种采样因子的具体说明。   

a）    采样因子为4：1：1

此时，Hmax=max（2，1，1）=2，Vmax=max（2，1，1）=2。所以，MCU的宽为Hmax*8=16像素，高为Vmax*8=16像素。

图像实际的宽刚好是2个MCU，但高则稍稍大于2个MCU的高度，所以要补足3行MCU。

b）    采样因子为1：1：1

此时，Hmax=max（1，1，1）=1，Vmax=max（1，1，1）=2。所以，MCU的宽为Hmax*8=8像素，高为Vmax*8=8像素。

图像实际的宽刚好是4个MCU，但高则稍稍大于4个MCU的高度，所以要补足5行MCU。

可见，-sampling-factor采样因子为4：1：1进行jpg压缩体积更小，但对webp有损压缩无效。查看webp图片格式发现：Properties缺失属性jpeg:sampling-factor。

-结论：

1）sampling-factor采样因子对jpg压缩有效，不设置采样因子，则压缩转图时默认继承原图格式Properties属性jpeg:sampling-factor；

2）采用-sampling-factor 2x2采样参数比-sampling-factor 1x1采用参数，进行jpg压缩，体积更小

3）sampling-factor采样因子对webp有损压缩不起作用；但原图自身的采样参数对webp有损压缩有影响

查看文件格式identify -verbose

/usr/local/bin/convert  s1.jpg -quality 75   s1_75_no.webp

/usr/local/bin/convert  s1.jpg -quality 75   s1_75_no.jpg

/usr/local/bin/convert +profile '*' s1.jpg -quality 75   s1_75_no_p.jpg

jpg图和webp图对比

可见，webp图个别属性丢失或者未知，quality sampling-factor丢失

大尺寸低质量的图在手机上显示

jpg缩减取样

1. 通常来说对于jpeg，使用webp格式，文件能小30%，而对于带alpha通道的png来说，能小60%.

2. webp的宽高均使用14bit进行存储，所以限制了webp图片最大尺寸为16383×16383，当然最小是1x1。

3. webp在android 4.0就支持，但不支持透明度，支持透明度的webp是在android 4.2开始的。

4. 相对于jpeg，webp的编码要慢8x，而解码要慢1.4x。

附：相关指令

图片锐化

/usr/local/bin/convert  r1.jpg -quality 30 -sharpen 0x1 -resize '800x600>' -define webp:lossless=false  r1_800x600_30_s.webp

图片亮度

/usr/local/bin/convert  r1.jpg  -quality 30 -brightness-contrast 2x2 -resize '800x600>' -define webp:lossless=false   r1_800x600_30_l.webp

淘宝关于webp实时转图的例子：

http://gw.alicdn.com/imgextra/i1/787936378/TB2UTpCanPC11Bjy1zcXXbTrVXa_!!787936378.jpg_970x970q50s150.jpg_.webp

车家关于webp实时转图的例子：

http://qncar2.autoimg.cn/cardfs/product/g18/M09/51/74/autohomecar__wKgH6FfiT4KAMpHtAAfyHuXs9jE162.jpg?imageView2/1/w/120/h/90/format/webp