扒一扒“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与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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

Atom + activate-power-mode震屏插件Windows7下安装

Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效...

1242
来自专栏架构师之路

Google-优秀移动站点设计10招

Google-优秀移动网站设计10招 1)添加一个醒目的搜索条:在移动终端上,人们希望能够快速找到自己需要的东西 2)把大表格拆分成小块:别搞一个长长的表格页面...

2773
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (12)---交互式报表之贯穿钻取

在葡萄城ActiveReports报表中提供强大的数据分析能力,您可以通过图表、表格、图片、列表、波形图等控件来实现数据的贯穿钻取,在一级报表中可以通过鼠标点击...

2346
来自专栏Java3y

浅谈CDN、SEO、XSS、CSRF

CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN。 CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时...

4105
来自专栏快乐八哥

Single Page Application概览

第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加...

1797
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第七节)

3569
来自专栏HTML5学堂

传统企业站开发 - 模块开发(二)

上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这边继续给大家举一个例子来进行讲解。那今天我们为大家...

2849
来自专栏Jerry的SAP技术分享

给谷歌输入法增添自定义词组,提高输入效率

我在写微信公众号文章时,经常需要重复输入一些名词,比如CRM,C4C,S/4HANA等等。为了减少输入,我在查找一款输入法,能够让我通过少量的输入,就能够快速打...

951
来自专栏FreeBuf

偏执的iOS逆向研究员:收集全版本的macOS iOS+越狱+内核调试

Intro 虽然“只有偏执狂才能够生存”这句话已经被假药停给毁了,但是作为一只有逼格的高大上的iOS逆向分析研究员,难道如果有现成的macOS/iOS全版本镜像...

3887
来自专栏腾讯大讲堂的专栏

注意!让你无法拒绝的新版公众平台文章编辑器来啦!

运营微信公众号的小伙伴登陆微信公众平台后,以为进错了后台! ↓↓↓ ? 右下角的编辑器竟然居中了! (处女座开心哭了) 原来是微信公众平台新版正式上线了!对此,...

2519

扫码关注云+社区