写点什么

Facebook 移动端照片预览背后的技术

  • 2015-08-14
  • 本文字数:1578 字

    阅读完需:约 5 分钟

当在 Facebook 移动端上浏览某个人的用户资料或页面时,首先看到的往往是图片。这些图片是构成 Facebook 体验不可缺少的一部分,但有时候,图片的下载与展示非常慢,在低速或移动网络中尤其如此。而在像印度这样的发展中国家市场上,许多 Facebook 新用户主要是使用 2G 网络。近日,Facebook 工程师 Brian K Cabral Edward Kandrot 撰文描述了Facebook 解决这一问题的过程。

封面照片是屏幕上最显眼的部分,但它也是加载最慢的部分之一。这主要有两个原因:一是封面照片的大小常常达到100KB,而2G 连接的传输速度可能只有32KB/ 秒;二是应用程序需要发送两个网络请求才能显示封面照片。它首先向 GraphQL 服务器发送请求,获得照片 URL,然后发送第二个网络请求,使用该 URL 从 CDN 获取照片。第二个网络请求的延迟相当长,比第一个长许多。

为了解决上述问题,他们希望能够由原照片生成一张 200 字节大小的效果图,然后将其作为 GraphQL 响应的一部分在第一次请求应答中直接返回,这样可以省掉第二次请求,极大地缩短用户资料和页首的显示延迟。当然,他们最终还是要从 CDN 下载完整照片并进行展示,但这可以在后台进行。至此,问题变成如何将照片压缩成 200 字节。

他们希望照片的效果图有一种磨砂玻璃的效果。这既有趣,又能与原始照片保持一致。磨砂玻璃效果采用高斯滤波器比较容易实现,而且图片越模糊,分辨率就越低,图片的尺寸就越小。不过,为了提供良好的用户体验,分辨率也不能太低。通过多次尝试,他们得出,42x42 的图片可以达到他们想要的效果,而分辨率再高一些并不会带来更好的效果。但是,即使只显示图片的DC 分量,每个像素仍然需要3 个字节,那么42x42x3 就是5292 字节,远远超出200 字节的目标。

他们开始评估标准的压缩技术,试图找出一种最好的方法,将数据压缩至200 字节。遗憾的是,只是对图片进行熵编码(比如 zlib )的话,只能将图片压缩一半,仍然太大。他们还评估了其它若干非标准技术,但最终,他们决定试一下 JPEG 图像编码。遗憾的是,JPEG 头本身就有几百个字节的大小。不过,去掉 JPEG 头,编码的数据有效负荷接近 200 字节。

于是,他们开始探索,JPEG 图片是否有可能使用一个固定的头,那样就可以将其存储在客户端,而不需要传输。JPEG 头包含多个表。在 Q 值一定的情况下,量化表是不变的。通过试验,他们发现,Q20 生成的图片可以满足他们的要求。虽然他们的图片不是固定尺寸,但基本上都限制在 42x42 以下。他们还仔细查看了 JPEG 头中的其它内容,发现只有 Huffman 表会随着图片的不同发生变化。Q 值、图片数据及图片尺寸决定着 Huffman 表中的频率值,每一项变化都会导致不同的压缩比和有效负荷字节数。他们在一组图片上进行了试验,并最终找出了一个可以作为标准的 Huffman 表。

虽然他们处理了大量的图片,但总有一些该方案不适用的情况。为此,他们增加了一个版本号。如果发现任何极端情况,或者未来发现了更好的 Huffman 表,那么他们就可以更新相关图片的版本号,并将新表发送给客户端。最终的格式包含一个字节的版本号、一个字节的宽度、一个字节的高度和大约 200 字节的有效负荷。服务器只将这一格式作为 GraphQL 响应的一部分发送,然后由客户端将 JPEG 体附加到预定义的 JPEG 头上,生成一个普通的 JPEG 图片。经过标准的 JPEG 解码后,客户端可以运行预定的高斯模糊,并拉伸其尺寸以适应窗口大小。

最终,他们获得一种可以满足需求的格式。在网速缓慢的情况下,这帮助他们将用户资料和页面加载时间缩短了 30%。而在网速非常快的情况下,这可以确保用户立即看到封面照片预览,提升了整体体验。


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

2015-08-14 08:398823
用户头像

发布了 1008 篇内容, 共 411.4 次阅读, 收获喜欢 346 次。

关注

评论

发布
暂无评论
发现更多内容

JetBrains Rider 2024永久注册码 mac/win 跨平台.NET IDE集成开发

Rose

教你如何搞定springboot集成kafka

华为云开发者联盟

kafka springboot 华为云 华为云开发者联盟 企业号2024年5月PK榜

NineData云原生智能数据管理平台新功能发布|2024年4月版

NineData

sql 数据迁移 数据备份 NineData 对比工具

【iOS逆向与安全】iOS远程大师:通过H5后台远程查看和协助iPhone设备

小陈

移动端 逆向 iOS逆向 ios安全 逆向技术

AWS RDS & ElasticCache 监控可观测最佳实践

观测云

AWS

autocad2023破解版下载 含cad2023中文汉化包 Mac&Windows系统

Rose

MES给制造业带来看得见的效益

万界星空科技

数字化 工业互联网 制造业 mes 万界星空科技

Tuxera NTFS 2021破解版下载 Mac版NTFS工具推荐

Rose

得物质量管理体系的建设与应用

得物技术

测试 质量 企业号 2024年5月 PK 榜

油猴浏览器辅助插件 Tampermonkey for Mac安装教程

Rose

MacDroid for mac:轻松实现mac与安卓设备数据互通

Rose

vm虚拟机 mac版下载 vm虚拟机 含VMware Fusion Pro 12永久许可密钥

Rose

苹果mac好用的SSh终端工具:SecureCRT for mac附最新许可文件

Rose

立即注册 | 线上讲座:基于 NGINX 为现代应用构筑三大安全防线

NGINX开源社区

nginx DevOps DOS攻击 OWASP十大漏洞 NGINX PLUS

腾讯、阿里、B站最新面经汇总,有的妥妥的凉经

王中阳Go

golang 面试题 大厂面经 Go进阶

苹果M1/M2电脑安装Lightroom Classic 2022(LRC2022) 后打开闪退怎么办?

Rose

什么是蜜罐,在当前网络安全形势下,蜜罐能提供哪些帮助

德迅云安全杨德俊

漆包线行业你了解多少?专业漆包线行业MES生产管理系统

万界星空科技

制造业 mes 万界星空科技 漆包线mes 漆包线

API主导的商业模式是否将在AI时代蓬勃发展?

幂简集成

AI API

记一次被黑的经验教训

zhumingwu

ClickHouse沙龙来了,NineData将分享数据管理与同步的关键技术!

NineData

Clickhouse Meetup 杭州 NineData 迁移同步

报名开启|智能化可观测:可观测开源开发者Meetup

TRaaS

活动报名

如何汇报自动化测试的成果

老张

研发效能 自动化测试

Desktop Goose for Mac(抖音桌面宠物鹅),让你的苹果电脑桌面更加生动有趣!

Rose

NineData亮相GOPS大会:揭秘新时代企业级数据库DevOps最佳实践

NineData

数据库 DevOps 工具 NineData SQL IDE

如何申请 https证书

zhumingwu

抖音商品详情:短视频电商的新风向

Noah

适用于Windows、Mac平台:Sublime Text代码编辑器 含注册码

Rose

Facebook移动端照片预览背后的技术_Meta_谢丽_InfoQ精选文章