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

前言

在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以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 和国内公司如腾讯、淘宝、美团等也早已尝