切图理论储备

常见图片格式

设备像素比

devicePixelRatio = 物理像素 / dips

常见@1x，@2x，@3x

切图实践要领

• 心中有数
• 大刀阔斧
• 精雕细磨

心中有数

• 需求定位
• 结构模块
• 资源细分
• 疑难杂症

大刀阔斧

• 工欲善其事，必先利其器
  • 硬件舍得
  • 软件恰当
  • 工具够用
• 图层的合理运用
  • 选择
  • 分组
  • 复制

精雕细磨

• 压缩图片体积
• 图片大小范围
• 仿色杂边处理
• 雪碧图合并

simple than simple

• 不切图
• 让他人切图
• 自动化切图

Icon Font

• 体积小
• 维护方便
• 使用灵活
• 兼容性好

• 缺点：单色

@font-face {
	font-family: 'iconfont';
	src:url('fonts/iconfont.eot?-lbb3wi');
	src:url('fonts/iconfont.eot?#iefix-lbb3wi') format('embedded-opentype'),
		url('fonts/iconfont.woff?-lbb3wi') format('woff'),
		url('fonts/iconfont.ttf?-lbb3wi') format('truetype'),
		url('fonts/iconfont.svg?-lbb3wi#iconfont') format('svg');
	font-weight: normal;font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'iconfont';speak: none;
	font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// IE8+
.icon-heart:before {
	content: "\e801";
}

/* IE6-7, text use
<span cass=”icon-”>&#x0801</span>
*/

切图插件

• 导出选择图层
• 支持不同设备像素比

服务器端合并

• 简单省心
• 可维护强
• 生产隔离

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprite = require('css-sprite').stream;

// generate sprite.png and _sprite.less
gulp.task('sprite', function () {
  return gulp.src('./sprite/*.png')
    .pipe(sprite({
      name: 'sprite',
      style: '_sprite.less',
      retina: true,
      processor: 'less'
    }))
    .pipe(gulpif('*.png', gulp.dest('./dist/'), gulp.dest('./dist/')))
});

@import '_sprite'; // the generated style file (_sprite.less) 
 
// camera icon (camera.png in src directory) 
.icon-camera {
  .sprite(@camera);
}
 
// cart icon (cart.png in src directory) 
.icon-cart {
  .sprite(@cart);
}