注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

利用WebP图像格式降低网站流量压力  

2017-05-16 12:02:00|  分类: 服务器 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
网站不管是PC 还是移动端,众所周知,图片一直是流量大头,如何在保证图片的精细度不降低的前提下尽量缩小图片体积,就成为了一个有价值且值得探索的事情。之前的文章《利用jpegotim优化JPG图片提升网站访问速度》也是一种思路,但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致【大突破的可能性已经并不大】,而若还想降低图片流量占比,就必须要转换新思路,而 Google提供的WebP图像格式就给了我们一个新选择。
如果需要实际查看这个新图像格式的效果及压缩后文件大小效果,可以自行去智图网站https://zhitu.isux.us/去上传图片做测试。
利用WebP图像格式降低网站流量压力 - sinsunson - 天朝布衣田中码农参上
WebP,是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP比PNG文件少了45%的文件大小,即使这些 PNG 文件经过其他压缩工具优化之后,WebP还是可以减少28% 的文件大小。通过以上图片,可以看得出新图像格式确实在保持清晰度不变的情况下,文件大小有了极大的缩减。
科技博客Gig???aOM 曾报道:YouTube 的视频略缩图采用WebP 格式后,网页加载速度提升了10%;谷歌的Chrome 网上应用商店采用WebP 格式图片后,每天可以节省几TB的带宽,页面平均加载时间大约减少1/3;Google+移动应用采用WebP图片格式后,每天节省了 50TB 数据存储空间。
看了这些,是不是有些心动了,网上也是有现存的转换工具。智图【https://zhitu.isux.us/】有客户端,而iSparta【http://isparta.github.io/】也可以,此外,如XnView,IrfanView等看图软件都支持。
根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有50%以上的国内用户可以直接体验到WebP,如果网站以图片为主,或者产品基于Chromium 内核,建议体验尝试。假如打算在App中使用WebP,除了Android4.0 以上提供的原生支持外,其他版本以及iOS 都可以直接使用官方提供的解析库(Android 、iOS )。
对了,如果Linux下想要使用,可以前往官方主页:https://developers.google.com/speed/webp/
最后,还是要说一下,最好还是先做个浏览器兼容判断【js】,代码如下:

<script>
//参数'feature'可以任选'lossy', 'lossless', 'alpha','animation'其中之一
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
//支持
callback(result);
};
img.onerror = function () {
//不支持
callback(false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
//弹出提示窗显示支持与否

check_webp_feature('lossy', function(r){ alert(r);});
</script>

在chrome执行效果如下:
利用WebP图像格式降低网站流量压力 - sinsunson - 天朝布衣田中码农参上
在IE中执行效果如下:
利用WebP图像格式降低网站流量压力 - sinsunson - 天朝布衣田中码农参上
当然也可以直接在后台程序中判断【这里以php为例】:

<?php
//判断浏览器是否支持webp
$webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp');
define('IS_WEBP', $webp === false ? 0 : 1);
//为真是1,为假是0
echo IS_WEBP;
exit;
?>

如果确定浏览器并不支持WebP图像格式,就需要考虑输出jpg格式,这种时候就有两种选择。
1)服务器上同时存在jpg和webp两种格式【响应速度快,就是占用一部分服务器空间】。
a) 使用HTML5中的一个新标签<picture>,指定多个格式的资源,由浏览器选择自己支持的格式进行加载。

<picture class="picture">
<source type="image/webp" srcset="www.593668.com.webp">
<img class="image" src="www.593668.com.jpg">
</picture>

最简单的,但是不能作用于CSS中的图片(如背景),且CSS样式兼容性需要考虑。
b)利用JS先行来判断浏览器是否支持WebP格式,然后根据相应的结果来切换调用的图片。

<script>
//参数'useWebp'为真就将图片格式切换成webp
function showImage(useWebp){
var imgs = Array.from(document.querySelectorAll('img'));

imgs.forEach(function(i){
var src = i.attributes['data-src'].value;

if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}

i.src = src;
});
}
</script>

可以与已有的懒加载函数相结合。而且使用JS,还可以处理CSS中的图片(如背景图等)。
2)实时将webp转换成jpg【省服务器空间,但是对性能有影响】。
a)服务器端实时转换,这里就不多说了。
b)使用webp的解码器,实时解码WebP图片,地址是:http://www.etherdream.com/WebP/。下载好后,在<body> </body>之间插入如下代码,即可使用WebP了。

<script type="text/javascript" src="WebP.js"></script>
<!--这里放置了一个示范图片-->

<img src="0001.webp" width="600" />

大家可以根据具体情况来做相应变化。
 
 

  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017