好程序员web前端分享主流CSS图片对比在还原设计图的时候，难免会遇到一些引用样式图片的情况。如何优化这些图片？本文简单梳理了目前常用的几种方法。 注： 1。如果有更好的方法欢迎补充。 2。下面不对性能问题做真正的测试，请好奇的告诉我们 CSSSprite 这是目前使用最多的方法。也是我个人认为比较最优的一个方案。当然，这里的最优是指特定的环境。例如，移动客户端不必这样做。CSSSprite将页面中使用的小图片整合为一张大图片。大家都知道，客户端向服务端发送请求是非常昂贵的，尤其是在移动端。因此提出了sprite来减少http请求的次数，从而加快页面加载速度。 使用方法先把小图整合成大图，用css引入背景图，然后使用background-position根据图标的位置进行定位。使用技巧剪图时构思拼图（不然后期会伤心伤肺。当然要善用工具（出门右转）有序整理，方便后期维护（个人建议图标从上到下排列）。有利于background-position定位。定位时避免使用right，bottom等（后期图片尺寸变化后可能不好）合理预留空白位置（空间太大会使文件变大，太小会造成图标重叠）优点减少http请求。（这是最大的优点）拥有的图片一目了然（不知道是不是这个算，比如在改进版3.0中得到的图片中哪些图标之前已经存在，不需要重新切）缺点：合并定位图片费时费力（谁知道）有A其他github上的grunt-mergedsprite组件，可以看图片数据URI ，将图片资源转为base64字符串格式嵌入到页面或样式中。这样连图片的请求链接都保存下来了。 如： 使用方式/数据格式/1.data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC /样式引用/1.
.icon{
2.
宽度：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，一时找不到链接渐变背景框 *图片是全站大量使用，很少更新，比如加载图片 在线转换工具EncodeDataURLimagetodataURIUpdategithubresourcesuscanconvertdataURIReferencesMDN-dataURIsiconfonts Due造成的问题由于移动设备的不同分辨率和PPI，经常需要针对不同的屏幕分辨率进行调整和优化，例如使用@2x图像，最大宽度限制等。 使用css@font也是一个很好的方法-face显示图标。 因为图标字体（fonts）是矢量图形，不受分辨率影响，可以完美缩放；当然也可以用在WEB端。 优点文件体积小加载性能好支持css样式IE6/7也支持缺点样式限制，使用扁平化样式在移动端仍然存在不兼容问题（兼容表，作者不详）少数移动设备和iconfonts字符编码冲突FFIE9下的跨域问题和性能问题如何制作字体文件 可以使用字体工具手动创建或者使用在线工具自动生成css中的引用，如下 导入字体文件 @font-face{font-family:'iconfont';1.
src:url('iconfont.eot');/IE9/
2.
src:url('iconfont.eot?#iefix')format('embedded-opentype'),/*IE6-IE83.*/
4.
url('iconfont.woff')format('woff'),/chrome、firefox/
5.
url('iconfont.ttf')format('truetype'),/*chrome,firefox,opera,Safari,6.Android,iOS4.2+*/
7.
url('iconfont.svg#uxiconfont')格式('svg');/iOS4.1-/
8.
}
定义另一个图标-*来通配通用我们所有图标的CSS样式， [class^="icon-"],[class*="icon-"]{1.
display:inline-块;
2.
说话：无
3.
font-family:"iconfont";
4.
font-size:16px;
5.
line-height:1;
6.
font-style:normal;
7.
/*字体图标出现锯齿：/
8.
-webkit-font-smoothing:抗锯齿；
9.
-moz-osx-font-smoothing：灰度；
10.
最后使用:before注入每个图标对应的字体代码 .icon-bell:before{1.
content:"003432";
2.
}
3.
.icon-search:before{
4.
内容：“003433”；
5.
}
