微信朋友圈图片处理策略

http://www.pmcaff.com/article?id=2000000000007505

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

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

先上研究结果：

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.9以及2.1的同学可以自行试试.