【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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:398561
用户头像

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

关注

评论

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

3大方面升级华为云CCE集群体验,助力集群高效运维管理

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟 华为云CCE容器服

什么样的LED显示屏适合用在车站

Dylan

信息化 应用 LED显示屏 led显示屏厂家

Mac电脑矢量绘图软件:llustrator 2023 for mac最新激活版

iMac小白

区块链拆分

西安链酷科技

区块链 dapp 去中心化 拆分

.NET Core中一些优秀的项目和框架

互联网工科生

.net core

币安进军 Web3 钱包领域预示着几个重要的趋势和发展

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

Linux内核安全子系统简介(上)

nn-30

Linux Linux Kenel 内核 linux security 内核安全

Acrobat Pro DC 2023 for mac 完美激活版下载

iMac小白

犀牛8 建模软件Rhinoceros 8 for Mac 完美激活版下载

iMac小白

Axure RP 8 for Mac(交互式原型设计工具) 中文版

iMac小白

数字货币swap交易所逻辑系统开发分析方案

西安链酷科技

区块链 数字货币 去中心化

Downie 4 for Mac(最好用的视频下载软件)

iMac小白

专访|OpenTiny 社区 Mr 栋:结合兴趣,明确定位,在开源中给自己一些技术性挑战

OpenTiny社区

开源 前端 React UI组件库

从GPT定制到Turbo升级再到Assistants API,未来AI世界,你准备好了吗?

EquatorCoco

人工智能 AI GPT ChatGPT

第三期 |《实时洞察 智能运营一用友企业绩效管理白皮书》解读

用友BIP

企业绩效管理

App Cleaner & Uninstaller for Mac 完美激活 mac清理卸载工具

iMac小白

GPTs数据泄露大语言模型安全刻不容缓,如何用AI Agent提升LLM应用安全系数?

王吉伟频道

数据安全 大语言模型 AI Agent AI智能体 RPA Agent

DBeaverUltimate for Mac激活版下载(数据库管理软件)

iMac小白

「智造」第6期:浅谈智能工厂

用友BIP

智能制造

Fig Player for Mac(多媒体播放器) 1.3.7激活版

影影绰绰一往直前

Fig Player Fig Player破解下载 Fig Player激活版

Spring高手之路16——解析XML配置映射为BeanDefinition的源码

砖业洋__

spring源码 BeanDefinition分析 Spring框架内部工作 XML配置文件

如何使用Python调用API接口获取淘宝商品数据

Noah

网络安全专用产品有哪些?能一一列举出来吗?

行云管家

网络安全 防火墙 等保 安全运维

区块链链游合约系统开发项目模式技术方案

西安链酷科技

区块链 设计 方案 链游 合约

挖掘外贸网站产品核心词,提高购物旺季的订单转化

九凌网络

WeChatTweak for Mac(多开和防撤回工具) macOS微信多开插件

影影绰绰一往直前

哈希竞猜游戏开发源码部署方案

西安链酷科技

去中心化 交易所 链游 哈希竞猜

清华-用友数智化领导力项目正式开课!

用友BIP

数智化领导力

pycharm pro for mac破解版下载(Python编辑开发)

iMac小白

Premiere Pro 2023 for Mac(pr 2023)完美激活版下载

iMac小白

Proxyman 4.14.0 for Mac - HTTP 调试代理应用程序

晴雯哥

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