css sprites、Data URI 、iconfont、S

css sprites？

将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

Data URI?

在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。
图片在网页中的使用方法通常是：
<img src="images/myimage.gif ">
Data URL技术：
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

iconfont?

iconfont字体文件是用字体编码的形式来实现图标效果,既然是文字，那就可以随意设置颜色设置大小，但是它只适用于纯色图标，需要用到的属性是@font-face(IE8以上)。

SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

css sprites

优点

减少网页的http请求，提升网页加载速度。
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；

缺点

维护合成图片时，最好只是往下加图片，而不要更改已有图片
图片合成比较麻烦；
Retina(高清视网膜屏) 放大会失真。

Data URI

优点

base64的图片会随着html或者css一起下载到浏览器,减少了请求.

缺点

低版本的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载。

iconfont

优点

兼容性良好。现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。
使用方便；开发人员直接调用样式，不用为了background-position:准确定位看瞎眼睛
各个图标之间相对独立。
矢量图，放大，拉伸不会失真。
可以用css装饰

缺点

不适合多彩图标
不同系统下对文字进行抗锯齿（-webkit-font-smoothing）的效果不同，可能会导致显示效果不同。

SVG

优点

SVG属于矢量图片，缩放也不会失真;

缺点

Android 4.1才支持