主流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 字符串格式嵌到页面或样式中。这样连图片的请求连接都省了。
如：

使用方式

/** 数据格式 **/
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

/** 样式引用 **/
.icon{
    width: 30px; height: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
}

标签语法：

• 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 下跨域问题
• 性能问题

使用方法

1. 制做字体文件
   
   
   • 能够利用字体工具手动制做
   • 也能够利用在线工具自动生成
2. 在 css 中引用，以下

引入字体文件

@font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }

再定义一个 icon-* 通配咱们全部图标的共有 CSS 样式，

[class^="icon-"], [class*=" icon-"] {
      display: inline-block;
      speak: none
      font-family: "iconfont";
      font-size: 16px;
      line-height: 1;
      font-style: normal;
      /** 字体图标出现锯齿的问题： */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

最后是利用 :before 来注入每一个 icon 对应的字体编码

.icon-bell:before {
      content: "\003432";
    }
    .icon-search:before {
      content: "\003433";
    }

资源推荐

• 阿里巴巴矢量图标库
• icnMoon
• font awesome

参考资料

• icon fonts 的探析及应用

其它一些想法

• SVG绘图
• HTML5 离线文件
• localStorage 存储