现在大型的互联网电商网站,图片的流量约占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后缀,就可以体验和对比哦!
更多精彩内容请关注“IT实战联盟”公众号哦~~~
注意:本文归作者所有,未经作者允许,不得转载