京东技术:用最小的图片格式,打造最优的用户体验

京东技术:用最小的图片格式,打造最优的用户体验

现在大型的互联网电商网站,图片的流量约占90%,要坚持产品的杰出视觉体会,怎么削减图片的size,是我们一向重视的焦点。

在电商行业界,google在近些年敞开webp技能,在保证杰出的视觉体会情况下,将图片巨细削减了25%,现在在许多互联网企业现已大规模使用。京东在2014年就开端大规模推行webp,降低了25%的cdn使用流量。

DPG的图片压缩技术在京东的使用

京东基础架构部-智能存储部近期推出DPG图片压缩技术,图片再经过DPG压缩后兼容jpeg,同时在全平台、全部的浏览器都支持,DPG是一种有损压缩技术,但通过5名用户10000张图片的人眼浏览测试,和webp的清晰度对比没有差距。该技术可以非常有效地减少图片大小50%,减少cdn带宽流量50%,加快图片用户在设备上的渲染速度,直接节省用户浏览流量,提升用户购物体验。

DPG格式和比较成熟的图片格式比较:(采集京东图片系统10w张图片)

京东技术:用最小的图片格式,打造最优的用户体验


上图所示,经过DPG技术处理后的图片,图片大小仅有webp的50%,但是图片在清晰度、视觉体验和webp并没有太大的差距,在设备渲染速度以及兼容性方面,DPG要比webp好的多。

DPG图片压缩的技术背景

京东作为一家电商发家的互联网交易平台,现在图片存储量超过了上千亿张,京东在存储上只存储原图,每天各个事务方恳求的时分,依据其事务特色恳求webp,完结缩放、裁剪、补白边等功能。依据不同的事务方有不同的需求,因而这些功能只能进行实时处理,而且一切的事务都要求单张图片处理时刻不能超过50ms,因而图片紧缩也有必要实时在线处理。



DPG图片压缩的技术思路

京东技术人员经过长时间的对比和关注,后来发现京东的图片系统里面的图片,其背景的颜色和空白色占据了30%以上的像素点,因此针对这个特点,借鉴了heif的一些特性,做了一个实时在线的压缩库,压缩效果非常好。从上图的对比中可以看到,DPG图像压缩技术可以压缩掉63%的流量。目前该技术已经在京东内部全面推广。

示例

原图:

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg

京东技术:用最小的图片格式,打造最优的用户体验


DPG压缩后的图片:

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg.dpg

京东技术:用最小的图片格式,打造最优的用户体验


经过webp转码后的图片:

https://img30.360buyimg.com/popWaterMark/jfs/t5995/269/4680734391/306740/2fcc6842/59659caaN127f5381.jpg.webp

京东技术:用最小的图片格式,打造最优的用户体验


上图所示:原图大小是306740字节,webp是220408字节 ,但是经过DPG技术压缩后只剩下120038字节,同时在PC端和手机端公国人眼观看没有出现任何的视觉差异,但是DPG压缩过的图片可只有webp的一半左右。

由此看出,如果井段全部业务使用DPG图片压缩技术后,每年就可以节省千余万元的CDN流量费用,对于京东的使用用户来说也可以节省50%左右的手机流量。

如何对比体验?

根据以上示例中的URL规则添加.dpg后缀或.webp后缀,就可以体验和对比哦!


上一篇:【白话科普】网站图片不显示,背后的原因你都清楚吗


下一篇:前端性能优化之图片优化方法论(依据京东首页分析学习)