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

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

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

文章来自:UI妹儿

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

[email protected]→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图

[email protected]→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、实现(可解决的方案):

[email protected](加载不同样式)

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

原文地址:https://www.cnblogs.com/cisum/p/8629706.html

时间: 2024-11-09 04:59:11

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

网络图片加载优化

网络图片加载优化 比如使用淘宝浏览产品的时候(大部分应用也是如此),就会发现每次下拉产品目录进行更新的时候,都会出现对应的Item的时候,才开始从网络下载并加载图片. taobao加载 可以看到宝贝图片下拉刷新的时候,图片加载是实时从网络下载的.即使在Wifi的网络环境下,加载图片也是有比较大的延迟. 假设我们浏览每屏宝贝需要2s的时间(人眼对于淘宝搜索的宝贝其实过滤速度非常快).如果每一屏页面需要1s才可以完全加载完图片,则如果浏览10屏的宝贝,就会需要30s.如果加载图片几乎不需要时间,则只

Android 高效加载大图,多图解决方案,有效避免程序OOM

高效加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状.不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的大小.比如说系统图片库里展示的图片大都是用手机摄像头拍出来的,这些图片的分辨率会比我们手机屏幕的分辨率高得多.大家应该知道,我们编写的应用程序都是有一定内存限制的,程序占用了过高的内存就容易出现OOM(OutOfMemory)异常.我们可以通过下面的代码看出每个应用程序最高可用内存是多少. [java] view plaincopy in

win32用GDI+加载png图片作为背景图

#include <windows.h> #include <gdiplus.h> /* GDI+ startup token */ ULONG_PTR gdiplusStartupToken; /* Declare Windows procedure */ LRESULT CALLBACK WindowProcedure (HWND, UINT, WPARAM, LPARAM); // UpdateLayeredWindow Defination typedef BOOL(*UP

让我们再聊聊浏览器资源加载优化

让我们再聊聊浏览器资源加载优化 让我们再聊聊浏览器资源加载优化

js资源加载优化

互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其实就是将自己页面所依赖的js(静态的)放置到CDN上,或者使用一些CDN库,以此降低对应用服务器的请求,而浏览器缓存也是不重复加载js文件的性质. 优点: 1.简单.容易维护 2.304 cache 简单来说就是转掉请求,缓存不重加载. 缺点: 1.缓存会失效,当用户强制刷新时会有请求 2.无法增量

Vue SPA 首屏加载优化实践

写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n

网页的资源加载优化

移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的优化,发现网上的中文教程比较少,都是照着chrome开发者网站上一步一步看下来,找问题来解决,因此将部分有用的网页整理翻译了一下. 一.查看网页加载速度 网页加载时长受到网速影响,一般采用浏览器模拟一个特定网速进行测试,这样优化前与优化后的结果会有一个较准确的对比. 方法:打开调试面板-选择网速,一

vue项目首屏加载优化实战

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页

面试之路(5)-阿里面试题android网络图片加载优化

题目: 遇到网络不好,卡顿的时候如何对网络的加载图片进行优化? 思路: 从加载的图片的本身和手机的存储两方面考虑 解决办法: 1.找现有图片格式的替换者 在众多的图片格式中,选择了Google的WebP.原因很简单:压缩效率高,而且对Android的支持好(毕竟就是Google提出来的).使用 WebP 之后,相对于JPG格式的图片,流量省了将近 25% 到 35 %:相对于 PNG 格式的图片,流量省了将近80%.最重要的是使用WebP之后图片质量还没改变. 2.按照设备处理图片的能力来加载图