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

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

文章来自: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. PyQt5(1)——QToolTip, QPushButton, QMessageBox, QDesktopWidget

    #面向对象方法 import sys from PyQt5.QtWidgets import QApplication, QWidget, QToolTip, QPushButton, QMessag ...

  2. C/C++编程之内存管理

    内存分配方式 内存分配方式一共有三种: (1)从静态存储区域分配: 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在,例如,全局变量,静态变量. (2)在栈上创建: 在执行函数时, ...

  3. python 四——线程、进程、协程

    内容概要 1.进程与线程优.缺点的比较 2.适用情况 3.线程 线程的创建 setDaemon join event RLock 队列 4.进程 创建进程 setDaemon join 线程与进程,数 ...

  4. Debian 9 更新 sourrce.list(163源)

    Debian 9 更新 sourrce.list(163源) 需求说明: 更新apt-get源 kyeup@kyeup-nas:~$ lsb_release -a No LSB modules are ...

  5. 大数据学习——Storm+Kafka+Redis整合

    1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  6. 2017 ACM/ICPC Asia Regional Qingdao Online

    Apple Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submi ...

  7. 【Luogu】P1967货车运输(最大生成森林+倍增LCA)

    题目链接 倍增LCA是个什么蛇皮原理啊,循环完了还得再往上跳一次才能到最近公共祖先 合着我昨天WA两次就是因为这个 建最大生成森林,因为图不一定是联通的,所以不一定是一棵树.这个地方用克鲁斯卡尔就好了 ...

  8. 【Luogu】P2258子矩阵(状态压缩,DP)

    233今天蒟蒻我连文化课都没听光想着这个了 然后我调了一下午终于过了!!! 一看数据范围似乎是状压,然而216等于65536.开一个65536*65536的二维数组似乎不太现实. 所以Rqy在四月还是 ...

  9. tarjan 缩点 求 scc

    算法学自 BYVoid https://www.byvoid.com/zhs/blog/scc-tarjan/ 这个写得很清楚了 当然 你可能不这么认为 而且 如果是让我 一开始就从这个博客 学 ta ...

  10. BZOJ2241 [SDOI2011]打地鼠 【模拟】

    题目 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地鼠越多分数也就越高. 游戏中的锤子每次只能打一只地 ...