Yahoo与Gmail的CSS Sprites对比

前言：

使用CSS Sprite的目的是为了优化（(#‵′)凸）。

Yahoo，以左侧导航为例：

CSS Sprites图片地址：

http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

HTML：

<ul id="trough-1" class="col1">
<li><a href="r/4d" style="background-position:-400px -120px">Answers</a></li>
<li><a href="r/2h" style="background-position:-400px -440px">Autos</a></li>
<li><a href="r/25" style="background-position:0 -761px">Finance</a></li>
<li><a href="r/28" style="background-position:0 -1600px">Games</a></li>
<li><a href="r/2r" style="background-position:0 -1400px">Groups</a></li>
<li><a href="r/3o" style="background-position:0 -439px">HotJobs</a></li>
<li><a href="r/24" style="background-position:0 -600px">Maps</a></li>
<li><a href="r/3a" style="background-position:0 -161px">Mobile Web</a></li>
<li><a href="r/2i" style="background-position:0 -561px;display:inline">Movies</a> | <a class="trough_tv" href="r/2j">TV</a></li>
<li><a href="r/3m" style="background-position:0 -1562px">Music</a></li>
<li><a href="r/gx" style="background-position:-400px -1119px">OMG</a></li>
<li><a href="r/33" style="background-position:0 -40px">Personals</a></li>
<li><a href="r/2p" style="background-position:-400px -161px">Real Estate</a></li>
<li><a href="r/s3" style="background-position:-400px -1321px">Shine</a></li>
<li><a href="r/2q" style="background-position:0 -1640px">Shopping</a></li>
<li><a href="r/26" style="background-position:0 -800px">Sports</a></li>
<li><a href="r/29" style="background-position:0 -79px">Travel</a></li>
<li><a href="r/2k" style="background-position:0 -121px">Yellow Pages</a></li>
</ul>

图片分析（图中虚线为20*20的参考线）：

原始大小：

放大至200%：

特点：

1. HTML结构清晰，背景写在a标签上；
2. 切图方式：每个图标放置于20*20的单元格中，未从单元格左上角开始放置，而是上下左右都留有部分像素的距离（依据显示效果而定）。大部分情况下直接调用即可，如background-position:-400px –120px；偶尔需要调整偏移量，如background-position:0 -161px
3. 第二列图标距离左侧400px，每行图标间隔一个单元格的距离，充分留白；
4. 图片为gif格式，尺寸：420*1700，大小：16.2KB，总共80个图标。

Gmail，同样以左侧导航为例：

CSS Sprites图片地址：

https://mail.google.com/mail/images/2/5/chrome/icons7.png

HTML（以星标为例）：

<div class="nH pX">
<div class="nH">
 <div class="nH">
     <div class="pi" style="height:4px;">
         <div class="ph p" style="width:4px;"></div>
         <div class="ph q" style="width:4px;"></div>
         <div class="l o"></div>
     </div>
     <div class="l m">
         <div class="l n" style="margin-left:4px;">
             <div class="k" style="margin:-2px 4px -2px 0px;padding:0px;">
                 <div class="diLZtc">
                     <div class="nH">
                         <div class="qk">
                             <span id=":qj" class="" idlink="">
                             <div style="overflow:hidden;white-space:nowrap;">
                                 <div id=":r0" class="p5" idlink="">
                                     <a class="p9" href="https://mail.google.com/mail/#starred" target="_top" title="已加星标">已加星标</a><img class="pW" src="images/cleardot.gif" /></div>
                             </div>
                             </span></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="dJ"></div>
     <div class="pi" style="height:4px;">
         <div class="ph i" style="width:4px;"></div>
         <div class="ph j" style="width:4px;"></div>
         <div class="l h"></div>
     </div>
 </div>
</div>
</div>

图片放大至200%：

特点：

1. HTML结构极度混乱（咳咳，至少我是这么认为），甚至还有内联元素span嵌套div的情形。背景写在img上（Gmail将所有放图标的地方插入一个1*1的透明图片：<img class="pW" src="images/cleardot.gif" />，然后根据不同的class设置拉伸至不同的大小及背景坐标，并用margin修正偏移量），这么做的原因也许是跨浏览器的inline-block（Firefox 3以前的版本不支持display:inline-block）

   

2. 切图方式：每个小图放置于20*20的单元格中，大部分左上角顶齐，调用时直接用该图标左上角的坐标取值即可，如background-position:-20px –20px
3. 每个单元格放一个图标，比较紧凑。
4. 图片为png格式，尺寸：180*120，大小：4.83KB，总共47个图标。

对比（带有强烈主观色彩，请自行判断）：

	Yahoo	Gmail	胜方
HTML	结构清晰，易于维护	臃肿杂乱	Yahoo
图片排列	宽松	紧凑，易于维护（尤其是我们这种小屏幕人士）	Gmail
CSS调用	方便，部分图片需微调background-position	方便，部分图片需微调margin	平手
图片优化	可改为png-8格式进一步压缩（YUI的PPT中提倡用png-8，为什么自己不这么做呢）	已压缩	Gmail

最后的话：

二者各有优缺点，大家可取其精华，弃其糟粕，根据项目特点任意发挥，囧