首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

成本优化:新一代图片编码AVIF在手Q应用实践

其中AVIF是一种基于AV1视频编码新图像格式,相对于JPEGWEBP这类图片格式来说,它压缩率更高,画面细节更好。最关键是,它是免费且开源,没有任何授权费用。...值得一提是,iOS虽然不支持AVIF,但是实际业务场景,只要客户端能够自行解析AVIF,iOS也是可以显示。具体参考iOS AVIF support[3]。...小结结合iOS我们业务中所占比例等多种因素,我们最终考虑Android使用AVIF,iOS使用兼容性更好WebP格式。3. 功能如何落地?...降低转换成本由于目前腾讯云数据万象图片编码都是按次收费,avif 0.3元/千次,webp 0.1元/千次。总体产生费用和各个业务CDN回源率相关。...但是会员个性化商城中,各个子商城页面上图片特征差异是比较大。为了证明AVIF编码对不同图片特征压缩效果都是正向,我们需要收集外网用户实际资源加载大小和速度。

86720

Netflix选择AVIF作为下一代图片压缩技术

通过对比其他几种同样为人熟知图片编码格式:JPEG2000、WebP与HEVC,我们发现,AVIF满足Netflix以上三个要求同时,相比其他图片格式也确实是个better choice。...曾经JPEG 2000标准推出并具体实现之后,并没有得到很好市场推广(对比Google大力推崇WebP、苹果IOS系统支持 HEVC)。...AOMedia正在开发一个名为libavif开源库,该库可以对AVIF图像进行编码和解码,目的是简化图像社区软件集成。类似的集成已经各种浏览器(例如Google Chrome)开始应用。...一周前,Netflix宣布了将在在Android采用AV1视频编解码格式,现在他们也将很快Android测试AVIF图像格式。...相关链接 Netflix移动启用AV1格式 较VP9编码效率提升20% AV1Ecosystem Update: November 2019 性能可期——Netflix与Intel优化SVT-AV1

1.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

Netflix选择AVIF作为下一代图片压缩技术

通过对比其他几种同样为人熟知图片编码格式:JPEG2000、WebP与HEVC,我们发现,AVIF满足Netflix以上三个要求同时,相比其他图片格式也确实是个better choice。...曾经JPEG 2000标准推出并具体实现之后,并没有得到很好市场推广(对比Google大力推崇WebP、苹果IOS系统支持 HEVC)。...一周前,Netflix宣布了将在在Android采用AV1视频编解码格式,现在他们也将很快Android测试AVIF图像格式。...与此同时,Netflix也正在为UI处理HDR图像,并计划使用AVIF对这些HDR图像资产进行编码,尝试使用JPEG 2000作为HDR图像压缩格式,期待AVIF可以提供更出色压缩效果。...相关链接 Netflix移动启用AV1格式 较VP9编码效率提升20% AV1Ecosystem Update: November 2019 性能可期——Netflix与Intel优化SVT-AV1

54510

Android开发笔记(一百七十四)图像解码器ImageDecoder

早期Android只支持三种图像格式,分别是JPEG、PNG和GIF,虽然这三类图片都能在ImageView显示,但对于GIF格式来说,图像视图仅能显示动图初始画面,无法直接播放动画效果。...目前智能手机行业仅剩和iOS两大阵营,为了争夺移动互联网时代技术高地,两大阵营盟主纷纷推出新图像压缩算法,阵营谷歌推出了WebP格式,而iOS阵营苹果推出了HEIF格式。...尽管WebP与HEIF出自不同厂商,但它俩都具备了下列优异特性: 1、支持透明背景;(JPEG不支持透明背景) 2、支持动画效果;(JPEG和PNG不支持动画效果) 3、支持有损压缩;(PNG...ImageDecoder正是Android9推出新型图像解码器,它不但兼容常规JPEG和PNG图片,还适配GIF、WebP、HEIF动图效果,可谓新老图片类型一网打尽。...当然,ImageDecoder存在意义是为了处理新图片格式,而不是老格式一争高下。

1.3K10

WordPress 支持 WebP格式图片上传方法

WebP 简介 WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式姊妹项目,是由Google购买On2 Technologies...WebP最初2010年发布,目标是减少文件大小,但达到和JPEG格式相同图片质量,希望能够减少图片档在网络发送时间。...根据Google较早测试,WebP无损压缩比网络找到PNG档少了45%文件大小,即使这些PNG档使用pngcrush和PNGOUT处理过,WebP还是可以减少28%文件大小。...这是因为webp毕竟只是谷歌自己推出,主要应用在谷歌自己chrome浏览器和系统,所以是存在兼容性问题 如果使用不兼容浏览器打开是无法显示webp图片,有兴趣的话可以看下webpcaniuse...表meta_key为_wp_attached_file图片名称,可以看到这个表meta_key为_wp_attachment_metadata对应数据已经第2步替换了; 4)Gedit编辑器正则表达式替换文章数据表插入图片链接

2K10

前端图片优化机制

Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储JPEG文件。...__这两种jpeg格式文件效果对比如下: ? jpeg优势: 非常通用,JPEG色调及颜色平滑变化相片或是写实绘画(painting)可以达到它最佳效果。...优势: 支持256色调色板技术以产生小体积文件 最高支持48位真彩色图像以及16位灰度图像。 支持Alpha通道半透明特性。 支持图像亮度gamma校正信息。...渐近显示和流式读写,适合在网络传输快速显示预览效果后再展示全貌。 使用CRC循环冗余编码防止文件出错。 最新PNG标准允许一个文件内存储多幅图像。...WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,而绝大部分网络应用,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。

3.1K01

前端图片优化机制

Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储JPEG文件。...__这两种jpeg格式文件效果对比如下: ? jpeg优势: 非常通用,JPEG色调及颜色平滑变化相片或是写实绘画(painting)可以达到它最佳效果。...优势: 支持256色调色板技术以产生小体积文件 最高支持48位真彩色图像以及16位灰度图像。 支持Alpha通道半透明特性。 支持图像亮度gamma校正信息。...渐近显示和流式读写,适合在网络传输快速显示预览效果后再展示全貌。 使用CRC循环冗余编码防止文件出错。 最新PNG标准允许一个文件内存储多幅图像。...WEBP与JPG相比较,编码速度慢10倍,解码速度慢1.5倍,而绝大部分网络应用,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。

1.6K30

GIFPNGJPG和WEBPbase64apng图片优点和缺点整理

优点   * 支持256色调色板技术以产生小体积文件   * 最高支持48位真彩色图像以及16位灰度图像。   * 支持Alpha通道半透明特性。   * 支持图像亮度gamma校正信息。   ...* 渐近显示和流式读写,适合在网络传输快速显示预览效果后再展示全貌。   * 使用CRC循环冗余编码防止文件出错。   * 最新PNG标准允许一个文件内存储多幅图像。...JPEG压缩方式通常是破坏性资料压缩(lossy compression),意即在压缩过程图像品质会遭受到可见破坏。...优点   JPEG/JFIF是最普遍万维网(World Wide Web)被用来储存和传输照片格式。JPEG色调及颜色平滑变化相片或是写实绘画(painting)可以达到它最佳效果。...WEBP图片格式:   2010年谷歌推迟图片格式,专门用来web中使用, 压缩率只有jpg2/3或者更低; 第一个版本webp图片格式是有损, 新版本webp图片是无损

3K91

9.27【前端开发】图片文件格式:常见图片格式对比有何优劣以及如何使用Googlewebp格式?

存储摄影或写实图像一般能达到最佳压缩效果,比如网站背景图,轮播图,用户头像等 2、PNG优缺点 能在保证最不失真的情况下尽可能压缩图像文件大小。...Google webp格式图片 网络图片是占用流量较大一部分,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要,特别在移动设备。...WebP最初2010年发布,目标是减少文件大小,但达到和JPEG格式相同图片质量,希望能够减少图片档在网络发送时间。...根据Google较早测试,WebP无损压缩比网络找到PNG档少了45%文件大小,即使这些PNG档使用pngcrush和PNGOUT处理过,WebP还是可以减少28%文件大小。...据官方实验显示:无损WebP相比PNG减少26%大小;有损WebP相同SSIM(Structural Similarity Index,结构相似性)下相比JPEG减少25%~34%大小;有损WebP

2.3K30

如何节省 1TB 图片带宽?解密极致图像压缩

JPEG带宽我们还能做些什么呢? 通常图像处理服务在编码JPEG图像时会调整图像量化表,以减少图像大小,即通过降低图片质量值方式。...文字不易被观察,将上图分别采用libjpeg和guetzli编码后,将蓝色通道转换为灰度图如下图所示: image.png 上半部分jpeg编码针对黑色背景和黄色背景,蓝色通道均采用相同精度保存,...将第二次迭代消零序列,进行消零尝试,先进行大幅度消零计算其得分和文件大小,然后根据文件大小适当回调消零系数 因为有了这些消零部分,使得图像相对于原图在编码产生更多连续0,这样进行游程编码时能够减少数据量...这里主要优化和效果如下: Jpeg图像采样方式较多,而官方版本仅支持420与444采样格式,为支持所有的采样,我们应用扩展了图像编解码函数,采用libjpeg-turbo进行图像数据解码,完整支持所有...现网实际应用GPU提供异构计算服务时同样有一些需要注意地方,为了避免GPU空闲时驱动程序释放设备导致新应用启动时长过长,我们需要将设备持久化保持驱动程序

3.7K100

10.2【前端开发】图片文件格式:常见图片格式对比有何优劣以及如何使用Googlewebp格式?

④JPG存储摄影或写实图像一般能达到最佳压缩效果,比如网站背景图,轮播图,用户头像等 2、PNG优缺点 ①能在保证最不失真的情况下尽可能压缩图像文件大小。...Google webp格式图片 网络图片是占用流量较大一部分,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要,特别在移动设备。...WebP最初2010年发布,目标是减少文件大小,但达到和JPEG格式相同图片质量,希望能够减少图片档在网络发送时间。...根据Google较早测试,WebP无损压缩比网络找到PNG档少了45%文件大小,即使这些PNG档使用pngcrush和PNGOUT处理过,WebP还是可以减少28%文件大小。...据官方实验显示:无损WebP相比PNG减少26%大小;有损WebP相同SSIM(Structural Similarity Index,结构相似性)下相比JPEG减少25%~34%大小;有损WebP

2.6K31

如何节省1T图片带宽?解密极致图像压缩

JPEG带宽我们还能做些什么呢? 通常图像处理服务在编码JPEG图像时会调整图像量化表,以减少图像大小,即通过降低图片质量值方式。...黄色背景hello world!文字不易被观察,将上图分别采用libjpeg和guetzli编码后,将蓝色通道转换为灰度图如下图所示: ?...将第二次迭代消零序列,进行消零尝试,先进行大幅度消零计算其得分和文件大小,然后根据文件大小适当回调消零系数 因为有了这些消零部分,使得图像相对于原图在编码产生更多连续0,这样进行游程编码时能够减少数据量...这里主要优化和效果如下: Jpeg图像采样方式较多,而官方版本仅支持420与444采样格式,为支持所有的采样,我们应用扩展了图像编解码函数,采用libjpeg-turbo进行图像数据解码,完整支持所有...现网实际应用GPU提供异构计算服务时同样有一些需要注意地方,为了避免GPU空闲时驱动程序释放设备导致新应用启动时长过长,我们需要将设备持久化保持驱动程序

1.8K80

腾讯是如何大幅降低带宽和网络流量

3.1使用WebP格式进行图片压缩 用户上传图片一般有三种主流格式:JPEG、PNG 和 GIF 动图,15 年 QQ 相册用Google WebP 格式用户上传原图进行后台压缩,保障同等质量下...特别是动图上具有高压缩率和低编解码耗时明显优势,经 QQ 相册验证 TPG 可在同等质量下可将 GIF 大小降低 90%,将 WebP 再降低 21%,比 JPEG 节约 43% 左右。...7、全类型多场景图片压缩解决方案 TPG 编码压缩虽然压缩率更优,但需要客户端和 PC 具备解码 SDK 才能正常使用,现在推广阶段,现网仍存在很多原图(JPEG、PNG、GIF)请求量。...客户端复杂,不确定是否支持解码。 不具备专用硬件就只能通过软件利用 CPU 解码,软解由于要妥协解码设备通用性,所以算法对效率和质量有折扣,相比硬解更耗时,容易造成手机发热和耗电。 ?...混音是把多种来源声音整合至一个立体音轨或单音音轨。 ? 质量跟踪: 优化过程也通过质量评分系统,对用户质量进行监控。质量随着混音灰度逐步微升。 ?

3.7K20

全面掌握移动端主流图片格式特点、性能、调优等

WebP 是 Google 2010 年发布图片格式,希望以更高压缩比替代 JPEG。它用 VP8 视频帧内编码作为其算法基础,取得了不错压缩效果。...可以看到,JPEG 编码 quality 越小,图片体积就越小,质量越也差,编码时间也越短。解码时间并没有很大差距,可能是其大部分时间消耗了函数调用、硬件调用上。...下面是经典 Lena 图对比,你也可以在这里看到大量其他图片 BPG、JPEGJPEG2000、JPEG-XR、WebP 压缩效果在线对比,效果非常明显。 ?...上面这是腾讯博客里一张演示图,可以看到 GIF 由于 Alpha 通道问题,产生了严重“毛边”现象。 目前通常解决方案是图片边缘加一圈白边,以减轻这种视觉效果: ?...APNG 文件体积比 GIF 略有优势,解码时间相差不多。WebP 体积和解码时间都具有较大优势。BPG 体积优势最大,但解码时间也最长。

1.7K31

每个前端工程师都应该了解图片知识(长文建议收藏)

可插入多帧,从而实现动画效果。 可设置透明色以产生对象浮现于背景之上效果。 缺点 由于采用了 8 位压缩,最多只能处理 256 种颜色,故不宜应用于真彩色(文末附录有解释)图片。...优点: 支持高级别无损耗压缩; 支持 alpha 通道透明度; 支持 256 色调色板技术以产生小体积文件 最高支持 24 位真彩色图像以及 8 位灰度图像。 支持图像亮度 Gamma 校准信息。...此外,WebP 与 JPG 相比较,编码速度慢 10 倍,解码速度慢 1.5 倍,而绝大部分网络应用,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。...但实际WebP 虽然会增加额外解码时间,但是由于减少了文件体积,缩短了加载时间,实际上文件渲染速度反而变快了。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果不改变图像内容前提下可以实现位图格式类似文字阴影效果。 SVG图形格式可以用来动态生成图形。

1.1K21

如何全链路进行前端性能优化

webp:是一种现代图像格式,可以提供无损压缩和有损压缩两种。可以同时办证一定程序图像质量和较小体积,可以插入多帧,实现动画效果。支持透明度。...采用8位压缩算法,无损webp比png小26%,有损webpjpeg小25-34%,比gif有更好动画。不过最多可以处理256色,不适合彩色图片。常用于图形和半透明图像。 2....变量和函数方面的优化 尽量使用id选择器,因为id选择器查询效果效率最快。 避免使用eval,这个方法比较消耗能行。 js函数尽可能保持简洁,不要把太多内容写在一个函数。...,主要是版本较多,对WebView二次封装产生,这里主要说下X5内核。...调试时无需每次代码变更都编译打包,可即时查看更小效果,极大提高了开发人力。 支持热更新,不需要每次发版都发布应用到商店,发版时间可以自由控制,和ios同时发版。

96130

每个前端工程师都应该了解图片知识(长文建议收藏)

可插入多帧,从而实现动画效果。 可设置透明色以产生对象浮现于背景之上效果。 缺点 由于采用了 8 位压缩,最多只能处理 256 种颜色,故不宜应用于真彩色(文末附录有解释)图片。...优点: 支持高级别无损耗压缩; 支持 alpha 通道透明度; 支持 256 色调色板技术以产生小体积文件 最高支持 24 位真彩色图像以及 8 位灰度图像。 支持图像亮度 Gamma 校准信息。...此外,WebP 与 JPG 相比较,编码速度慢 10 倍,解码速度慢 1.5 倍,而绝大部分网络应用,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。...但实际WebP 虽然会增加额外解码时间,但是由于减少了文件体积,缩短了加载时间,实际上文件渲染速度反而变快了。...SVG 可以与 JavaScript 技术一起运行 SVG图形格式支持多种滤镜和特殊效果不改变图像内容前提下可以实现位图格式类似文字阴影效果。 SVG图形格式可以用来动态生成图形。

1.3K20

图片流量节省大杀器:基于 CDN sharpP 自适应图片技术实践

webP自适应方案效果提升40%-50%,提升效果主要来自sharpP高于webP编码压缩率,同时能优化到webP无法覆盖png图片(备注:之前webP无痛方案只实现了jpg支持),sharpP方案和原图对比可以节省...以我们VIP中心为例,之前webP方案: [image.jpg] sharpP方案后 [image.jpg] 图片增加情况下 图片流量减少了近100K,页面速度也有提升,并且sharpP...编码压缩率、编码耗时、解码耗时相比webP有明显优势。...2.CDN sharpP方案 原有webP自适应无痛方案基础,我们联合终端、CDN进一步升级优化,做了如下优化改造: 终端支持:增值业务大部分是基于手Q webviewhybird应用,平台基于...未来规划 1)app业务接入sharpP优化方案目前只有平台基于X5内核应用能得到这套CDN sharpP方案优化效果,根据CDN日志流量统计BG内最大流量还是来自终端发起请求,后续我们计划联合

22.7K2920

JPEG WebP到HEIF FPGA实时图片转码架构

第一点是5G时代新杀手应用还没有产生;第二点是新交互,尤其视觉交互分辨率是越来越大,因为今天局限1080p和2k这个层面是受手机屏幕限制——只有5到6度视场,但是沉浸式设备里呢,通常有至少...图像加速解决方案 联捷计算科技目前产品矩阵包含了最主流两种:JPEGWebP。我们目前也支持苹果刚发布HEIF。听说手机明年也会支持默认HEIF存储格式。...3.4 图像搜索时将webp作为缩略图 WebP是反复提到由谷歌推出一种格式,主要应用在和Chrome浏览器生态。...3.5 jpeg2 webp性能基准 Benchmark我们一般控制3倍左右,因为同行内有个说法,单做吞吐不是一个很好生意。...比如钉钉也是阿里旗下,我们同事用苹果手机上传照片在端看不了,只显示个HEIF,那就说明app没有做到转码。我相信如果我们和阿里合作很快他们就有这个方案了。

1.2K40

JPEG WebP到HEIF FPGA实时图片转码架构

第一点是5G时代新杀手应用还没有产生;第二点是新交互,尤其视觉交互分辨率是越来越大,因为今天局限1080p和2k这个层面是受手机屏幕限制——只有5到6度视场,但是沉浸式设备里呢,通常有至少...图像加速解决方案 联捷计算科技目前产品矩阵包含了最主流两种:JPEGWebP。我们目前也支持苹果刚发布HEIF。听说手机明年也会支持默认HEIF存储格式。...3.4 图像搜索时将webp作为缩略图 WebP是反复提到由谷歌推出一种格式,主要应用在和Chrome浏览器生态。...3.5 jpeg2 webp性能基准 Benchmark我们一般控制3倍左右,因为同行内有个说法,单做吞吐不是一个很好生意。...比如钉钉也是阿里旗下,我们同事用苹果手机上传照片在端看不了,只显示个HEIF,那就说明app没有做到转码。我相信如果我们和阿里合作很快他们就有这个方案了。

68420
领券