如何在移动端使用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 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 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:

<body><img src="" alt="" data-url="11.jpg" data-original="11.webp"/><img src="" alt="" data-url="21.jpg" data-original="21.webp"/>
</body>

js：

    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来对比加载的时间。

如何在移动端使用WebP图片格式相关推荐

WebP图片格式处理和兼容使用
WebP图片格式处理和兼容使用用了这么久的WebP图片,最近在项目中发现对其了解得还是很不够,便以此文整理记录WebP相关知识点. (github:https://github.com/Michea ...
关于webp图片格式初探
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
如何让Ubuntu系统支持WebP图片格式
如何让Ubuntu系统支持WebP图片格式本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...
【Android 安装包优化】WebP 图片格式性能测试 ( 测试 WebP 图片解码速度 | 测试 WebP 图片编码速度 )
文章目录一.测试 WebP 图片解码速度二.测试 WebP 图片编码速度三.参考资料测试结果 : WebP 格式图片 , 解码快 , 编码慢 , 占用空间小 ; 在解码速度上 , WebP 格 ...
【Android 安装包优化】WebP 图片格式兼容与性能 ( Android 中的 WebP 图片格式兼容问题 | Android 中的 WebP 图片格式性能 )
文章目录一.Android 中的 WebP 图片格式兼容问题二.Android 中的 WebP 图片格式性能三.参考资料一.Android 中的 WebP 图片格式兼容问题在 Android ...
【Android 安装包优化】WebP 图片转换 ( 使用 iSparta 转换 WebP 图片格式 | Google 提供的 libwebp 库 )
文章目录一.使用 iSparta 转换 WebP 图片格式二.Google 提供的 libwebp 库三.参考资料一.使用 iSparta 转换 WebP 图片格式 isparta 工具已经停 ...
DPG图片压缩技术和webp图片格式
DPG图片压缩技术和webp图片格式一.DPG图片压缩技术京东自主研发推出的DPG图片压缩技术,经测试该技术,可以直接节省用户近50%的浏览量,极大地提升了用户的网页打开的速度.能够兼容JPEG, ...
使用Google WebP图片格式帮助控制网站页面大小
日期:2013-3-16 来源:GBin1.com 不管你相信或者不相信,随着互联网的快速发展网页也在持续不断的变大. 使网页迅速膨胀的罪魁祸首不是大量使用的JavaScript库,CSS和无尽的 ...
什么是WebP图片格式？如何在线把Webp格式转换为JPEG格式？
我们有时候从互联网上下载图片会发现图片是WebP格式而不是常见的JPEG或者是PNG格式,用自带的图片处理软件无法打开,那么什么是WebP格式呢?我们该如何打开WebP格式的图片文件?需要进行图片处理 ...

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

如何在移动端使用WebP图片格式相关推荐

最新文章

热门文章