之前处理图片的方式是,小图标通过gulp配置的spritesmith雪碧图方式,.png会先用ps工具转成.jpg,然后jpg太大则用在线压缩工具来进行压缩(另外gulp系列的gulp-imagemin也用作压缩图片)。

     今天看到了一个新的方式,图片为webp格式。以前也有见过但从来没用过这种格式,搜了一下,相信文档说的能大大减少带宽。

什么是WebP格式的图片?

WebP是Google在2010年发布的一种新型图片格式,支持无损和有损压缩。在无损压缩方面,同质量的WebP图片比PNG的体积小26%,而在有损压缩方面,同质量的WebP图片比JPEG小25-34%。WebP在不降低图片质量的同时,减少了约三分之一的体积。

    以下介绍WebP安装使用   

安装  (用于处理图片)     对应插件安装教程blog

    智图API接口已被封装为gulp插件,智图for gulp 。 照github上的教程安装该插件使用

使用
     WebP使用方式  (方案中包含PC、触屏、ios、安卓各版以及兼容版 方案)