好程序员web前端分享主流CSS image比较好程序员web前端分享主流CSS image比较在还原设计图的时候，难免

好程序员web前端分享主流CSS image比较在还原设计图的时候，难免会碰到一些样式图片的引用。如何来对这些图片做优化呢?本文简单的梳理了一下目前几种比较常用的使用方式。　　注：

1. 有更好的方法的话，欢迎补充。

2. 下文未对性能问题做真实的测试，请保持一颗好奇的心，并告诉我们

CSS Sprite

　　这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然，这里的最优指的是特定环境。比如移动客户端，就不一定要这么干。

CSS Sprite 是将页面中所使用到的小图片整合到一张大图上去。大家都知道，客户端向服务器发送请求是很有代价的，特别是在移动端，所以，sprite 的提出是为了减少 http 请求数，从而加快页面加载速度。

　　使用方式

先将小图片整合到一张大图上

css 引入背景图片然后依据图标的位置使用 background-position 进行定位使用技巧切图的时候就构思拼接好图片(不然后期抓心挠肺的，当然，善用工具的出门右转) 排序有序，便于后期维护(个人建议图标从上到下排列)。有利于 background-position 定位定位时避免使用 right, bottom 等(后期图片尺寸变化后就不一定了好不) 合理预留空白位置(空太多文件变大，太小引起图标重叠) 优点减少 http 请求。(这个是最大的优点) 对你存在的图片一目了然(不知道这个算不算，如改进版3.0拿到的图哪些图标是之前已存在不需要重新切了的) 缺点图片合并定位费时费力(谁用谁知道啊) 其它 github 上有个 grunt 合并 sprite 的组件，可以看看 image data URI

　　即将图片资源转换为

base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。

　　如：

　　使用方式

/** 数据格式 **/

1. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 样式引用 **/

1. 　　.icon{

2. 　　width: 30px; height: 30px;

3. 　　background-image:

4. url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);

5. 　　}

标签语法：

data : 取得数据协议 image/png : 取得数据的协议名称(注意这里也图片资源也可以使用字体等) base64 : 数据编码方式 iVBOR... : 编码后数据

Base64编码自行百度科普吧。

　　优点

减少

HTTP 请求避免某些文件跨域无图片缓存等问题(但是一般 css 也是有缓存的好不好) 缺点兼容性 ( IE6,7 不兼容, 可以使用 MHTML 来解决 ) 浏览器不会缓存该图片(这里是否是这样我存有疑惑，因为好像看上去也是第一次加载的时候慢) 增加 css 文件大小编码成本及维护(展示不直观，目前需手动转换，我暂时不知道自动替换之类的插件) 之前有看到过篇测评说性能上比 sprite 微弱一些，一时间找不到链接

　　综合起来，

data URI可以使用在

* 图片尺寸很小，使用一条 http 请求有点浪费，如渐变背景框

* 图片在全站大规模使用，且很少被更新的，如 loading 图

　　在线转换工具

Encode Data URL image to data URI 更新 github 资源 sus 可转换 data URI 参考资料 MDN - data URIs icon fonts

　　由于移动端设备拥有不同分辨率，

PPI 等引起的问题，常常需要针对不同屏幕分辨率来调整优化，如使用 @2x 图片， max-width 限制等。

　　采用

css @font-face 用来显示 icon 也不失为一种好办法。

　　因为

icon fonts (字体)是矢量图形，所以不受分辨率的影响，同时可以做到完美缩放;当然，也可使用在 WEB 端。

　　优点

文件小

加载性能好

支持

css 样式 IE6/7 下也支持缺点样式限制，使用扁平化风格移动端还存在不兼容问题 (兼容表，作者不详) 少量移动设备和 icon fonts 字符编码冲突 FF和 IE9 下跨域问题性能问题使用方法制作字体文件

　　可以利用字体工具手动制作

也可以利用在线工具自动生成

在

css 中引用，如下

　　引入字体文件

@font-face {font-family: 'iconfont';

1. 　　src: url('iconfont.eot'); /* IE9*/

2. 　　src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8

3. */

4. 　　url('iconfont.woff') format('woff'), /* chrome、firefox */

5. 　　url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,

6. Android, iOS 4.2+*/

7. 　　url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */

8. 　　}

　　再定义一个

icon-* 通配我们所有图标的共有 CSS 样式，

[class^="icon-"], [class*=" icon-"] {

1. 　　display: inline-block;

2. 　　speak: none

3. 　　font-family: "iconfont";

4. 　　font-size: 16px;

5. 　　line-height: 1;

6. 　　font-style: normal;

7. 　　/** 字体图标出现锯齿的问题： */

8. 　　-webkit-font-smoothing: antialiased;

9. 　　-moz-osx-font-smoothing: grayscale;

10. 　　}

　　最后是利用

:before 来注入每个 icon 对应的字体编码

.icon-bell:before {

1. 　　content: "\003432";

2. 　　}

3. 　　.icon-search:before {

4. 　　content: "\003433";

5. 　　}