webp图片优化

　　根据对目前国内浏览器占比与 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、转换工具：

• 智图
• iSparta

　　

　　网页使用

　　1. 按需加载，优雅降级

　　利用 JS 判断浏览器是否支持，不支持的浏览器显示普通图片。 

<img src="init.png" data-src="img.png" data-webp="img.webp">

var img = new Image();
img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"; // WebP base64 格式图片
img.onload = img.onerror = function() {
    var image = document.getElementsByTagName('img');
    for (var i = 0;i<image.length;i++) {
        if(img.width > 0 && img.height > 0){
            // 支持 WebP
            image[i].src = image[i].getAttribute('data-webp');
        }
        else {
            // 不支持 WebP
            image[i].src = image[i].getAttribute('data-src');
        }
    }
};

　　2. 使用 Flash 兼容所有浏览器

　　webpjs-0.0.2.min.js + webpjs-0.0.2.swf

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

　　我们需要下载webpjs-0.0.2.min.js和webpjs-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插件要在服务器端才能测试出来。