css sprite
又称精灵图或雪碧图,如下图所示。具体来讲就是多个小图合成大图,通过background-position来显示不同图片
优点,减少http请求次数,提高图片加载速度,缺点,图片需要通过软件或者其他方式生成,如果有删改的话,不是很方便
Data URI
示例如下,简而言之就是将图片转换为代码
data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==
优点,无需任何额外的HTTP 请求,缺点不受IE 浏览器的支持,base64[8]编码在不启用GZIP[9]压缩时会明显增加图片的大小,有删改的话,长编码看起来也很麻烦。
字体图标
把图片转换成字体,类似于字体设计,需要下载字体文件,下面为例子
//导入
.el-icon-info:before{content:"\e61a"}
//使用
<i class="el-icon-info"></i>
优点,因为是字体,显示速度很快,而且能够改变字体颜色和大小,缺点,制作起来比较麻烦,用别的现成的库可能需要图标没有的情况。
直接引用
直接引用,例子如下:
<img src="1.jpg"/>
优点,删改起来快,缺点加载速度慢,占用资源