首页 > 其他分享 >WebP图像格式的原理 与图像压缩的关系

WebP图像格式的原理 与图像压缩的关系

时间:2024-05-21 10:08:24浏览次数:20  
标签:编码 图像格式 哈夫曼 算术 残差 图像压缩 WebP 压缩率

目录

WebP简介

\(\quad\)目前在互联网上,图片流量仍占据较大的一部分。因此,在保证图片质量不变的情况下,节省流量带宽是大家一直需要去解决的问题。传统的图片格式,如 JPEG,PNG,GIF 等格式图片已经没有太多的优化空间(某些研究在搞二次压缩)。因此 Google 于 2010 年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能。
\(\quad\)WebP 图片格式来源于 VP8 视频编解码器,VP8 编解码器的一个强大功能就是能够进行帧内压缩,或者更确切地说,能将视频的每个帧都被压缩,再压缩帧与帧之间的差异。
更具体的描述可以关注官方文档https://developers.google.com/speed/webp/docs/webp_study
WebP格式在相同图像质量条件下压缩率高于JPEG。
image

原理

与JPEG算法相比WebP多了黄色部分的操作,即:

  • 对图像数据生成预测块,并与原始数据做差,残差数据进行DCT变换
  • WebP使用的统计压缩器是算术压缩器,替换 JPEG使用的霍夫曼编码器。
    image
    进一步解释以上两条原因:
为什么对预测数据做残差就可以提高压缩率呢?

残差块通常包含了较小的数值范围,同时数据分布更加集中(如下图所示),熵值更低。
通过结合预测和做残差,残差通常包含许多零值,可以更有效地压缩。
image

为什么使用算术编码压缩率高于哈夫曼编码?

算术编码:算术编码通常比哈夫曼编码更加高效。算术编码将整个数据流映射到一个单一的数值范围内,而哈夫曼编码则是将数据映射到变长的编码字串。由于算术编码对整个数据流进行编码,因此它可以更好地利用数据中的统计特性,达到更高的压缩率。
哈夫曼编码:哈夫曼编码通过根据字符出现频率来分配变长的编码字串,出现频率高的字符使用较短的编码,出现频率低的字符使用较长的编码。虽然哈夫曼编码在理论上可以达到信息论的熵下限,但它需要构建编码树,这可能会导致一些额外的编码开销。

标签:编码,图像格式,哈夫曼,算术,残差,图像压缩,WebP,压缩率
From: https://www.cnblogs.com/CLGYPYJ/p/18198750

相关文章

  • webpack相关知识点
    一、webpack打包过程。首先读取配置文件,确定入口文件及其依赖关系,然后,从入口文件开始,递归解析所有模块,通过相应的加载器(loaders)处理不同类型的文件内容,如Javascript、css等。接着,使用插件(plugins)执行额外的任务,如代码压缩、环境变量注入等。最后,将处理后的模块按照指定的格式......
  • 说说webpack proxy工作原理?为什么能解决跨域?
    一、是什么webpackproxy,即webpack提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)想要实现代理首先需要一个中间服务器,webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-se......
  • 图像压缩中DCT变换的优势及原理
    目录优势原理优势DCT变换可以将高频信号与低频信号分开,从而在压缩时将下三角区域的高频信号进行更充分的压缩(其实就是进行更离散的量化)原理首先将RGB格式转化为YCbCr格式(这是为了便于分别对亮度和色度分量进行处理)因为人的视觉系统对亮度信息更为敏感,左图中看似A比B颜色......
  • react中使用craco,针对路径转换,修改webpack别名路径配置
    1.0首先下载craco依赖包npminstall@craco/craco-D2.0在项目根目录下面新建craco.config.js文件,里面内容配置为constpath=require('path')module.exports={webpack:{alias:{'@':path.resolve(__dirname,'src')}......
  • AWS S3 Lambda Python脚本函数实现图片自动转换为webp并上传至s3
    AmazonS3自动转换图片格式 AmazonS3存储桶新增文件自动触发AWSLambda。Lambda取S3文件做转换并存回去S3同一个目录下,并增加相应的后缀名。并且支持通过APIGateway的方式触发对图片进行修改并输出。本Lab使用PythonPillow做图片转换,读者可以参考Pillow文档......
  • webpack
    vue是基于es6的开发的let是局部变量什么是Webpack本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时,它会递归地构建一个依赖关系图(dependencygraph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个b......
  • 前端 Vue webpack配置之 webpack.config.js 文件配置
     Webpack在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个node.js模块,返回一个json格式的配置信息对象,或者通过 --config 选项来指定配置文件。.输入命令:webpack,即可按照webpack.c......
  • [转载]自述WebPPD两年半的运营经历 [2012.11.9 sina blog]
    原文地址:自述WebPPD两年半的运营经历作者:尹广磊我在07年10月接触到了AxureRP,当时还是4.6英文版,学习门槛比现在的同学可是高多了。跟所有有过一定产品设计经验的人一样,我一开始是排斥这东西的。自认为过去的Visio用得不错。但是应公司要求,原型务必反映出页面间的链接关系。仅这一......
  • new webpack 的 DefinePlugin 与 ProvidePlugin
    一、DefinePluginDefinePlugin允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是DefinePlugin的用处,设置它,就可以忘记开发环境......
  • 如何查看Vue CLI中webpack的默认配置
    这里使用terser-webpack-plugin举例说明,在VueCLI项目中,terser-webpack-plugin 插件的默认配置通常是隐藏且封装的,因为VueCLI会根据项目需求自动配置webpack。如果你想查看terser-webpack-plugin的默认配置,你可以尝试以下方法:通过检查node_modules/terser-webpack-plugin/di......