何时才应该将多个图标放在一个图片文件里面

      在制作网页时，应该在什么时候才将多个图标放在一个图片文件里面? 

      

      在最近完成的几个项目里面，都会用到大量的图标去展现效果。其中就遇到这样一个问题：当网速比较慢的时候，按钮的hover效果会出现闪烁。这是因为普通状态的图标和鼠标悬停时的图标都是独立放置的，所以当鼠标触发hover事件时，悬停状态的图标才开始下载，在下载完成前，该按钮的背景变成容器的背景色，继而导致有闪烁的感觉。

      最近在查阅网上的资料， 很多论坛都推荐将小图标拼在一个图片文件里。然后通过 CSS 的background-position 定位访问图标， 访问量大的网站尤是如此。 但是否意味着应该将所有的图标都放在一个图片文件里呢？还是分开管理更加灵活?

 

      这里就是我们需要探讨的地方。

      既然很多大型网站都这么做，里面肯定有它的优点, 但这同样存在缺点.

优点:

 

1. 1 + 1 < 2
      图标放在一起，可以令图标的总容量稍小一点。这不是最重要的，但很多程序员都是完美主义者。

2. 让连接次数大量减少
      对于 Web 服务器上的每个独立资源， 都需要去连接和获取的。所以很多人都设法将很多图标放在一个图片上， 连接一次就全部取回来。这也加快网站的加载效率。

3. 让浏览器将图标预先下载
      浏览器为了尽快地显示页面， 一般只是将打开页面时用到的图片下载到本地， 而一些可能用到，但没有立刻被用到的图片需要在应用的时候再进行下载。 最经典的例子可能是导航菜单的 Tab 图标和按钮效果图标，如果普通状态的图标和鼠标悬停时的图标都是独立放置的，那么当你鼠标触发悬停状态时，图标才开始下载，这样就会造成闪烁，会带给用户很不好的视觉效果。 所以我觉得遇到这种情况时，将多个图标合并在一起的处理是必须的。

缺点：

 

1. 图片难以管理, 难以定位
      如果你要更换一个图标，那么你需要编辑整个大图片。如果你要改变一个图标的大小， 很可能你需要重新计算它的位置，甚至需要重新排版，或者只能在别的位置再添加一个图标。

2. 2 > 1
      两个图标合成的图片是肯定比其中一个图标独占的图片大的， 也就是说，下载这个图片所需的时间将比单独一个图标用的时间长。浏览器显示图片一般都是下载完则显示或者边下载边显示的，如果你那几个图标组成的图片容量比较大， 那么它们不能逐个显示予用户， 会造成很不好的用户体验。

如何应用：

 

1. 让图标尽量排列得有规律
      有规律地排放的图标跟容易定位和维护， 这里的间隔可以使用 16、 32、 48、 96 等标准尺寸。

2. 将背景颜色一致的图标放置在一起
      如果背景颜色不一样， 最好分为两个或多个图片放置，特别是背景颜色相近的，很容易混淆。

3. 将相同栏目的图标放置在一起
      这样可以少写一些 CSS 代码。 设置一个 background， 再在每个项设置 background-position 就行了。

4. 不要将大图绑在一块
      大部分用户都不会耐心地等待页面的所以文件被下载完毕再进行阅读, "不耐烦" 会驱使他们去点 close。

      

      与此同时，如果图片作为网络资源需要每个进行连接来获取， 那么 .js 文件和 .css 文件也是如此。 我们应该将可能放在一起的资源绑起来。这样可以为你省下一些资源，也可以满足你追求完美的虚荣。

 

      但切忌过度。 并不是所有东西都可以绑一块的， 没有人会将洗衣粉和饼干缠在一起的。将有相关性的，或者特别零碎的放在一起都是可以的。