您当前位于：HTML5新技术 ——> 网页图片新格式，WEBP格式图片讲解

网页图片新格式，WEBP格式图片讲解

2016/07/30 11:10:28 | 作者：HTML5学堂（码匠） | 分类：HTML5新技术 | 关键词：WEBP,图片格式,网页图片

WEBP格式的图片

HTML5学堂：谷歌于2010年推出的新一代图片格式 —— WEBP，随着移动互联网的发展，WEBP格式在2015年逐渐的开始被大公司部分采用。本文主要除了比较WEBP与JPG等传统格式的图片之外，还介绍了如何转换WEBP格式图片以及具体开发时的用法。

使用WEBP图片的目的

保证图片质量的前提下缩小图片体积。JPEG、PNG以及GIF这些格式的图片已经没有太大的优化空间。但是，WebP图片格式给图片优化提供了另一种可能

图片压缩

无损压缩的图片格式

TIFF；GIF；RAW；PCX；TAG；PNG；BMP

有损压缩格式

JPEG；JPG；WMF

WEBP图片对压缩的支持

WebP是一种支持有损压缩和无损压缩的图片文件格式（也支持alpha通道，动画演示），根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

WEBP的兼容情况

谷歌、欧朋、移动端的谷歌内核浏览器（移动端苹果不支持）

WEBP兼容情况 - HTML5学堂

WEBP与JPG的比较

WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍

通过同样质量的WebP与JPG图片加载的速度进行测试。测试的JPG和WebP图片大小如下：

WEBP与JPG的比较 - HTML5学堂

WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了。所以，使用WebP基本没有技术阻碍，还能带来性能提升以及带宽节省。

JPG与WEBP加载时间 - HTML5学堂

如何转换WEBP格式的图片

iSparta软件

下载地址：http://isparta.github.io/index.html

iSparta软件界面效果图 - HTML5学堂

在线生成：

智图：http://zhitu.isux.us/

如何实现全浏览器兼容

此处的兼容，指的是让高级浏览器加载WEBP格式的图片，而不支持WEBP的浏览器加载原格式图片。

方案1：引入flash

引入成本太高而且转为flash之后图片不能再操作，缺少灵活性，同时又会占用过多的CPU。

方案2：同时提供两套图片

1. 具体实现方法 - 服务器端：

服务端方式服务端就只能通过UA信息来判断。针对不同浏览器提供不同文件。（https://github.com/igrigorik/webp-detect）

2. 具体实现方法 - JS前端：

检测WEBP的支持程度

JavaScript检测是否支持WebP代码如下：

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(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}

在浏览器向服务器发起请求时，对于支持WebP图片的浏览器，会在请求头Accept中带上image/webp的信息，服务器便能识别到浏览器是否支持WebP，在服务器中处理图片。

使用前端实现WEP的案例

考虑到不少开发人员没有后台操作权限，因此利利在此利用JS，书写了一个模拟性案例。原理和后台比较相似：提供好两种图片，之后检测浏览器是否支持WEP，如果支持则加载WEP格式的图片，如果不支持则加载原格式图片。

具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
</head>
<body>
<div class="wrap">
<img src="" webpsrc="images/1.webp" normalsrc="images/1.jpg" alt="" title="">
<img src="" webpsrc="images/2.webp" normalsrc="images/2.jpg" alt="" title="">
</div>
<script>
function check_webp_feature(feature, callback) {
var kTestImages = {
// 有损 - lossy；无损 - lossless
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(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
var imgs = document.getElementsByTagName('img');
check_webp_feature('lossy', function(feature, result){
if (result) {
console.log('支持' + feature + '的压缩方式');
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute('src', imgs[i].getAttribute('webpsrc'));
};
} else {
console.log('不支持' + feature + '的压缩方式');
for (var i = 0; i < imgs.length; i++) {
imgs[i].setAttribute('src', imgs[i].getAttribute('normalsrc'));
};
}
})
</script>
</body>
</html>