如何在移动端使用WebP图片格式

清疚 2022-08-21 02:29 820阅读 0赞

> **前言**

在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以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][http_zhitu.tencent.com]），iSparta（[http://isparta.github.io/][http_isparta.github.io]）等。

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

> **webP支持情况：**

![这里写图片描述][20160312014155483]

> **安卓手机系统分布：**

![这里写图片描述][20160312014216123]

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

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][http_www.jb51.net_article_48532.htm]；

> **如何使用webP图片**

用户的版本我能已经获得了，那么什么情况下使用webP图片的格式，是不是也可以通过JS来判断呢。  
这里随便code举个例子：

html:

js：

这段代码用于测试，如有想真正完美使用，还得自己去琢磨。

结果自己通过控制台去查看，可以选择控制台中的network来对比加载的时间。

[http_zhitu.tencent.com]: http://zhitu.tencent.com
[http_isparta.github.io]: http://isparta.github.io/
[20160312014155483]: /images/20220731/0603a65964a94a73a52236c705e944bd.png
[20160312014216123]: /images/20220731/0aa7d8ce6c36470682e0f5bc94e83425.png
[http_www.jb51.net_article_48532.htm]: http://www.jb51.net/article/48532.htm