为什么微信android图片质量会比iphone的差?

摘自网络,出处未知。

为什么微信android图片质量会比iphone的差?

我们团队最初也纠结过这个问题,费了半天劲、绕了好大圈,直到最后才发现,原来这是谷歌犯得一个“小”错误,而且一直错到了今天。

谷歌的错就在于:libjpeg。

libjpeg是广泛使用的开源JPEG图像库(参考 libjpeg ),安卓也依赖libjpeg来压缩图片。通过查看源码,我们会发现安卓并不是直接封装的libjpeg,而是基于了另一个叫Skia的开源项目(Skia Graphics Engine)来作为的图像处理引擎。Skia是谷歌自己维护着的一个大而全的引擎,各种图像处理功能均在其中予以实现,并且广泛的应用于谷歌自己和其它公司的产品中(如:Chrome、Firefox、Android等)。Skia对libjpeg进行了良好的封装,基于这个引擎可以很方便为操作系统、浏览器等开发图像处理功能。

libjpeg在压缩图像时,有一个参数叫optimize_coding,关于这个参数,libjpeg.doc有如下解释:

这段话大概的意思就是如果设置optimize_coding为TRUE,将会使得压缩图像过程中基于图像数据计算哈弗曼表(关于图片压缩中的哈弗曼表,请自行查阅相关资料),由于这个计算会显著消耗空间和时间,默认值被设置为FALSE。

这段解释乍看起来没有任何问题,libjpeg的代码也经受了十多年的考验,健壮而高效。但很多人忽略了这一点,那就是,这段解释是十多年前写的,对于当时的计算设备来说,空间和时间的消耗可能是显著的,但到今天,这似乎不应再是问题,相反,我们应该更多的考虑图片的品质(越来越好的显示技术)和图片的大小(越来越依赖于云服务)。

谷歌的Skia项目工程师们最终没有设置这个参数,optimize_coding在Skia中默认的等于了FALSE,这就意味着更差的图片质量和更大的图片文件,而压缩图片过程中所耗费的时间和空间其实反而是可以忽略不计的。那么,这个参数的影响究竟会有多大呢?

经我们实测,使用相同的原始图片,分别设置optimize_coding=TRUE和FALSE进行压缩,想达到接近的图片质量(用Photoshop放大到像素级逐块对比),FALSE时的图片大小大约是TRUE时的5-10倍。换句话说,如果我们想在FALSE和TRUE时压缩成相同大小的JPEG图片,FALSE的品质将大大逊色于TRUE的(虽然品质很难量化,但我们不妨说成是差5-10倍)。

我们又对Android和iOS进行了对比(均使用标准的JPEG压缩方法),两个系统都没有提供设置optimize_coding的接口(通过阅读源码,我们已经知道Android是FALSE,iOS不详),当压缩相同的原始图片时,结果也是一样,iOS完胜。想要品质接近,文件大小就会差出5-10倍,而如果要压缩出相同大小的文件,Android的压缩品质简直就是惨不忍睹。

结果说明,苹果很清楚optimize_coding参数和哈弗曼表的意义,这里需要特别指出,苹果使用的哈弗曼表算法与libjpeg(及我们后来自行采用的libjpeg-turbo)不同,像素级可以看出区别,苹果似乎基于libjpeg又进行了进一步的优化,压缩出来的图片细节上更柔和、更平滑。

以上试验,我们尝试过多个原图、多种压缩比例,试验结果均类似,如有兴趣,您不妨也自行进行尝试。

最终我们决定,不再使用安卓系统原生的JPEG压缩方法,而是基于libjpeg-turbo自行编译了一版native的安卓库,专门用来压缩图片,这样在我们的产品中,就做到了仅仅用1/5的图片大小,就能让用户得到不逊色甚至更优的图片品质,对于我们团队来说,费了半天劲、绕了好大圈是非常值得的。(使用libjpeg-turbo还有性能上的好处,这里就不再赘述了)

### 微信小程序多机型适配方案最佳实践 #### 一、开发环境准备 为了确保不同终端上的一致性和稳定性,在开始编写代码之前,需准备好统一的开发工具和模拟器。这有助于开发者提前发现并解决可能存在的兼容性问题[^1]。 #### 二、响应式布局与样式适配 采用相对单位`rpx`代替固定像素值来定义宽度高度等尺寸参数,使得页面元素能够根据不同屏幕分辨率自动调整大小。通常情况下,UI设计师提供的设计稿是以750px作为基准宽度绘制而成,因此可以直接按照比例转换为相应的`rpx`数值应用到实际项目当中[^2]。 ```css /* 示例 */ .container { width: 750rpx; /* 对应于原稿中的750px */ } ``` #### 三、组件适配 对于一些特殊形状或位置固定的控件(如底部导航栏),可以利用CSS3新增的安全区域插槽(`safe-area-inset`)特性来进行针对性处理。例如针对iPhone X及以上版本手机存在圆角屏以及刘海屏所带来的视觉干扰情况,可以通过设置`.button-box`类下的内边距属性实现自适应效果: ```css .button-box { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } ``` 上述代码片段展示了如何通过双保险的方式——即同时指定两种不同的语法形式以确保最大范围内的浏览器支持程度——从而有效防止因硬件异而导致的内容被截断现象发生[^3]。 #### 四、API调用适配 考虑到各平台间可能存在功能上的细微别,建议在发起网络请求或其他涉及操作系统底层交互的操作前先检测当前运行环境的具体特征,并据此作出适当的选择。比如某些特定接口仅适用于Android而iOS则提供了替代选项;又或者是同一项服务在不同品牌之间有着不一样的访问路径等等。 #### 五、数据展示优化 当面对多种多样且规格各异的目标群体时,合理规划信息呈现方式就显得尤为重要了。一方面要保证核心内容清晰可见不受任何因素影响;另一方面也要尽可能满足个性化需求给予用户良好的体验感受。这就要求我们在编码过程中充分考虑字体颜色对比度、图片加载策略等方面的影响因子。 #### 六、调试与测试环节 最后但同样重要的是,务必经过严格的联调过程验证各项措施的有效性。借助官方提供的真机预览功能或是第三方云测服务平台都可以很好地完成这项工作。只有经历了全面细致的质量把控之后才能真正意义上做到跨设备无缝衔接的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值