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

代码狂魔 2018-03-06 14:30:24 ⋅ 841 阅读


现在大型的互联网电商网站,图片的流量约占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实战联盟”公众号哦~~~




全部评论: 0

    我有话说:

    京东到家订单中心系统mysql到es转化之路

    原文:https://www.toutiao.com/i6796507988602389006 京东到家订单中心系统业务中,无论是外部商家订单生产,或是内部上下游系统依赖,订单查询用量都非常

    京东技术:面对海量流量七步走保证用户体验(部分操作能够快速实战)

    当促销活动正式开始时,不少用户开启了价格保护,在此高并发情况下,如何保证用户体验,如何保证系统稳定性、高可、快速计算结果,是本文重点。

    「开源资讯」麒麟 20.10 版本发布--简而美,华而实

    发布第 16 个版本,提供 9 个月技术支持,...

    微信程序 - iconfont 图标字体

    你还在使用图片作为程序图标?大猪告诉大家如何在程序上使用iconfont字体图标

    微信程序-ImagewidthFix属性和rpm尺寸使用

    在做微信程序商品详情页,商品详情是图片集合,渲染完成后发现图片加载很不自然

    大公约数和公倍数

    一. 基本概念: 如果数a能被数b整除,a就叫做b倍数,b就叫做a约数。约数和倍数都表示两个整数关系,不能单独存在。 几个整数中公有约束,叫做这几个数公约数;其中一个,叫做这几个

    8 种 SQL 错误法,你有没有踩过坑?

    编写复杂SQL语句要养成使用 WITH 语句习惯。简洁且思路清晰SQL语句也能减数据库负担 。

    京东技术:Flutter图片缓存 | Image.network源码分析

    Android目前提供了很丰富图片框架,像ImageLoader、Glide、Fresco等。对于Flutter而言,为了探其缓存机制或者定制自己缓存框架,特从其Image入手进行突破。

    全网详细一篇SpringCloud总结

    什么是Spring cloud 构建分布式系统不需要复杂和容易出错。Spring Cloud 为常见分布式系统模式提供了一种简单且易于接受编程模型,帮助开发人员构建有弹性、可靠、协调

    SQLite 3.35.3 发布,常用数据库引擎

    为数众多其它应用中,是世界上使用量数据库引擎...

    「收藏版」JDK1.8工作中常用14个Stream详细示例

    一:简介 java.util.Stream 表示能应用在一组元素上一次执行操作序列。Stream 操作分为中间操作或者最终操作两种,最终操作返回一特定类型计算结果,而中间操作返回Stream本身

    10个“优秀”代码注释

    致终于来到这里勇敢人。神奇。勿动。

    微信程序:最新微信登录授权并获取openid等信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框开发方式将逐步不再支持。从2018年4月30日开始,程序与游戏体验版、开发版调用 wx.getUserInfo 接口,将

    精品推荐:一览GitHub上受程序欢迎5大Java开源项目

    列举了GitHub上一些流行Java项目。从Mockitos到Guava,以及 java-design-patterns等供大家学习。

    精品推荐:【CKEditor】全球优秀网页在线文字编辑器之一

    CKEditor是新一代FCKeditor,是一个重新开发版本。CKEditor是全球优秀网页在线文字编辑器之一,因其惊人性能与可扩展性而广泛被运用于各大网站。

    VUE 开源库收藏版(一):史上全面学习资源 ,附GitHub源码地址

    VUE 开源库收藏版(一):史上全面学习资源 ,附GitHub源码地址

    世界之开发项目:苦撑12年,600多万行代码…

    “ 你见过项目,撑了多长时间才完蛋?六个月?一年?今天介绍这个奇葩项目,不但一开始就烂得透透,还硬...

    微信程序抖音实战-视频弹幕

    如果你去抖音只是为了看视频就少了一大乐趣,评论区才是有趣地方,边看视频边看评论弹幕是不是更有意思

    GitHub精选:2018年11月份热门Java开源项目

    又到了揭晓 11 月份热门 Java 开源项目排名时候了,在本月名单中,出现了几个新面孔,如Java 核心知识库、轻量级容错组件Resilience4j .....