单页面应用优化之路一移动端图片处理

 

         优化网站性能，提升用户体验，最重要的一点是加速页面渲染的速度，当带宽一定时，需要加载的数据流量（payload）越少，网站

展现速度越快，这就对前端提出了降低流量的强烈需求，而我们众所周知，图片一直是网站中的流量大户，一张图片动辄几百上千K，简

直是网站的天敌，那么有没有什么办法在保证图片不失真的前提下减少图片的大小呢，答案是，有

        今天介绍一个更小的图片格式WebP，WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大

约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。
        
        那么使用webP有哪些问题呢，问题1.原始图片如何转化为webP格式？问题2.浏览器兼容性问题，很明确的说部分浏览器和ios不支持

该格式。
 
        问题1，我们使用阿里云图片服务，oss + cdn ，上传任意图片都可以通过url参数方式转化图片格式

        第一步，原图片图片展示

        通过img - src方式访问获取该图片
http://example.aliyuncs.com/example.jpg



        第二步，按需修改图片质量及图片大小，减少传输流量（尤其是移动端）,这一步对流量的节约是惊人的，但是这一步与实际需求和用户体验相关，并不是每次都能有这样的效果，而下一步是必然
http://example.aliyuncs.com/example.jpg?x-oss-process=image/quality,q_70/resize,w_150

    第三步，webP格式展示，这一步同样惊人，不要看只节约了近0,9kb流量，但压缩的比例是惊人的，压缩了近1/3
http://example.aliyuncs.com/example.jpg?x-oss-process=image/quality,q_70/resize,w_150/format,webp

        问题2，判断浏览器是否支持webp格式，若不支持再降级处理至第二步，那么关键是如何判断浏览器是否支持webP呢

        H5中新增了 画布 canvas标签  ，HTMLCanvasElement.toDataURL()，toDataURL(type, encoderOptions)方法如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的，反之就是支持

        上代码 ：document.createElement('canvas').toDataURL('image/webp')
       该方法返回data:image/webp;base64,xxxxxxxxxx(支持)
       该方法返回data:image/png;base64,xxxxxxxxxx(不支持)