前两天产品经理找我，说是首页的轮播图，看起来很模糊，我看了下，确实是效果不好，很多的字看起来不都清晰，看明白是什么很费劲。
看起来效果像是这样（忽然想起一个老朋友，北大高材生，居然喜欢杨幂，这里就用大幂幂吧）
我当时的第一反应就是是不是原图就不清晰。然后我抓包，拿到了图片链接，但是链接的图片在浏览器中看起来效果很不错，像这样：
但是展示在手机上的效果，真的差强人意，尤其是有文字的时候，文字的边缘锐化的效果很明显。
百思不得其解的时候，发现原图的链接给的尺寸，比手机行的设定尺寸大了好多。做iOS App开发的都知道，因为手机是retina屏，所以要求给的图都是2x和3x的，比如 100 100的图，我们通常要设计师给的是 200 200的，6p等是 300 300.但是这张图，我们需要的是200 100的，通常给 600 300肯定够了，但是服务端给的是 1200 600的，比我们需要的长宽大了两倍。然后我自己用这张图，转换了一张 600 * 300的图，debug发现效果非常好。和服务端沟通了下，给出的原因是：因为公司的图片尺寸是有限的，所以当时找了一个最接近长宽比的给前端。
又找了UI的大神聊了，上述的原因是这样的：
如果一个 9 9的图，想要在 1 1的图片中显示，怎会随机从9个像素中选取一个放到1 * 1 中，所以就失真了，类似这样：
| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| n |
|---|
1 <= n <= 9
所以呢，想要图片在app上展示出最好的效果，其实不在于图片要切的非常大，而是图片的尺寸再好和你设计的差不多，否则会失真。