React Native上传图片视频到S3：应在客户端优化还是S3端优化？

优化位置选择结论 #

建议端上+S3两端协同优化，端上做前置压缩减少上传带宽消耗，S3侧做后处理适配多场景拉取需求，二者结合的综合效果最优。

一、图片优化具体实现 #

端上优化（解决上传慢、压缩效果差问题） #

• 替换基础压缩工具，使用react-native-image-resizer库实现三维度压缩：
  • 分辨率：按照应用内最大显示宽度等比缩放，比如全宽展示最大为750px，就统一把图片宽度压缩到750px，高度等比计算，避免上传4K以上冗余大图
  • 格式：优先转WebP格式，同画质下体积比JPG小30%以上；需要兼容iOS14以下版本时降级为HEIC格式，体积也比JPG小20%左右
  • 质量：默认压缩到80%画质，人眼几乎感知不到差异，体积可降低50%以上
• 增加体积判断逻辑，原始体积小于200KB的图片直接跳过压缩，避免不必要的性能损耗

S3侧优化（解决拉取加载慢问题） #

• 开启S3图片自动处理能力，提前配置缩略图、高清图、原图三类规格，应用端根据展示场景拉取对应规格资源，无需每次拉取原图
• 给S3存储桶绑定CDN，缓存高频访问的图片资源，拉取速度可提升70%以上

二、视频优化具体实现 #

端上优化（解决上传耗时长问题） #

• 使用react-native-video-processing库做前置压缩，普通用户上传的日常内容统一按以下参数调整，体积可降到原文件的1/3~1/5：
  • 分辨率压到1080P，码率调整为2M~4M，帧率降到30帧
• 开启S3分片上传能力，调用aws-sdk的分片上传接口，将大视频切为5MB大小的分片并行上传，单分片上传失败仅需重传对应分片，弱网下上传速度和成功率提升明显
• 配置上传后台任务，用户切出应用后也能继续上传，无需停留在上传页面等待

S3侧优化（解决视频拉取加载慢问题） #

• 开启S3视频自动转码功能，上传完成后自动转成480P/720P/1080P多清晰度版本，应用端根据用户当前网络情况自动切换清晰度
• 给视频资源绑定CDN，缓存热门内容的常用清晰度版本，大幅提升拉取速度

内容的提问来源于stack exchange，提问作者Anayo Samson Oleru