HTML5学堂-码匠 HTML5学堂

您当前位于:PhotoShop技术学习 ——> 网页图片新格式,WEBP格式图片讲解

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

2016/07/30 11:10:28 | 作者:HTML5学堂(码匠) | 分类:PhotoShop技术学习 | 关键词: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代码如下:

  1. function check_webp_feature(feature, callback) {
  2.     var kTestImages = {
  3.         lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
  4.         lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
  5.         alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
  6.         animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  7.     };
  8.     var img = new Image();
  9.     img.onload = function () {
  10.         var result = (img.width > 0) && (img.height > 0);
  11.         callback(feature, result);
  12.     };
  13.     img.onerror = function () {
  14.         callback(feature, false);
  15.     };
  16.     img.src = "data:image/webp;base64," + kTestImages[feature];
  17. }

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

使用前端实现WEP的案例

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

具体代码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <meta name="viewport" content="width=device-width,user-scalable=no">
  7. </head>
  8. <body>
  9.     <div class="wrap">
  10.         <img src="" webpsrc="images/1.webp" normalsrc="images/1.jpg" alt="" title="">
  11.         <img src="" webpsrc="images/2.webp" normalsrc="images/2.jpg" alt="" title="">
  12.     </div>
  13.     <script>
  14.         function check_webp_feature(feature, callback) {
  15.             var kTestImages = {
  16.                 // 有损 - lossy; 无损 - lossless
  17.                 lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
  18.                 lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
  19.                 alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
  20.                 animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
  21.             };
  22.             var img = new Image();
  23.             img.onload = function () {
  24.                 var result = (img.width > 0) && (img.height > 0);
  25.                  callback(feature, result);
  26.             };
  27.             img.onerror = function () {
  28.                 callback(feature, false);
  29.             };
  30.             img.src = "data:image/webp;base64," + kTestImages[feature];
  31.         }
  32.         var imgs = document.getElementsByTagName('img');
  33.         check_webp_feature('lossy', function(feature, result){
  34.             if (result) {
  35.                 console.log('支持' + feature + '的压缩方式');
  36.                 for (var i = 0; i < imgs.length; i++) {
  37.                     imgs[i].setAttribute('src', imgs[i].getAttribute('webpsrc'));
  38.                 };
  39.  
  40.             } else {
  41.                 console.log('不支持' + feature + '的压缩方式');
  42.                 for (var i = 0; i < imgs.length; i++) {
  43.                     imgs[i].setAttribute('src', imgs[i].getAttribute('normalsrc'));
  44.                 };
  45.             }
  46.         })
  47.  
  48.     </script>
  49. </body>
  50. </html>

支持WEBP格式的谷歌浏览器,加载webp格式的两张图片

谷歌加载效果图 - HTML5学堂

不支持WEBP格式的火狐浏览器,加载的是jpg格式的两张图片

火狐加载效果图 - HTML5学堂

大面积应用WEBP存在的问题(目前实际使用最大的痛点)

1. 服务器存储空间,我们不能抛弃原有格式,那么存储的数据量将会增加60%

2. 如果请求时再转换,由于目前转码的效率太低,特别的大文件的PNG速度很慢

WEBP应用场景推荐

在网络上查阅资料时,看到的WEBP应用场景推荐(即无需考虑兼容的场景)

1. 客户端软件,内嵌了基于Chromium(chrome浏览器背后的引擎)的webview,这类浏览器中应用的网页是可以完全使用webp格式,提升加载渲染速度,不考虑兼容。

2. 用node-webkit开发的程序,用webp可以减少文件包的体积。(开发桌面+WEB混合型应用)

3. 移动应用或移动端网页游戏,界面需要大量图片,可以嵌入webp的解码包,能够节省用户流量,提升访问速度

HTML5小编-利利 耗时10h

欢迎沟通交流~HTML5学堂

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS