目前在互联网上,图片流量仍占据较大的一部分。因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题。传统的图片格式,如 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 的压缩是使用与 VP8 相同的方式来预测帧。VP8 基于块预测与任何基于块的编解码器一样,VP8 将帧划分为称为宏块(MarcoBlocking)的小块。在每个宏块内,编码器可以基于先前处理的块来预测冗余运动和颜色信息。图像帧是“关键”,意思是它仅使用已经在每个宏块的直接空间邻域中解码的像素。并试图对它们的未知部分进行赋值。这就称为与预测编码。然后可以从块中减去冗余数据,进而有效压缩。

宏块(MarcoBlocking)

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

 
 

预测(Prediction)

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

块预测常见有四种模式:

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

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

 
 

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

自适应量化

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

JPGify it

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

相同点:

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

不同点:

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

有损 WebP VS JPEG

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

如何开启 WebP 自适应

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

 
 

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

推荐阅读:

WebP - 图片格式转换体验

WebP 大战 JPEG,谁才是真正的王者?的更多相关文章

  1. WebP 原理和 Android 支持现状介绍(转)

    本文为腾讯Bugly开发者社区 投稿,作者:soonlai,版权归原作者所有,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b70855 ...

  2. 【腾讯Bugly干货分享】WebP原理和Android支持现状介绍

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b708556b0d 1.背景 目前网络中图片仍然是占 ...

  3. 如何让Ubuntu系统支持WebP图片格式

    本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP图片 Google开发并推出 WebP 图片 ...

  4. webp怎么打开 webp怎么转换成jpg

    webp怎么打开 webp怎么转换成jpg   2 3 4 5 6 7 分步阅读 在使用google服务的时候(比如 google play),我们会发现保存的图都是webp格式. 那webp是什么东 ...

  5. WebP图片格式

    腾讯科技讯 科技博客Gig‍‍‍aOM近日撰文称,谷歌(微博)试图让WebP图片格式取代JPEG等现有图片格式.虽然谷歌无法很快达成所愿,但WebP仍然会对互联网产生重大影响. 文章全文如下: 受够了 ...

  6. 阿里无线前端性能优化指南 (Pt.1 加载优化)

    前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...

  7. ImageLoader 笔记

    BitmapFactory 我们不能够通过构造函数创建Bitmap对象.如果需要将图片转成Bitmap对象加载到内存中,就需要使用BitmapFactory类.BitmapFactory跟据图片数据源 ...

  8. python爬虫 - Urllib库及cookie的使用

    http://blog.csdn.net/pipisorry/article/details/47905781 lz提示一点,python3中urllib包括了py2中的urllib+urllib2. ...

  9. Android Bitmap(位图)详解

    一.背景 在Android开发中,任何一个APP都离不开图片的加载和显示问题.这里的图片来源分为三种:项目图片资源文件(一般为res/drawable目录下的图片文件).手机本地图片文件.网络图片资源 ...

随机推荐

  1. vue sourcemap详解

    从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手 ...

  2. POJ3280 Cheapest Palindrome 【DP】

    Cheapest Palindrome Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6013   Accepted: 29 ...

  3. javascript常用的基础函数或方法——写给新手的我(持续补充)

    1常用基础函数 alert函数:显示一个警告对话框,包括一个OK按钮.这就是传说中的警告框,此框一弹,世界就清静了.举例:   alert("我一旦出现,之前出现的就算了,我屁股后面你们就歇 ...

  4. 转载来自朱小厮博客的 一文看懂Kafka消息格式的演变

    转载来自朱小厮博客的 一文看懂Kafka消息格式的演变     ✎摘要 对于一个成熟的消息中间件而言,消息格式不仅关系到功能维度的扩展,还牵涉到性能维度的优化.随着Kafka的迅猛发展,其消息格式也在 ...

  5. VS2010设置VC6的字体样式及背景色、选中字高亮

    习惯了VC6.0的fixedsys字体,用VS2010还真不习惯.把VS2010打造成经典的.熟悉的模样,也并非难事.网上有相应的文章,我再记录下来,主要是为了自己查找方便(刚刚重装了系统,一切从头再 ...

  6. 3-2 从降级的例子 认识Polly套路

    1 没有返回值的降级 Policy policy = Policy.Handle<Exception>().Fallback(() => { Console.WriteLine(&q ...

  7. Leetcode 260 Single Number III 亦或

    在一个数组中找出两个不同的仅出现一次的数(其他数字出现两次) 同样用亦或来解决(参考编程之美的1.5) 先去取出总亦或值 然后分类,在最后一位出现1的数位上分类成 ans[0]和ans[1] a&am ...

  8. Visual C# 2010 实现资源管理器

    演练:使用设计器创建带有 ListView 和 TreeView 控件的资源管理器样式的界面 Visual Studio 2010     其他版本     此主题尚未评级 - 评价此主题   Vis ...

  9. ASP.NET Core 动作结果 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 动作结果 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 动作结果 前面的章节中,我们一直使用简单的 C# 类作为控制器. 虽 ...

  10. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载. ht ...