1.优化的含义
所谓背景图片的优化是指将设计稿中的背景图以较小的文件，在不太影响图片质量的情况下输出最适合网页使用的图片格式。
几种网页常用的图片格式
1)jpg 以有损压缩的方式去除冗余的图片和色彩数据，在获得较高的压缩率的同时得到较高的图片质量。jpg允许用不同的压缩比率压缩图片，压缩比率越大，图片质量越低。
2)gif 图片交换格式其主要是为了在低带宽的环境下交换图片研究出来的，其文件小，下载速度快，还可以用同样大小的图片组成动画，但是它不能存储超过256色的图片，如果图片色彩比较复杂将会造成失真。此时jpg格式的图片比gif好。
3）png 目前保证最不失真的图片格式，融合了jpg和gif的优点，存储形式丰富，兼有jgp和gif色彩模式，既能把图片压缩到极致又能保留图片质量。png的图片预览快，只要下载1/64的图片信息就能显示低分辨率的预览图片，另外png图片支持透明图片制作。
网页上的png格式有png-8,png-24,png-32几种。png-8比gif小，但不支持动画，png-24，png-32色彩比较丰富，支持alpha通道的透明，可以制作半透明的图片，png-8和gif只支持全透明图片
2.相对路径
背景图片可以使用觉得路径和相对路径，
相对路径：background-image :url(../Image/cat.jpg);
绝对路径：background-image :url(http:www.sid.com/Image/cat.jpg);
相对路径分为如下几种：
../Image/cat.jpg上级目录下的Image文件夹下的cat.jpg文件
Image/cat.jpg同一级目录下的Image文件夹下的cat.jpg文件
/Image/cat.jpg根目录下的Image文件夹下的cat.jpg文件
3.CSS Sprite CSS图像拼合技术
CSS Sprite技术通过合并很多小图片到一张大图上，页面加载时一次性加载整个组合图片，而不是加载每一张小图片，从而大大减少了http请求次数，减少服务器负担，同时缩短鼠标悬停时加载图片的时间，与此同时通过CSS控制图片显示的位置从而显示出不同图片。
如下有一张组合图片，通过CSS Sprite使用不同图标示例
*{ margin :0;
padding :0
}
ul li
{
float:left ;
height:20px;
width :100px;
list-style:none;
text-indent:20px;
background: url(Image/default_icon.png) no-repeat 0 0 ;
padding: 3px 0 3px 10px;
overflow:hidden;/*超出当前元素的图片隐藏*/
}
.button2
{
background-position: 0 -27px;
}
.button3
{
background-position: 0 -53px;
}
<div> <ul> <li >图标1</li> <li class ="button2">图标1</li> <li class ="button3">图标1</li> </ul> </div>
background-position: 0 -27px;表示将背景图片向左移动0，向下移动27px;，通过给不同的类设置不同的位移达到显示不同图片的效果
显示效果
注：合成图片的小图片的排列是有一定规律的，每个小图片都有一个固定的坐标，并不是随便摆放的。如果图片不遮挡文字，图片之间还必须有间隔以腾出地方显示文字。
CSS Sprite常用来合并频繁使用的元素，如导航、logo、分割线、按钮等。