做社交类产品明显绕不过微信这座大山,他的体验已经做到相当棒了,作为后来者不说要超过他,至少要达到他类似的体验。图片作为社交产品中非常重要的一个元素,非常具有表现力,图片既要让用户能看清楚,又能让发布图片的用户能快速的上传。

之前产品中图片直接原图上传,结果导致用户浏览图片时界面非常不流畅;后来修改为压缩后上传,又导致部分图片大图模糊;这两天决定研究下微信,看看他们是怎么做的,既能让朋友圈流畅,又能比较快速的发布朋友圈动态。

先上研究结果:

1.客户端发送图片时处理规则

1.1.除非用户主动选择发送原图外,所有的图片均需要经过本地先处理才能上传服务器端,处理规则如下

a,图片宽或者高均小于或等于1280时图片尺寸保持不变,但仍然经过图片压缩处理,得到小文件的同尺寸图片

b,宽或者高大于1280,但是图片宽度高度比小于或等于2,则将图片宽或者高取大的等比压缩至1280

c,宽或者高大于1280,但是图片宽高比大于2时,并且宽以及高均大于1280,则宽或者高取小的等比压缩至1280

d,宽或者高大于1280,但是图片宽高比大于2时,并且宽或者高其中一个小于1280,则压缩至同尺寸的小文件图片

研究方法如下

第一步:随意发一些不同类型的图片至朋友圈,有iphone6plus全景图,直接拍照的图片,从网站下载的小图片等,朋友圈发送成功后查看朋友圈大图并保存至本地,然后查看图片尺寸以及大小,结果如下。

a,原图 6000x4000  283kb》朋友圈下载图片 1280x852 17.49kb

b,原图 7900x4000  373kb》朋友圈下载图片 1280x648 13.43kb

c,原图 2448 × 3264  2.2m》朋友圈下载图片  960x1280 128kb

d,原图 7810 × 3074  6.8m》朋友圈下载图片  3252x1280 341kb

e,原图 800x24776    2.6m》 朋友圈下载图片  800x24776 1.31m

f, 原图 800 × 34776  5.6m》朋友圈下载图片  800x34776  1.35m

g,原图7810x3074   287kb》朋友圈下载图片 3252x1280 64.36kb

第一步测试得到初步结论:朋友圈发图片的规则与图片尺寸有关,与文件大小无关,关键字1280、图片宽高比

接着第二步,试着论证前一步结论,并细化具体规则

用ps制作一些纯色图片,这样得到的图片文件大小会比较小,基本上图片文件均小于500kb,按照之前的测试方式,仍然是发图片至朋友圈,然后下载对比原图

1.图片宽高均小于1280px,图片宽高比例分别如下

1.5  (800x1200 12kb》800x1200 15.26kb),

2.5(480x1200 8kb》480x1200 9.4kb),

3.5(343x1200 6kb》343x1200 7.06kb),

4.5(267x1200 5kb》267x1200 5.59kb)

2.图片均大于1280,图片宽高比例分别如下

1.5(1400x2100  36》852x1280 17.49kb),

2.5(1400x3500 42kb》1280x3200 63.11kb),

3.5(1400x4900  82kb》1280x4480 88.11kb),

4.5(1400x6300 105kb》1280x5760 113kb)

3.图片宽或者高一个小于1280,一个大于1280,图片宽高比例分别如下

1.5(1000x1500 19kb》852x1280 17.49kb),

2.5(1000x2500 30kb》1000x2500 39.25kb),

3.5(1000x3500 42kb》1000x3500 54.51kb),

4.5(1000x4500 54kb》1000x4500 70.01kb)

从第二步测试结果推断如下:

a,图片宽或者高均小于等于1280时图片尺寸保持不变,但仍然经过图片压缩处理,得到小文件的同尺寸图片

b,宽或者高大于1280,但是图片宽度高度比小于等于2,则将图片宽或者高取大的等比压缩至1280

c,宽或者高大于1280,但是图片宽高比大于2时,并且宽以及高均大于1280,则宽或者高取小的等比压缩至1280

d,宽或者高大于1280,但是图片宽高比大于2时,并且宽或者高其中一个小于1280,则压缩至同尺寸的小文件图片

但是暂时还不知道大文件图片是否仍然使用此规则,于是开始第三步测试。

第三步:

用ps制作一些步骤2中用于测试的同尺寸的图片,但是图片文件大小调整大些,是的每个图片的文件大小均大于1m。测试结果如下

1.图片宽高均小于1280 比例

1.5  (800x1200 3.5m>800x1200 484kb),

2.5(480x1200 2.1m>480x1200  291kb),

3.5(343x1200 1.5m>343x1200 209kb),

4.5(267x1200 1.2m>267x1200 185kb)

2.图片均大于1280  比例

1.5(1400x2100  10.6m>852x1280  453kb),

2.5(1400x3500 17.6m>1280x3200  1.79m),

3.5(1400x4900  24.7m>1280x4480  2.49m),

4.5(1400x6300 31.7m>1280x5760  3.19m)

3.图片宽或者高一个小于1280,一个大于1280,比例

1.5(1000x1500 5.4m>852x1280  363kb),

2.5(1000x2500 9m>1000x2500  1.24m),

3.5(1000x3500 12.6m>1000x3500 1.72m),

4.5(1000x4500 16.2m>1000x4500 2.21m)

第三步的测试结果与第二步结果一致,但是此时有一个新的疑问来了,“宽或者高大于1280,但是图片宽度高度比小于等于2,则将图片宽或者高取大的等比压缩至1280”这一条其实仍然无法判定是否成立,有可能是因为图片的高以及宽均小于1280x2导致的假象。所以开始第四轮测试

第四步:

设置测试条件:图片宽或者高大于1280x2时,但宽高比小于2

1.5(1708x2562 133kb》852x1280  17.49kb)

1.5 (3000x4500 400kb》852x1280 17.49kb)

测试结论:第三轮的疑虑不存在。至此微信朋友圈的图片处理策略基本清晰可见,这个策略可以用于几乎所有需要用到图片的移动app中,暂存。

微信的这种策略一方面作为图片上传者来说可以使得上传的图片文件较小,那么上传速度较快,为用户节省流量,节省时间;另外一方面作为图片阅读者来说可以快速的看到他人上传的图片,并且基本上不影响图片质量(肉眼可见的质量)

朋友圈上传图片处理逻辑推断相关推荐

  1. 微信小程序仿朋友圈上传图片到服务器,后端通过C#实现

    现在微信小程序拍照上传的需求越来越多了,绝大部分小程序项目都会用到,虽然技术上没什么难度,但对于初学者来说,也是件费时费力的事情,三年前我在写这些代码的时候也是花费好几天的时间,最近有点空闲时间,于是 ...

  2. 朋友圈的权限研究、最后有个实现朋友圈的实现的推测(全网最全)

    朋友圈的权限研究.最后有个实现朋友圈的实现的推测(全网最全) 分组可见.怎么知道对方是否删除自己.朋友圈的设计之推模式.仅聊天.不让他看.不看他.三天可见.一月可见.半年可见 一.概述 (研究时间20 ...

  3. 推荐|微信朋友圈营销的新尝试

    作者:孙志超 全文共 3066 字 4 图,阅读需要 10 分钟 ---- / BEGIN / ---- 微信是一个原则性特别强的工具--尊重用户的选择,不对用户的任何选择画蛇添足.指手画脚.而< ...

  4. 揭秘分析:朋友圈集赞引流套路,老用户是如何带来裂变效果?

    微信总裁张小龙在"2021年微信公开课PRO"演讲中表示:每天都有10.9亿用户打开微信.3.3亿用户进行视频通话,7.8亿用户进入朋友圈,1.2亿用户发表朋友圈.微信的用户如此庞 ...

  5. 如何在App中实现朋友圈功能之六快速实现下拉加载朋友圈功能——箭扣科技Arrownock

    如何在App中实现朋友圈功能 之六 快速实现下拉加载朋友圈功能 实现逻辑: 根据上次下拉刷新的时间从数据库加载出limit(比如10)条post,判断总数据条数: a. 如果总数据大于limit条,清 ...

  6. 微信的朋友圈为什么不设置到首屏或者下栏,为什么路径这么深

    1.从产品定位的角度来看: 基于产品定位,"朋友圈"的位置处于第三个Tab"发现"中的,"发现"这两个字本身就给人无限的空间想象,而在&qu ...

  7. 朋友圈又被支付宝刷屏,年度账单的背后其实是人性

    支付宝在今天1月8日,年度账单开始给予了用户入口.支付宝用户都可以通过账单遍历自己的一年账单数据. 在之前知乎.微信.新榜等,围绕年度的[数据报表]都成了产品经理拉新.促活的方式.几乎都会采用H5 . ...

  8. 小程序 朋友圈,点赞 ,评论,发布动态,功能,上传图片 -----发布动态

    小程序 朋友圈,点赞 ,评论,发布动态,功能,上传图片 -----发布动态 分析需要实现的功能 一.点击弹出输入内容的弹出框: 1.弹出输入框 2.隐藏那个底部导航条 二.上传图片 1.图片要在选择后 ...

  9. 微信小程序-仿朋友圈发布动态(包括后端上传图片)

    仿照微信朋友圈做了一个界面如下,先看效果: 1.点开界面 2.选择图片 3.点击上传 4.动态显示 第一个页面的wxml: <view class='page'><textarea ...

最新文章

  1. 如何隐藏iPhone导航栏上的“后退”按钮?
  2. 禁用微信 webview 调整字体大小
  3. Spring Cloud Stream消费失败后的处理策略(一):自动重试
  4. Ubuntu 下查看CUDA和cuDNN 版本
  5. 原 Ubuntu使用VNC运行基于Docker的桌面系统
  6. Swaks-smtp瑞士军刀(smtp邮件)
  7. 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1106:年龄与疾病
  8. Java:ThreadPoolExecutor解析续--Executors
  9. js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
  10. C语言指针怎么存二维数组,C语言怎么用指针代替二维数组
  11. 如何下载php-5.5.38.tar.gz_搭建PHP服务器php-5.3.28.tar.gz
  12. 【多线程】LockSupport 使用 原理 源码 分析
  13. 天然气压缩因子计算软件_测量天然气用什么流量计?
  14. 收藏 | 《周志华机器学习详细公式推导版》发布,Datawhale开源项目pumpkin-book
  15. 2.1 LibCurl编程流程(转)
  16. 百度编辑器上传图片配置php,谁配置过百度编辑器ueditor1.4.3的图片上传路径?
  17. 在SUSE 10下安装oracle 11g
  18. flutter的PDF阅读器
  19. B站小UP主抽奖简易解决方案
  20. Bootstrap可视化布局系统

热门文章

  1. vue之v-show基本使用
  2. python sanic部署_Sanic 部署
  3. oracle 处理图片,oracle数据库存取图片方法教程-Oracle
  4. 1920+1080+android三星手机,三星S4国行发布 1080P高清大屏手机激斗
  5. 【WPS表格】条件格式功能的部分运用
  6. 文件定时上传服务器,文件定时上传至服务器
  7. 二手手机回收为何会涌入大批正规军,它们如何从中牟利?
  8. java排序算法对比_java项目 实现排序算法对比,步骤,改进
  9. 筹备开酒吧?先看看这些知识
  10. Windows10 卸载更新GPU Driver