WebP About Me 1.  老黄、LV、驴哥、小悠 2.  码农(8年。Html、Css、Js、NodeJs、C#、Java、Swift...) 3.  @腾讯互娱/TGIdeas创意设计中心 4.   & faso.me github.com/mamboer Agenda 1.  2.  3.  4.  5.  是什么? 谁在用? 兼容性? 用还是不用? 怎么用? 是什么? 一种新的图片格式 2011年 Google 无损压缩(同质PNG,尺寸小25%) 有损压缩(同质JPG,尺寸小25~34%) 更吊的图像编码技术 Fancy采样算法 区域智能压缩 预测编码技术 谁在用? Chrome Webstore 全站应用webp QZone 部分应用:大背景、动态里面的照片 淘宝&天猫 部分应用:列表页 兼容性? IE Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android 8 9 10 11 30 31 32 33 34 27 31 33 34 35 36 37 38 39 40 5.1 6.1 7 8 23 24 25 6.1 7.1 8 7 2.3 4 4.1 4.3 4.4 4.4.3 36 各主流浏览器实际支持情况 OS\BROWSER UC浏览器 (9.0+) QQ浏览器 (5.0+) Chrome浏览器 (36.0+) Android内置浏览器 (4.0+) 微信内置 webview QQ内置 webview IOS 否 否 是 N/A 否 否 Android 是 是 是 是 否 否 兼容性结论 从设备\操作系统\浏览器的角度看,兼容性达50% 那么问题来了 到底用还是不用? 这是一个没有标准答案的问题 但,有一些数据和建议可以参考 国内桌面浏览器上一季度市场份额 Chrome浏览器49%+,对webp兼容良好 国内移动端浏览器上一季度市场份额 UC浏览器+Chrome浏览器市场份额接近70%,对webp兼容良好 腾讯某游戏官网上个月 - 操作系统市场份额 Android系统的访问量超过70% 结论和建议 1.  如果用webp,大约50%用户受益,当然另外50%用户需要兼顾处理 2.  如果图片大小占据页面大小一半或以上,【建议用!】 3.  客户端软件,内嵌了基于Chromium的webview,【必须用!】 4.  客户端软件,如果使用node­webkit开发,【必须用!】 那么问题又来了 如何兼顾不支持webp的浏览器? 按需加载,优雅降级                          (function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){ if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true; var s=document.getElementsByTagName('script')[0];sc.src='js/webpjs‐0.0.2.min.js';s.parentNode.insertBefore(sc,s);}}; WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'                          WebPJS的优缺点 借助flash让所有浏览器兼容webp 只需要一套webp图片 需要引入额外的2个文件,共计100+KB... 利用flash在客户端进行解码,渲染性能有点慢 WebPJS是不是银弹,客官自行判断 小结 webp的优点和应用情况 webp的兼容性 如何在网页中按需加载webp图片 如何让所有浏览器兼容webp ­ WebPJS 结束了 么? 聊聊webp的性能 有人说 1.  编码(Encode)速度比JPG慢大约10倍 2.  解码(Decode)速度比JPG慢大约1.4倍 数据参考自:Faster, smaller and more beautiful web with WebP 解码慢1.4倍,对页面渲染影响大不大? 我们来做一个对比测试 页面1(59张 JPG): 页面2(59张WEBP): faso.me/lazypic/jpg.html faso.me/lazypic/webp.html 测试环境:webpagetest.org, android4.4, 3G网速 尺寸对比(WEBP比JPG小45%+) 渲染速度(WEBP胜) 说明什么问题? 尽管webp解码速度比JPG慢1.4陪,但实际渲染速度不慢 One more thing 3个小工具 1. grunt-webp 一个将普通图片转换成webp图片的nodejs包 一个命令                          grunt webp                          蜀黍 有没有GUI工具啊 2. 智图(zhitu) 来自 的图片优化平台:腾讯ISUX前端团队 zhitu.tencent.com 薯薯 有没有按需加载webp图片滴JS组件啊 3. LazyPic.JS 一个支持webp图片的延迟加载组件 半行代码                          new LazyPic();                          Star 1 欢迎参与试用与交流 THE END BY LV / Faso.me 参考资料 “WebPJS ­ Google's new image format WebP for not supported browsers (with alpha­channel)” “Script to feature detect if browser support WebP.” “grunt­webp” “LazyPic.JS” “智图(zhitu)” “ ”渲染速度对比测试(webpagetest.org) “ ”渲染速度对比测试­手机端(webpagetest.org)
还剩54页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

weblol

贡献于2015-05-20

下载需要 5 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf