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

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

文章来自：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/

手机加载优化 - 2x、3x图的更多相关文章

  1. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  2. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  3. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  4. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  5. Multidex（二）之Dex预加载优化

    Multidex(二)之Dex预加载优化 https://www.jianshu.com/p/2891599511ff

  6. react 首屏加载优化

    react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...

  7. Android高效加载大图、多图解决方案，有效避免程序内存溢出现象

    好久没有写博客了,今天就先写一个小的关于在Android中加载大图如何避免内存溢出的问题. 后面会写如何使用缓存技术的核心类,android.support.v4.util.LruCache来加载图片 ...

  8. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  9. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

随机推荐

  1. 【笔记】PIL 中的 Image 模块

    Image 模块提供了一个同名类(Image),也提供了一些工厂函数,包括从文件中载入图片和创建新图片.例如,以下的脚本先载入一幅图片,将它旋转 45 度角,并显示出来: 1 >>> ...

  2. 菜鸟的《Linux程序设计》学习—shell script

    1. 认识shell script shell script是利用shell的功能缩写的一个"程序",这个程序是使用纯文本文件,将一些shell的语法与命令(含外部命令)写在里面, ...

  3. Verilog学习笔记基本语法篇（一）·········数据类型

    Verilog中共有19种数据类型. 基本的四种类型: reg型.wire型.integer型.parameter型. 其他类型:large型.medium型.small型.scalared型.tim ...

  4. SpringData及SpringData JPA的理解和简单应用

    SpringData是一个用于简化数据库访问,并支持云服务的开源框架.其主要目标是使得 数据库的访问变得方便快捷,并支持map-reduce框架和云计算数据服务.此外,它还支持 基于关系型数据库的数据 ...

  5. python中获取python版本号的方法【转】

    原文 python3 #!/usr/bin/python # 第1种方法 import platform print(platform.python_version()) >>> i ...

  6. NYOJ 219 An problem about date

    An problem about date 时间限制:2000 ms  |  内存限制:65535 KB 难度:2   描述 acm的iphxer经常忘记某天是星期几,但是他记那天的具体日期,他希望你 ...

  7. apr的使用

    APR(Apache Portable Runtime),即Apache可移植运行库,正如官网所言,APR的使命是创建和维护一套软件库,以便在不同操作系统(Windows.Linux等)底层实现的基础 ...

  8. “玲珑杯”ACM比赛 Round #13 B -- 我也不是B，倍增+二分！

    B  我也不是B   这个题做了一下午,比赛两个小时还是没做出来,比完赛才知道要用一个倍增算法确定区间,然后再二分右端点.   题意:定义一个序列的混乱度为累加和:b[i]*v[i],b[i]为这个序 ...

  9. 【Luogu】P1586四方定理（DP）

    题目链接 此题使用DP.设f[i][j]表示数i用j个数表示,则对于所有的k<=sqrt(i),有 f[i][j]=∑f[i-k*k][j-1] 但是这样会有重复情况.所以先枚举k,再枚举i和j ...

  10. 刷题总结——道路覆盖（ssoj）

    题目: 题目描述 Tar 把一段凹凸不平的路分成了高度不同的 N 段(每一段相同高度),并用 H[i] 表示第 i 段高度.现在 Tar 一共有 n 种泥土可用,它们都能覆盖给定的连续的 k 个部分. ...