在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以MB为单位，为了加快网页呈现的速度，我们必须使用最适合图片质量，这里所说的合适指图片的清晰度和大小达到合格的要求。 前端常常会碰到这种情况，一个网页都是图片，需要你压缩图片适合的分辨率，分辨率低了容易失真用户体验不好，高了图片质量太大导致加载慢，所以经常会找一个合适的临界点来选择图片的分辨率。我们选择了这个分辨率来作为合适临界点，却发现图片依然很大，希望它可以再小些，给用户更快的呈现速度。对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。

什么是webP?

WebP（发音 weppy），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。相比JPEG文件“在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。2010 年发布的 WebP 已经不算是新鲜事物了，在Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用，如腾讯新闻客户端、腾讯网、QQ空间等，同时也有一些针对 WebP 的图片格式转换工具，如智图（ http://zhitu.tencent.com ），iSparta（ http://isparta.github.io/ ）等。

知道了webP图片格式，我们再来看以下两组数据：

webP支持情况：

安卓手机系统分布：

从上面的两组数据我们可以得到：

  1： webP在安卓4.3以上浏览器中已经完全支持，其中4.0以上部分大部分支持（这组数据为展示，如有需要查询它的兼容性可以方位这个网站：http://caniuse.com/#search=webp）
  2:安卓系统大于4.0占95.7%，大于等于4.3的占64.7%，从这可观的数据来说我们为什么不选择webP的格式来加载图片。
说道这里，可能有人开始要喷水了，为了图片极致加载，你放弃了部分用户，导致这部分用户连你的图片都无法显示，这个方式根本不行，我们需要的是在图片完全兼容的条件下，再选择最优图片格式。的确，我们不应该为了最优图片格式，而放弃图片兼容性，那么这个问题就需要我们给出一个解决方案。我们是不是可以通用用户的系统版本来选择使用哪种图片？这个回答是肯定的，我们完全可以通过判断用户的系统版本来选择加载那种类型的图片格式。
 
 
navigator.userAgent
 
JS的这个方法作为前端我们再熟悉不过了。Chrome浏览器在移动端调试环境下console中输入:
 
    var userAgent = navigator.userAgent;
    alert(userAgent);
 
不同浏览器中，弹窗内容都不相同，其中内容数据所代表什么意思，这里不再做解释，如有不懂的可以访问这个地址，有很好的解释：http://www.jb51.net/article/48532.htm；
 
 
如何使用webP图片
 
用户的版本我能已经获得了，那么什么情况下使用webP图片的格式，是不是也可以通过JS来判断呢。 
 这里随便code举个例子：
 
html:
 
     <img src="" alt="" data-url="11.jpg" data-original="11.webp"/>
     <img src="" alt="" data-url="21.jpg" data-original="21.webp"/>
</body>

    var userAgent = navigator.userAgent;
    var Android = userAgent.indexOf("Android");
    var AppleWebKit=userAgent.indexOf('AppleWebKit');
    var androidVersion = parseFloat(userAgent.slice(Android+8));
    var $img=document.getElementsByTagName('img');
    window.onload= function () {
        if(Android >= 0 && AppleWebKit>=0&&androidVersion>=4){
            forImg('data-original');
        }else{
            forImg('data-url');
    function forImg(data){
        for(var i=0;i<$img.length;i++){
            $img[i].setAttribute('src',$img[i].getAttribute(data));
这段代码用于测试，如有想真正完美使用，还得自己去琢磨。
 
结果自己通过控制台去查看，可以选择控制台中的network来对比加载的时间。
                    前言在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以MB为单位，为了加快网页呈现的速度，我们必须使用最适合图片质量，这里所说的合适指图片的清晰度和大小达到合格的要求。 前端常常会碰到这种情况，一个网页都是图片，需要你压缩图片适合的分辨率，分辨率低了容易失真用户体验不好，高了图片质量太大导致加载慢，所以经常会找一个合适的临界点来选择图片的分辨率。我们选择了这个分辨率来作为合适临界
				
WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。
XnConvert可以将Jpg图片与WebP格式图片互转，当然还可以转很多种图片格式。
绿色版，无需安装，直接打开使用。
				
webp格式图片
webp格式图片是google推出的，相比jpg png有着巨大的优势，同样质量的图片webp格式的图片占用空间更小，在像电商这样图片比较多的App中，使用webp格式图片会很有优势。
很早之前，我们的项目中就已经采用了webp格式，但是由于webView本身并不能解析webp格式，所以我们基于webView的文章详情页就无法使用到这项优化。 
那么有没有什么办法能实现呢？当然是有的。
在开始技术讲解之前需要先说明，本文的技术方案，是基于本项目的情况：文章的正文大部分通过接口直接获取到，通过在客户端本地进行html正文组装，最后通过webView的loadHTMLSt
1、选中需要转换的图片，右击，在弹出菜单下边会有一个“Convert to WebP”的选项，如下图：
2、点击后，会弹出“Converting Images to WebP”的菜单项，可选有损压缩或无损压缩，如下图所示
​		.9图及带有透明背景的图片
    //最好找到后台工程师让他修改一下（企业开发正常的操作）
    //临时自己改，要确保存在1.webp => 1.jpg
    // goods_introduce: goodsObj.goods_introduce,
    goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g,'.jpg'),
<div class=\"lazyimg\"><d...
				
你可以使用nodejs的sharp库来批量将png图片转换为webp图片。首先，你需要安装sharp库，然后使用以下代码：
const sharp = require('sharp');
const fs = require('fs');
const inputDir = './input';
const outputDir = './output';
fs.readdir(inputDir, (err, files) => {
  if (err) throw err;
  files.forEach(file => {
    if (file.endsWith('.png')) {
      const inputPath = `${inputDir}/${file}`;
      const outputPath = `${outputDir}/${file.replace('.png', '.webp')}`;
      sharp(inputPath)
        .webp()
        .toFile(outputPath, (err, info) => {
          if (err) throw err;
          console.log(`${inputPath} converted to ${outputPath}`);
这段代码会读取input文件夹中所有的png图片，将它们转换为webp图片，并保存到output文件夹中。你只需要将input文件夹中的png图片替换为你自己的图片，然后运行这段代码即可。