webp怎么打开 webp怎么webp在线转换jpg成jpg

来源：蜘蛛抓取(WebSpider) 时间：2016-08-13 05:37 标签： webp转换jpg
上传时间：
webp文件怎么打开,webp文件转jpg教程
56官方微信
扫一扫发现精彩如何在移动端使用WebP图片格式
如何在移动端使用WebP图片格式
javascript
在移动端，图片一直是流量大头，一个简单的运营网页，图片大小动不动就以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 的图片格式转换工具，如智图（），iSparta（）等。
知道了webP图片格式，我们再来看以下两组数据：
webP支持情况：
安卓手机系统分布：
从上面的两组数据我们可以得到：
1： webP在安卓4.3以上浏览器中已经完全支持，其中4.0以上部分大部分支持（这组数据为展示，如有需要查询它的兼容性可以方位这个网站：/#search=webp）
2:安卓系统大于4.0占95.7%，大于等于4.3的占64.7%，从这可观的数据来说我们为什么不选择webP的格式来加载图片。
说道这里，可能有人开始要喷水了，为了图片极致加载，你放弃了部分用户，导致这部分用户连你的图片都无法显示，这个方式根本不行，我们需要的是在图片完全兼容的条件下，再选择最优图片格式。的确，我们不应该为了最优图片格式，而放弃图片兼容性，那么这个问题就需要我们给出一个解决方案。我们是不是可以通用用户的系统版本来选择使用哪种图片？这个回答是肯定的，我们完全可以通过判断用户的系统版本来选择加载那种类型的图片格式。
navigator.userAgent
JS的这个方法作为前端我们再熟悉不过了。Chrome浏览器在移动端调试环境下console中输入:
var userAgent = navigator.userA
alert(userAgent);
不同浏览器中，弹窗内容都不相同，其中内容数据所代表什么意思，这里不再做解释，如有不懂的可以访问这个地址，有很好的解释：；
如何使用webP图片
用户的版本我能已经获得了，那么什么情况下使用webP图片的格式，是不是也可以通过JS来判断呢。
这里随便code举个例子：
&img src="" alt="" data-url="11.jpg" data-original="11.webp"/&
&img src="" alt="" data-url="21.jpg" data-original="21.webp"/&
var userAgent = navigator.userA
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');
forImg('data-url');
function forImg(data){
for(var i=0;i&$img.i++){
$img[i].setAttribute('src',$img[i].getAttribute(data));
这段代码用于测试，如有想真正完美使用，还得自己去琢磨。
结果自己通过控制台去查看，可以选择控制台中的network来对比加载的时间。
我的热门文章
即使是一小步也想与你分享如何转换 WebP 图片格式
(快来投票)
Loading...
CloudConvert 能将 WebP 转换为各种图片格式，包括 bmp、eps、gif、ico、jpg、odd、pdf、png、ps、psd、svg、tiff、xcf。
CloudConvert 也支持将这些格式转换为 WebP，但不如另外一个工具方便。
将 jpg/png/gif 拖拽进入就可以转换了，转换后的 WebP 文件会在 IMG2WebP 上保存一天。
那么，你想好了转换到 WebP 格式干什么么？
兼容性是硬伤，除非IE、safari和火狐都跟进兼容，否则没人做网站会考虑的。
按分类查看文章:
大家都在讨论些什么
: 目前在用Alfred的剪贴板功能，希望可以得到一枚码体验一下这个工具: 留言 ，? 兑换码。很不错的应用，有机会试一试和Paste比比怎么样: 经常进行复制粘贴操作，有这个就方便多了。? 兑换码: 这不就是相当于QQ截图的增强版么？QQ当年为什么不申请个专利呢！！！！！！！！！！！！！！！！！！！！: 我估计windows 10、WinPhone版都没有！: ? 兑换码
简单实用: 看起来不错，? 兑换码
最热门标签
传说中的小众软件 让你的手机应用与众不同。
个人 blog 转载时请遵循 “署名-非商业性使用-相同方式共享” 的创作共用协议；
商业网站或未授权媒体不得复制本站内容。

我要回帖

更多关于 webp转换jpg 的文章

 

随机推荐