webp格式图片调研
webp格式图片,是google开发的一中旨在加快图片加载速度的图片格式。支持有损压缩和无损压缩,派生自图像编码格式VP8。根据 Google 的测试,无损压缩后的 WebP比PNG文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP还是可以减少 28% 的文件大小。
经过我们自己测试,发现jpg,png转webp格式之后,图片体积大小大概缩小为原来的1/6,而我们目前使用的80%质量压缩,也只是缩小为原来的1/4;所以考虑到网络流量的传输,以及图片的加载速度,webp格式图片确实占很大的优势。
不过现在支持webp格式的浏览器很有限,自己了解到的支持webp格式的浏览器有chrome,opera以及360浏览器。但是原生android4.0以上系统以及原生ios(需要经过处理)还是支持webp格式的。像app中webview打开H5以及ios系统微信服务号中的浏览器却是不支持webp格式的。H5支持webp也不是没有办法,第一种方式可以使用js直接在页面做特殊处理;第二种方式是使用原生android或ios处理webview中的webp图片,处理之后返回给webview。但是基于作者目前的技术水平以及公司的需要,这两种方式我们都不采用了。
经过调研:阿里云OSS支持图片格式转换和质量转换。我们最终的方案:原生android和ios使用webp格式,H5使用质量压缩。
支持webp格式图片的浏览器
经过查资料以及自己的测试,得知支持webp的浏览器有:chrome,opera和360;
IE,edge,firefox并不支持,当然还有一些没有测试到的浏览器;
android4.0以及ios的第三方类库也支持;
手机中webview打开H5是不支持的;
微信服务号中:android支持,ios系统却不支持java处理webp格式图片的第三方类库
webp-imageio
webp-imageio下载地址
webp-imageio在linux和在windows上使用方法稍微不一样:
windows:- 1.下载webp-imageio.jar和webp-imageio.dll
2.把webp-imageio.dll方到java的bin目录下;把webp-imageio.jar放入项目的w eb-info的lib下,并以maven本地方式引入到maven中
<dependency> <groupId>com.webpimageio</groupId> <artifactId>webpimageio</artifactId> <version>0.4.2</version> <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/webp-imageio.jar</systemPath> <scope>system</scope> </dependency>
3.在项目中使用ImageIO即可读写webp格式文件了(webp和jpg,png格式图片可 以互转)
File file1= new File("/home/geeklei/Desktop/640_tp.webp"); File file2= new File("/home/geeklei/Desktop/640a.png"); System.out.println(System.getProperty("java.library.path")); try { BufferedImage im = ImageIO.read(file1); ImageIO.write(im, "png", file2); } catch (IOException e) { e.printStackTrace(); }
linux下参考:http://blog.csdn.net/GeekLei/article/details/41147479
java VP8 decoder
VP8decoder下载地址
maven引入本地jar包:<dependency> <groupId>com.java.V8</groupId> <artifactId>V8decoder</artifactId> <version>0.2.0</version> <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/WebPViewer-0.2.jar</systemPath> <scope>system</scope> </dependency>
昨天用这个测试没有测试成功,报了异常; 待研究。
测试结果webp-imageio,VP8 decoder
使用webp-imageio,把jpg,png图片转化成webp格式图片后,肉眼观察显示效果并没有影响,惊喜的是图片的大小缩小为大概原来的1/6。
VP8decoder 有待研究。阿里云OSS支持webp格式
- 图片格式转换:
名称 描述 jpg 将原图保存成jpg格式,如果原图是png,webp, bmp存在透明通道,默认会把透明填充成黑色。如果想把透明填充成白色可以指定1wh参数 png 将原图保存成png格式 webp 将原图保存成webp格式 bmp 将原图保存成bmp格式 gif 将gif格式保存成gif格式,非gif格式是按原图格式保存。 src 按原图格式返回,如果原图是gif, 此时返回gif格式第一帧,保存成jpg格式,而非gif格式,如果我想保存成gif格式,必须增加1an参数 示例:将jpg转成webp格式
http://photosd.nggirl.com.cn/work/72695d9003d04f13adddff6902749def.jpg@.webp- 图片质量转换:
名称 描述 取值范围 q 决定图片的相对质量,对原图按照 q% 进行质量压缩。如果原图质量是 100%,使用 90q 会得到质量为 90% 的图片;如果原图质量是 80%,使用 90q 会得到质量72%的图片只能在原图是 jpg格式的图片上使用,才有相对压缩的概念。如果原图为 webp,那么相对质量就相当于绝对质量。 1-100 Q 决定图片的绝对质量,把原图质量压到Q%,如果原图质量小于指定数字,则不压缩。如果原图质量是100%,使用”90Q”会得到质量90%的图片;如果原图质量是95%,使用“90Q”还会得到质量90%的图片;如果原图质量是80%,使用“90Q”不会压缩,返回质量80%的原图。 只能在保存格式为jpg/webp效果上使用,其他格式无效果。 如果一个转换url里,同时指定了q和Q,按Q来处理 1-100 示例
将原图缩略成100w_100h,相对原图质量的80%的jpg图
http://image-demo.img-cn-hangzhou.aliyuncs.com/example.jpg@100w_100h_80q综合总结:
因为阿里云OSS支持webp格式,以及app原生也支持,综合以上结果,最终打算先测试的方案:app原生使用webp,H5使用阿里云OSS80Q(80q)质量压缩