手机加载优化 - 2x、3x图

人们常说，现在的流量不值钱了，图越大越好咯！

我想说的是，浏览器虽然不值钱了，但速度还是略快吧！

文章来自：UI妹儿

icon_alipay.png→iPhone 1-3代的手机(已经不考虑了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸，这就是我们通常所说的2倍图

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，这就是3倍图

 

评论者：

A、到底哪些资源需要切图，哪些不需要切图？

① 只要是无法用代码来实现和表达出来的，就需要切图

② 如果实在不清楚要不要切图，多和开发沟通，他会告诉你哪些是需要你切图的

B、切图需要切几套？（这里我只以iOS作为标准，安卓下期再说）

① 理论上，我们需要切3套图，是为了更好的适配。

② 在实际工作中，iOS只需要切2套图就可以，分别为：@2x和@3x

<img src="https://pic2.zhimg.com/50/v2-7d300d81b4ef950928b6d32690df6fb8_hd.jpg" data-caption="" data-size="normal" data-rawwidth="232" data-rawheight="381" class="content_image" width="232">

C、切图该怎么命名，不会命名怎么办？

之前我专门写了一篇关于界面切图命名规范的文章，请戳进去：

《UI设计师必须要知道的界面切图命名规范（升级版）》

注意：切图是需要注意几点：

① 切图输出格式必须为png24位、png8位、jpg格3种格式

② 同一模块内，切图大小应保持一致

③ 切图输出大小必须保持为偶数

④ 为了减小包的大小，所有切图尽量压缩后在给开发（包越小，你的boss越高兴，说不好会给你多发点年终奖哈）

具体更详细的规范你可点击查看《iOS界面设计规范》，谢谢

D、实现（可解决的方案）：

1.@media（加载不同样式）

2.使用插件：http://imulus.github.io/retinajs/