码迷,mamicode.com
首页 > Web开发 > 详细

webp图片优化

时间:2015-07-05 19:55:44      阅读:915      评论:0      收藏:0      [点我收藏+]

标签:

  根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库(Android 、iOS )。

  webp图片解决方案

1、若使用场景是浏览器,可以:
  • JavaScript 能力检测,对支持 WebP 的用户输出 WebP 图片
  • 使用 WebP 支持插件:WebPJS
2、若使用场景是 App,可以:
  • Android 4.0 以下 WebP 解析库(链接
  • iOS WebP 解析库(链接
3、转换工具:

  

  全兼容的解决方法引用webpjs插件

  我们需要下载webpjs-0.0.2.min.jswebpjs-0.0.2.swf,来解决webp图片在不兼容的浏览器通过flash解决:

//我们可以在网页任何地方放这段代码
<script type="text/javascript" src="js/webpjs-0.0.2.min.js"></script>

  在不兼容的页面我们可以这样:

<script>(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;})();</script>

  有一点要注意的是,我们做引用webpjs插件要在服务器端才能测试出来。

  

webp图片优化

标签:

原文地址:http://www.cnblogs.com/pingfan1990/p/4622822.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!