切图知识

为什么H5开发一般直接用@2x的图进行向上向下适配，而APP开发需要提供@2x，@3x，甚至@4x的图？
先说结论，的确是可行的

前端给我的理由是：2倍图就够用了，而且移动端H5需要考虑网络加载速度，图片少一点小一点好。
那么问题来了，实际上2倍图在现在的大屏手机时代会多模糊？是否在肉眼接受范围内？而图片大小上又有多少优势呢？

问题一：2倍图看起来会有多模糊
结论：对于摄影图片等，肉眼难以感觉到模糊。对于UI文字，2倍图明显模糊。对于插画，模糊度不明显。（但这种模糊仅在对比时明显，直接查看时不影响阅读。若必须使用，注意不要和系统文字放在一起。）

测试使用iphone6s手机，设计分辨率为1242x2408，实际设备缩放为1080x1920。
使用的测试图为750宽的2倍图和1125宽的3倍图

测试一：高清图片
结论：差异小，且由于图片本身的复杂性，导致肉眼难以区别。

在手机预览时，2倍也觉得很高清。来回切换查看几乎看不出差异，难快速分辨出哪张是3倍图。

手机截图到Photoshop，放大到200%后仔细观察，可以看出细微的区别。如下图箭头处所示。
左侧为@2x，右侧为@3x

测试二：UI界面，这一次主要是为了测试文字、线条icon。
结论：icon差异较小，而文字在2倍图时明显模糊，但对于阅读影响不大。

直接看2倍图，感觉是可接受的。但和3倍图一对比明显发现2倍图文字模糊。
手机上看的差异比下方截图更明显。

测试三：插画。
结论：模糊程度介于高清图片和UI界面之间。对比有区别但单独看时不容易意识到模糊。

问题二：按375设计的图片，适配到414的屏幕上模糊程度怎么样？
结论：清晰度完全OK。（切带文字图片时，要考虑到放大失真）

测试：根据问题一的结论，此次跳过高清图片的测试，直接测试带文字的UI界面即可。
结论：肉眼看不出模糊。（但是尺寸上375的会被放大失真，这一点要注意。）

左侧为375画板的3倍图，右侧为414画板的3倍图

另外，由于图片放大带来的失真，切图时要考虑把图片分开切还是完整切。比如下图，整体切一张，和把4个icon单独切，开发写文字排版，实际效果是不同的。icon单独切会导致icon放大后与文字无法对齐。

问题三：@2x图和@3x图，图片大小差多少？网络加载时间差距是否可接受？
结论：一般差2倍。高清图片会有明显的加载时间差距。

直接计算的话，3倍图是2倍图的1.5x1.5=2.25倍。但实际图片储存的算法要复杂一些。
下表简单举例可以看出，3倍图一般是2倍图的2倍以上。
且相同尺寸高清图片会比UI界面图大出很多。

接下来考虑网络加载速度，下图查自网络。
3倍的高清图往往要500kb以上，网络加载会有停顿感，其实是不太合适的。且对于用户的流量也是消耗。
常规的UI图出3倍的话其实问题不大。

问题四：移动端，H5和原生开发对于图片适配的写法是否有繁简度的不同？
结论：都比较方便。原生开发对切图有具体要求，H5自己适配即可。

综上
一、对于图画类图片，H5只用两倍图来向上向下适配是可行的。
二、对于带文字的图片，则尽量让界面均为切图。混入界面文字会凸显出图片内文字的模糊。