扒一扒“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与JPG的比较
WebP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍
通过同样质量的WebP与JPG图片加载的速度进行测试。测试的JPG和WebP图片大小如下:
WebP虽然会增加额外的解码时间,但由于减少了文件体积,缩短了加载的时间,页面的渲染速度加快了。同时,随着图片数量的增多,WebP页面加载的速度相对JPG页面增快了。所以,使用WebP基本没有技术阻碍,还能带来性能提升以及带宽节省。
如何转换WEBP格式的图片
iSparta软件
下载地址:http://isparta.github.io/index.html
在线生成:
智图: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>
支持WEBP格式的谷歌浏览器,加载webp格式的两张图片
不支持WEBP格式的火狐浏览器,加载的是jpg格式的两张图片
大面积应用WEBP存在的问题(目前实际使用最大的痛点)
1. 服务器存储空间,我们不能抛弃原有格式,那么存储的数据量将会增加60%
2. 如果请求时再转换,由于目前转码的效率太低,特别的大文件的PNG速度很慢
WEBP应用场景推荐
在网络上查阅资料时,看到的WEBP应用场景推荐(即无需考虑兼容的场景)
1. 客户端软件,内嵌了基于Chromium(chrome浏览器背后的引擎)的webview,这类浏览器中应用的网页是可以完全使用webp格式,提升加载渲染速度,不考虑兼容。
2. 用node-webkit开发的程序,用webp可以减少文件包的体积。(开发桌面+WEB混合型应用)
3. 移动应用或移动端网页游戏,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量,提升访问速度
HTML5小编-利利 耗时10h
- 全球电脑手机无一幸免,英特尔CPU“漏洞事件”到底多严重?
- 评估Keras深度学习模型的性能
- Python机器学习的练习二:多元线性回归
- 熔断器 Hystrix 源码解析 —— 命令合并执行
- Python机器学习的练习一:简单线性回归
- Dubbo源码解析 —— zookeeper连接
- 浣熊检测器实例, 如何用TensorFlow的Object Detector API来训练你的物体检测器
- 用Keras进行深度学习模式的正则化方法:Dropout
- 用深度学习硬件的闲置时间,来挖比特币
- 深度学习:如何理解tensorflow文本蕴含的原理
- 重磅!腾讯与科大讯飞技术共创,Google ProtoBuf进入TARS家族!
- 深度学习与R语言
- 在Keras中展示深度学习模式的训练历史记录
- 分析漏洞利用工具包 Archie和Astrum工具包
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- keras做CNN的训练误差loss的下降操作
- Python基于yaml文件配置logging日志过程解析
- Python ckeditor富文本编辑器代码实例解析
- PHP自定义错误处理的方法分析
- PHP聊天室简单实现方法详解
- phpStorm+XDebug+chrome 配置详解
- PHP面向对象程序设计之多态性的应用示例
- PHP设计模式之单例模式定义与用法分析
- PHP面向对象程序设计之接口的继承定义与用法详解
- PHP简单验证码功能机制实例详解
- php高清晰度无损图片压缩功能的实现代码
- Python自省及反射原理实例详解
- 浅谈django框架集成swagger以及自定义参数问题
- keras CNN卷积核可视化,热度图教程
- 解决tensorflow读取本地MNITS_data失败的原因