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

现在大型的互联网电商网站，图片的流量约占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后缀，就可以体验和对比哦！

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

DPG图片压缩的技术背景

DPG图片压缩的技术思路

示例

更多相关文章

随机推荐