一、透明

图片存在半透明过渡元素，则考虑png24;

图片透明元素与不透明元素有明显分界，则用png8、gif

二、渐变与色块

图片较大，渐变色相幅度大的用png24、jpg

图片以色块发布，区域性强大用png8、gif

三、切图

实现图片阴影类效果，可以做成带半透明 阴影图片，用PNG24；（ie6可用滤镜兼容）

也可以连带背景一起切进图片内，做假阴影，这个时候透明元素与不透明元素分界明显，则用png8或者gif。

四、拼图

1、拼图的时候图块与图块之间保留5px左右的间隙；

2、利用background-position:left/right top/bottom; 实现滑动门效果，所以要善用拼图左右临界边；

3、临近色相的元素尽量拼在一起，这样降低色相跳跃性。

4、拼图是通过减少HTTP请求来提高网页加载速度，一些太大的图片应当单独处理，不应该拼进图片中，这样拼图首次加载压力变大，首页会变慢。

5、同个页面部分的图片应当拼在一起，注意对齐与重用，避免一图多拼。如下：

这是gotrip(gotrip是我目前正在做的一个项目，预计20号上线，等上线了再发链接上来)主菜单按钮，如果按照普通切法如上面一样切，就3张普通图片+3张hover就会有6张图片，但是如果这样切：

（背景我调成黑色，要不然看不到白色字，原图是透明的）

这样就只需要2张背景+6个字，从而优化了拼图。

同理：

（这是浏览器上的效果）如果按照旧思路切，则需要4张图片，

（这是拼图部分截图）这样就2张+2logo,如果要加facebook，link之类的话，那也只是添加一个类似的图标上去，不用再重复切背景图，提高了背景图的扩展性与重用性。

 

五、定义标签

1、定义标签的时候尽量确定width height,避免未定义死宽高，导致标签底图穿帮。（这也是要留间隙的原因）

2、滑动门效果，左右滑动则要善用拼图左右边界，比如：

（这是gotrip原拼图的右上角）

 

这个gotrip compile通用按钮没有css3写背景色原来的拼图，html代码如下：

<a class=”compile”><i></i>编写游记</a>

.compile i固定宽高左浮动，背景定位于那本“书”

.compile{background-position:right 0px;}

假如不利用背景图右边界，把红色区域定位到拼图的其它位置，那就只能人为的手动定义按钮宽度，这样也只是“半适应”，不是“自适应”。

3、html标签的复杂度与拼图

（1）如果用最原始的方法做icon，把icon挂在html上，则html：

<a><img>信息信息</a>

icon做为单独的img存在，灵活性差。

（2）然后把img省略，做成背景图利用padding显示，则html:

<a>信息信息</a>

拼出来的多了右侧黑色区域，黑色区域的宽度与<a>标签中的文字成正比，“信息”越长，拼图中留的空白越长，占用的拼图空间就越大。

 

（3）用hook来做，则html：

<a><i></i>信息信息</a>

拼图占用空间只是本身宽高，不受<a>标签内文字影响，而且你可以把它拼到图片任何位置，

前提是定义固定宽高不穿帮。但是这样html就跟最初的一样2个标签。

（4）拼右边界，则html:

<a>信息信息</a>

html只用一个标签，因为拼图在右边界，所以右边不受文字影响，占用空间只本身大小。所以要利用好拼图的左右边界，做到物尽所用。