开发者必看:图片下载流量优化 QQ空间是这么干的!

  •   2015-06-19/10:44
  • 作者:许小川

    图片在移动应用中的地位不用多解释,一个词:核心。但开发者们真的用好图片了吗?怎么合理利用规则省流量、省银子?QQ空间每天600亿次图片下载,5.9亿次图片上传,同时上传下载成功率高达99.9%,他们是怎么做到的?开发者可以从中学习到什么? 本文谈谈QQ空间这几年是怎么优化图片下载流量的,又是如何通过各类手段“省流量”和“省钱”的。

    精细化处理 显著减少图片下载流量

    流量的直观理解就是:图片下载流量 = 图片本身的大小 x 下载请求的次数。所以不难想到两条优化思路:降低图片大小减少下载次数,那么问题来了……要怎么做到?

    1、降低图片大小

    首先在降低图片大小方面是一个长期的“抗战”过程。这里包含:JPEG/PNG格式转WebP、GIF优化、调整质量因子、摘除EXIF信息、降低图片尺寸等方式。

    利用google WebP图片文件格式能显著减少图片大小。这一结论在QQ空间得到有力印证。QQ空间在腾讯公司内是较早上线WebP格式的业务。从近两年的实践结果来看,通过WebP化,图片大小整体降低30%以上。 

    除JPEG格式外,PNG格式也可以通过转换WebP显著降低文件大小。绝大多数PNG图片转WebP后文件大小只有原文件的20%~40%,而且图片视觉效果基本无差异。

    此外,对GIF图片,尝试降低颜色数值可以减少图片大小。在宽高、帧数上做文章很容易被视觉发现,通过大量对比试验发现,当GIF颜色数大于97时降至97,其视觉效果基本可以接受,文件大小可以减小8%左右。

    除此之外,调整质量因子、摘除EXIF信息(数码相机在拍摄过程中采集一系列的信息)、降低图片尺寸也是减小图片大小的通常做法。

    2、减少下载次数

    在减少下载次数方面的原则是:可以不下载一定不下载、可以下小规格一定不要大规格,可是真正实践起来却大有可为,下面就举几个例子跟大家探讨一下。

    比如QQ空间和微信朋友圈都做了同一件事情:打击非原创动态。如果是用户分享、转载的动态,其中的图片只展示第一张,并且展示小图。这样的图片优化方式可以降低70G流量成本。 

    再如分析发现空间的GIF图下载次数和人数比例不到1%,但流量占整个流量的15%,所以QQ空间做成了视频一样的体验,只有主动点击播放按钮的人才能真正下载GIF文件,否则只下载对应的WebP单帧图片。 

    适当降级、提前下载 合理降低成本

    说完怎么降低下载流量,再来聊聊怎么省钱?既然是优化流量成本,那就得搞清楚计费的方式,并进行合理的成本规避、转移。可以使用削峰、错峰、防盗链等方法。 

    比如海量服务需要适当考虑降级服务,这同样适用到成本优化上来。比如在晚8点~10点间,在部分网络+部分机型+部分场景做适度的降级服务后,流量曲线出现了明显火山口,这就是削峰。

    错峰则是可以帮助访问者把要访问的图片在高峰来临之前下载到本地。影响效果的因素比较多,QQ空间也在不断调优中。

    对于开发者来说,怎么合理利用图片是一件非常重要的事情,需要在实践中不断总结与提升、合理利用各项资源,能够更加精细化的实现产品打磨,才能够在产品竞争中实现突破。

    腾讯云开放QQ空间图片服务能力

    最后,或许开发者们会问,QQ空间这样海量图片处理的能力是否可以开放出来?答案是肯定的,腾讯云最近推出的“万象图片”服务,正是基于QQ空间使用的核心图片服务能力,为开发者提供包括图片存储、处理、分发等在内的一体化解决方案,这也是腾讯云移动应用解决方案的特色服务之一。

    “万象图片”服务采用IP直通车技术,减少DNS解析,能够有效防止域名劫持;借助手机QQ等产品提供的连接数据,实现全网智能调度,让客户端连接到路径最短的上传服务器,实现最优接入;此外还可以自动进行图片的分片上传和断点续传,用户即便处于网络较差环境下,也可以完成图片的上传下载。不仅如此,当用户所处的网络场景发生变化时,"万象图片“服务还可以快速完成场景切换,获取最优网速,提升用户产品体验。数据显示,使用”万象图片“服务,图片的上传下载成功率可高达99.9%,有效为开发者节省移动端下载流量30%-40%,帮助开发者简化图片相关的开发工作。此外,智能黄图过滤、人脸识别等特色功能也是”万象图片“的核心武器。


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多