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

 
         优化网站性能,提升用户体验,最重要的一点是加速页面渲染的速度,当带宽一定时,需要加载的数据流量(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(不支持)
       
posted @   南巷清风--大R  阅读(148)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示