前端图片合成技术_前端图片优化方案

1.使用base64编码代替图片

Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。图片大小不宜超过2KB，不然编码出来的会很长。

使用方法：

或者CSS中

background-image: url(ase64编码后的字符串);

2.使用css sprite合并图片

在线css sprite：http://css.spritegen.com/

图片不宜太大

3.图片延迟加载

在我的项目中，使用的是angular框架，用的第三方插件me-lazy-load.js对界面多图进行懒加载。

使用方法：

4.使用css、svg、canvas或iconfont代替图片

CSS可以使用为元素before、after实现简单的绘图

如图：

ul.create-nav>li span:after, ul.create-nav>li span:before {

content: " ";

height: 0;

width: 0;

border-style: solid;

border-width: 20px 5px 20px 25px;

border-color: transparent;

pointer-events: none;

}

ul.create-nav>l