最近在研究优化图片压缩时模糊的问题，办公环境由于大部分是Mac发现Retina中图片显示模糊还真不一定是图片本身压缩的问题，而是Retina自身的机制导致的。
背景
在IM办公场景有频繁的图片发送需求，默认一般都是采用压缩原图为一定尺寸的缩略图以及移动端转webp 格式加压缩缩略图两种思路。最近在对比自家产品和企业微信发送图片消息的差异时发现，后者比更清晰更锐利一些。于是就开始研究如何做到类似的效果，在调试了一些压缩参数之后发现放在Mac 里看依然显得有些模糊，思路一下陷入了僵局。
后来再网上发现一篇博文为什么要面向Retina屏进行图片优化？ 后恍然大悟，原来是Retina是这样工作的！
了解Retina
所谓”Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度（参考下面两张图片）。它是在iPhone4发布时开始进入大众视野的。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。
Pic 1. 同样都是3.5寸的手机，但是显示分辨率相差一倍。
Pic 2. 但是两块屏幕达到同样的展示图的真实图片资源的长宽却相差一倍。
原因是什么呢？ 以下摘自上面的博文，讲得比较浅显易懂我就不再翻译了：
与普通显示屏不同，Retina屏不会通过增加屏幕尺寸来提高分辨率，而是通过提升屏单位面积内的像素数量（即PPI）来提升分辨率。而Retina 设备在水平和垂直方向比普通设备多两倍的像素，这意味着过去容纳1个像素的空间，现在需要容纳4个像素了。1个分成4个，显然不够分啊，那些没有自己数据的像素，会尝试使用它们周围像素的数据，来判定它们应该显示什么颜色（颜色近似选取），于是，在普通设备上正常显示的图片在Retina设备上会给人一种模糊的感觉。为了提高Retina屏幕用户的浏览体验，我们需要面向Retina设备进行图片优化。
也就是说Retina屏每英寸比普通解析屏每英寸多一倍的像素，也就是说每一个Retina像素相当于普通解析屏像素的像素的四倍：
所以如果需要渲染Retina屏，那么图像需要是两倍大的原尺寸图片（才能在Retina中展示你需要的尺寸版本）：
但是除了2倍的还有3倍比例的Retina屏，如iPhone6 Plus（所以要根据不同的客户端适配不同的图片）：
This is actually a bit of a simplification—not all retina screens are created equal. For instance, the iPhone 6 Plus has three times as many pixels per inch as a standard screen. This tutorial focuses on the 2x use case, but the same techniques apply to 3x retina screens as well.
但是对于小设备如手机或者普通解析屏来说使用2倍或3倍尺寸的图显然是性价比不高的：
What’s more, standard displays and smaller devices don’t need all those extra pixels in high-resolution images, and sending that much unnecessary data usually results in a bad user experience.
如何优化
有了上面的知识储备答案就简单许多了，那就是在预期尺寸空间内放置2倍大的图片，即二倍像素尺寸的图片。我们线上默认是530530的尺寸，扩大一倍后就是10601060
，经过测试发现清晰锐利程度达到了原图的质量，如下图所示，上面的图为下面的图的长宽的1倍大，在同样的Retina屏中展示的效果的差别。
更多的优化方式请参考：为什么要面向Retina屏进行图片优化？
References
本文首次发布于 LiuShuo’s Blog, 转载请保留原文链接.
