WebP 大战 JPEG,谁才是真正的王者?

多线程大师
• 阅读 2480

目前在互联网上,图片流量仍占据较大的一部分。因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题。传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间。因此 Google 于 2010 年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能。

WebP,JPEG 的升级版

WebP 就像 JPEG 的升级版。它是 Google 推出的图片文件格式,它的目的就是为 Web 上的图片资源提供卓越的有损、无损压缩。在与其他格式同等质量指数下提供更小,更丰富的图片资源,以便资源在 Web 上访问传输。

WebP 图片格式来源于 VP8 视频编解码器,也就是 WebM 视频容器,是 WebM 视频格式地单个压缩框架。VP8 编解码器的一个强大功能就是能够进行帧内压缩,或者更确切地说,能将视频的每个帧都被压缩,再压缩帧与帧之间的差异。

WebP 特性

  • 有损压缩:有损压缩基于 VP8 关键编码。VP8 是 On2 Technologies 创建的视频格式,是 VP6 和 VP7 格式的后续版本。
  • 无损压缩:采用预测变换,颜色变换,减去绿色,LZ77 反响参考等技术进行压缩。
  • 透明度:8位 Alpha 通道对图形图像很有用。Alpha 通道可以于有损 RGB 一起使用。与其它格式图片所不支持的 WebP 特有的功能。
  • 动画:它支持真彩色动画图像,即可以支持动态图( 类Gif 图)
  • 元数据:它可能具有 EXIF 和 XMP 元数据
  • 颜色配置文件:它可能具有嵌入式 ICC 配置文件。

关于压缩

为什么可以对图片进行有损压缩,因为使用有损压缩的一个关键原则是:人类的感知能力并没有计算机那么精确。科学证明,人的眼睛只能区分 1000 万种不同的颜色,并且人眼对亮度比色度更敏感,这意味着我们会忽略较大的色度变化,而不影响我们对图片的敏感度。这就是为什么“黑蓝白金裙”事件能引起那么大的讨论,它一定上也是受到我们人类的视觉敏感度所影响。

WebP 大战 JPEG,谁才是真正的王者?

有损压缩

WebP 的压缩是使用与 VP8 相同的方式来预测帧。VP8 基于块预测与任何基于块的编解码器一样,VP8 将帧划分为称为宏块(MarcoBlocking)的小块。在每个宏块内,编码器可以基于先前处理的块来预测冗余运动和颜色信息。图像帧是“关键”,意思是它仅使用已经在每个宏块的直接空间邻域中解码的像素。并试图对它们的未知部分进行赋值。这就称为与预测编码。然后可以从块中减去冗余数据,进而有效压缩。

宏块(MarcoBlocking)

编码器的第一阶段是将图像分割成“宏块”。宏块包含一个 16x16 的亮度像素块,和两个 8x8 的色度像素块。这个阶段非常像 JPEG 格式里转换颜色空间,对色度通道降低采样,以及细分图片。

WebP 大战 JPEG,谁才是真正的王者?

预测(Prediction)

然后,“宏块”的每个 4x4 子块都有一个预测模型。它在一块周围定义两个像素:有一行在它上面 A(Raw A),左边是一列 L(Column L)。利用 A 和 L,编码器会将它们放在一个 4x4 的预测像素块填满,并确定哪一个生成了最接近原始块的值。这些用不通方法填充的块叫做‘预测块’。

块预测常见有四种模式:

  • 水平预测:块的每一列都带有前一列的副本
  • 垂直预测:使用前一行的副本填充块的每一行。
  • T M 预测:一种模式,On2 Technologies 开发压缩技术,下次另将。
  • D G 预测:使用 A 上方和 L 左侧列中的像素平均值,使用单个值填充快。

值得注意的是, 4x4 的亮度块还有另外 6 种模式。

WebP 大战 JPEG,谁才是真正的王者?

基本流程就是我们找到这个最快的预测块,并导出过滤结果(剩余误差),然后送到下个阶段。

自适应量化

为了提高图像质量,图像被分割成具有明显相似特称的区域。对于这些段中的每一个,压缩质量都独立调谐。通过将位重新分配到最有用的位置,实现高效压缩。

JPGify it

为什么说 WebP 是 JPEG 的升级版,因为它们有很多相似的地方,并且在一些压缩处理上又优于 JPEG。

相同点:

  • 对块里剩余的值执行 DCT 过滤
  • DCT 矩阵后量化
  • 转成量化矩阵后重新排序,然后送到一个静态压缩器里。

WebP 大战 JPEG,谁才是真正的王者?

不同点:

  • 在 DCT 阶段输入的数据不是原始的数据块本身,而是预测后的数据。
  • WebP 用的静态压缩器是算术压缩器(Arithmetic Compressor),它和 JPEG 用的霍夫曼编码器(Huffman encoder) 类似。对比性能,算术压缩器提升了 5%~10% 的压缩性能。

有损 WebP VS JPEG

WebP 大战 JPEG,谁才是真正的王者?

作为 JPEG 升级版,当 WebP 将 JPEG 压缩到相当于原图 90% 质量 时,图片体积减少了 50% 左右。当 WebP 将 JPEG 压缩到相当于原图 80% 质量时,图片体积则减少了 60%~80%。直观有效的降低的资源大小,降低带宽流量。

WebP 大战 JPEG,谁才是真正的王者?

如何开启 WebP 自适应

WebP 凭借优异的图片压缩性能,以及兼备无损和有损两种压缩算法,迅速在各大网站、App 普及。那么要如何在网站中开启 WebP 格式呢?

WebP 大战 JPEG,谁才是真正的王者?

又拍云目前已经支持 WebP 图片格式转换,而且还支持 WebP 自适应功能,在后台一键开启 WebP 自适应功能,即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如果支持则返回 WebP格式图片,如果不支持则会返回原图,在客户端以及源站无需任何改动。

推荐阅读:

WebP - 图片格式转换体验

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
浩浩 浩浩
4年前
【Flutter实战】资源管理
2.4资源管理FlutterAPP安装包中会包含代码和 assets(资源)两部分。Assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP/GIF,PNG,BMP和WBMP)等。指定assets和包管理一样,Flutter
Stella981 Stella981
3年前
Google最新的图片格式WEBP全面解析
前言不管是PC还是移动端,图片一直是流量大头,以苹果公司Retina产品为代表的高PPI屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得探索的事情。但如今对于JPEG、PNG和GIF这些图片格式的优化几乎已经达到了极致,若想改变现状开辟新局面,便要有釜底抽薪的胆量
Wesley13 Wesley13
3年前
22 行 JS 写个图片格式转换器
虽然国内大厂(豆瓣、微信公众平台等)已支持Google推出的WebP图片格式来进一步优化性能,但其它多数软件平台还是只支持BMP、GIF、JPEG、PNG等经典格式,有时临时找个支持WebP的图片格式转换器也挺麻烦的,不如抄起键盘就是一把梭~通用源码(function(){
Wesley13 Wesley13
3年前
6 招教你提高网站速度
!图片1(https://image.evget.com//Content/files/2017/7/28/5174b527782a4fcca1e997eba85dfe89636368468467682067.gif)①图片优化统计数据显示,用户倾向于放弃一个在3秒内未加载完成的网页。由于加载图片占据了网页上可下载的大部分字节空间,所以
Stella981 Stella981
3年前
Python脚本批量转换Webp为png或jpg
话说,Android开发的时,很多的应用已经将png或jpg改为了Webp格式,一个目的是为了减少包的体积,我觉得还有一个好处是资源包的安全考虑,不过我如果要反编译人家的apk,并拿到图片资源就比较恶心。这不,我今天想仿下网易严选,不过反编译后,发现图片都是webp格式的。心里想着,能不能使用Python编写一个一键转换工具呢?答案是肯定的,由于Pyth
Stella981 Stella981
3年前
Doge.jpg 的背后是什么,你知道么?
图片,是我们生活中最常见的信息载体,作为一个日常生活中无处不在的事物,我们已经很习惯静态或者动态的图片了。大家也了解静态图片主要是jpg/png格式,动态图片主要为gif。那你有没有过一瞬间的疑惑:“为什么都是图片还有不同的格式,这些格式都有什么不同?”Q1聊聊常见的图片格式JPEG格式JPEG(Joint
可莉 可莉
3年前
10.2【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?
!(https://oscimg.oschina.net/oscnet/8ad1f7aca1ec422cb409d3cb3e47047e.gif)1、JPEG:①支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小;②有损压缩会使图像数据质量下降,③JPG不适合具有大块颜色相近的