文档章节

图片格式WebP在微信中的尝试

刘少
 刘少
发布于 2018/03/19 22:56
字数 1264
阅读 2537
收藏 1

WebP格式,谷歌google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

但WebP是一种有损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。

--百度百科

图片格式的选择

笔者在做H5制作平台,90%以上的流量来自于微信,日PV1亿-2.5亿之间,H5动画有大量JPG/ PNG/GIF图片,如果能将图片进行压缩,将节省很大一部分CDN费用。

笔者的图片资源主要集中在JPEG,PNG, GIF。经过测试,部分Android版本微信版本已经开始支持WebP,难道X5内核是基于Chrome?而IOS版本微信不支持WebP。85%的流量来自于Android 微信。节省图片流量大有可行!!!

经过研究发现微信公众号文章的图片也是自动转为webp格式,看来图片流量也是微信的大头。

兼容性网站可以参考: https://caniuse.com/#search=webp

判断浏览器是否支持WebP有以下方法

  • 通过User-Agent来判断UA是否包含Chrome特定版本(Chrome 23开始支持WebP),来判断是否支持WebP,不严谨。
  • 基于Http内容协商机制判断, 可以判断request header的Accept字段是否包含image/webp,进行相应的内容返回,例如返回webp格式的图片地址,这样可以大大节省cdn流量,但是这样需要CDN服务器或图片源服务器支持。

  •  如果服务器端不允许,可以在js里做文章进行webp的判断。

function checkWebp() {

        try{ 

return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
            }catch(err) {
                return false;
            }
        }

 这种方法无法兼容动态webp(gif 可以转为动态webp)。对比下图参见

来源于: https://isparta.github.io/compare-webp/index_a.html

gif/webp对比

Gif Webp对比

GIF webp 使用chrome浏览器

GIF 原图 大小:869k

Animated WebP 大小:371k

请使用chrome浏览器查看

GIF 原图大小:89.4k

Animated WebP 大小:4.65k

从(谷歌网站)找到了判断WebP的方法:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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(有损,无损,alpha通道,动态)生成一个很小像素的图片,在浏览器中渲染,如果没有问题,就代表支持webp。

 

CDN厂商的支持

笔者所在公司使用的是七牛云存储,本身支持到webp的转换,七牛云存储文档(https://developer.qiniu.com/dora/manual/1270/the-advanced-treatment-of-images-imagemogr2)中说webp不支持动图,不过经过笔者测试,七牛是支持webp动图的

在图片资源后面添加参数: ?imageMogr2/format/webp,如果已经有参数可以使用管道符号(|),例如

?imageMogr2/thumbnail/200x200>/strip|imageMogr2/format/webp 来支持webp有损格式。

如果使用又拍云,可以参考https://www.upyun.com/webp,又拍云可以开启基于协商机制自动图片转为webp。例如: https://p.upyun.com/demo/tmp/D9rVpVLq.webp,

当然阿里云也是支持WebP直接转换的。

 

上线后经过流量对比,平均带宽节省36%,效果非常好,基本每天节省1万块。

自建图片服务器的WebP化

一般做法是在接入层(nginx)进行一次转换,缓存到服务器,可以使用nginx+lua+ imagemagick进行,可以参考

https://gitee.com/yanue/nginx-lua-GraphicsMagick,不过这种方式是调用gm的命令,可以考虑lua ffi版本的GraphicsMagick

本地测试可以使用imagemagic 或者google 官方cwebp(https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html)

 

WebP优缺点

相对于gif

  • 支持有损和无损压缩,并且可以合并有损和无损图片帧
  • 体积更小,GIF 转成有损 Animated WebP 后可以减小 64% 的体积,转成无损可以节省 19% 的体积
  • 颜色更丰富,支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道(而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明)
  • 添加了关键帧、metadata 等数据

缺点:

  • 有损WebP 转码比GIF多2.2倍时间,无损WebP比GIF大1.5倍时间 
  • WebP没有GIF使用广泛。

腾讯可能会在qq浏览器中使用TPG格式,那时候可以使用TPG了,第三方cdn不知道能否跟进

 

转载请注明出处:https://my.oschina.net/osgit/blog/1647510

请作者喝咖啡:

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
刘少
粉丝 13
博文 31
码字总数 12465
作品 0
海淀
程序员
私信 提问
Mozilla 将在 Firefox 65 中添加对 WebP 格式图片的支持

根据 Bugzilla 的信息显示,计划于 2019 年 1 月推出的 Firefox 65 将支持 WebP 格式的图片。WebP 是谷歌创建的专门用于互联网的图片格式。主流的浏览器中,Chrome 和 Opera 早已实现对 WebP...

局长
2018/11/06
1K
6
【省带宽、压成本专题】带宽成本降低50%的秘密——深入解析WebP

过去几年,又拍云一直在点播、直播等视频应用方面潜心钻研,取得了不俗的成果。我们结合点播、直播、短视频等业务中的用户场景,推出了“省带宽、压成本”系列文章,从编码技术、网络架构等角...

又拍云
2018/06/12
0
0
微软 Edge 开始支持 Chrome 主推的 .webp 图片格式

可能已经有相当一部分网友开始发现自己从 Chrome 下载的图片格式是 .webp。 WebP 是谷歌从 2010 年开始主推的一种图片压缩格式,可以保持画质、无损地将 png 图片的体积缩小 45%,这对于网页...

局长
2018/06/16
1K
6
Edge浏览器开始支持Chrome主推的.webp图片格式

可能已经有相当一部分网友开始发现自己从Chrome中下载的图片格式是.webp。WebP是谷歌从2010年开始主推的一种图片压缩格式,可以保持画质、无损地将Png图片的体积缩小45%,这对于网页的快速加...

快科技
2018/06/15
0
0
通过 Flash 让所有浏览器支持 WebP 格式图像解码

感谢读者 zjcqoo 的自爆。 WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。见 Wi...

小卒过河
2011/09/07
2.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
3
0
大神教你Debian GNU/Linux 9.7 “Stretch” Live和安装镜像开放下载

Debian项目团队于昨天发布了Debian GNU/Linux 9 "Stretch" 的第7个维护版本更新,重点修复了APT软件管理器中存在的安全漏洞。在敦促每位用户尽快升级系统的同时,Debian团队还发布了Debian ...

linux-tao
昨天
3
0
PHP 相关配置

1. php-fpm的pool 编辑php-fpm配置文件php-fpm.con vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加以下内容 include = etc/php-fpm.d/*.conf # 相当与Nginx的虚拟主机文件 “vho......

Yue_Chen
昨天
2
0
EOS主网数据同步指南

本文介绍如何安装EOS节点软件并接入EOS主网,主要包括以下内容: 如何安装EOS节点软件 如何配置EOS节点软件接入主网 如何启动EOS节点软件与主网数据同步 如何检查主网数据同步进度 如何正确地...

汇智网教程
昨天
3
0
matlab-线性代数 齐次方程组 基础解系和通解

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclc% x1+2*......

志成就
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部