为什么将多个图标放在一个图片里?

Oct 23rd, 2008 Translate Leave a comment Go to comments
将多个图标放在一个图片里

在制作网页时, 为什么要将多个图标放在一个图片文件里面呢?

经常在网上搜罗资源的朋友可能会发现, 很多网站喜欢将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标, 访问量大的网站尤是如此. 为什么呢? 分开管理不是更加灵活吗?
大家都这么做当然有它的优点, 但这同样存在缺点.

优点:

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

2. 让连接次数大量减少
用过 Opera 的朋友可能会对它那个显示图片下载的进度条印象很深, 它会显示 "已下载图片/图片总数". 对于 Web 服务器上的每个独立资源, 都需要去连接和获取的. 所以大家都设法将很多图标放在一个图片上, 连接一次就全部取回来. 这也许是一图多标的主要目的.

tabs

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

缺点:

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

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

应用:

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

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

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

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

关于图片定位, 可以看看这里: CSS 中背景图片定位

拓展:

万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样可以为你省下一些资源, 也可以满足你追求完美的虚荣.

但切忌过度. 并不是所有东西都可以绑一块的, 没有人会将洗衣粉和饼干缠在一起的. 将有相关性的, 或者特别零碎的放在一起都是可以的, 我相信聪明的你一定会有自己的一套分类方法. :)

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 为什么将多个图标放在一个图片里?
  1. +1 digg+1 / -0+1-1
    JAY | #1
    Oct 23rd, 2008 at 23:20

    有沙发岂能不坐~

    Reply | Quote
  2. +1 digg+1 / -0+1-1
    影月孤风 | #2
    Oct 23rd, 2008 at 23:30

    这些俺不懂，路过。。

    Reply | Quote
  3. +1 digg+1 / -0+1-1
    Zoll | #3
    Oct 24th, 2008 at 02:24

    呵呵 在研究很多博客的代码时候也发现了这个问题 不过自己还是嫌麻烦了点 :!:

    Reply | Quote
  4. 0 diggs+0 / -0+1-1
    icyleaf | #4
    Oct 24th, 2008 at 09:49

    从来没有试过放在一张上面...

    Reply | Quote
  5. 0 diggs+0 / -0+1-1
    ZH CEXO | #5
    Oct 24th, 2008 at 10:55

    我也用过这种方法，但是一个文件里放的图片不是很多，因为水平不行，控制不来~

    Reply | Quote
  6. 0 diggs+0 / -0+1-1
    54ui | #6
    Oct 24th, 2008 at 11:11

    试过整合图片来调用它，确实是个好方法

    Reply | Quote
  7. 0 diggs+0 / -0+1-1
    胡戈戈 | #7
    Oct 24th, 2008 at 12:02

    啊哈，这种也有挺多讲究的

    Reply | Quote
  8. 0 diggs+0 / -0+1-1
    Denis | #8
    Oct 24th, 2008 at 13:42

    这个叫做 CSS Sprites 技术，详细可以看这篇文章
    http://realazy.org/blog/2007/10/08/css-sprites/

    Reply | Quote
  9. 0 diggs+0 / -0+1-1
    underone | #9
    Oct 24th, 2008 at 15:04

    所以我一直想重写G7v1，之前太不靠谱了。。。

    Reply | Quote
  10. 0 diggs+0 / -0+1-1
    饭后网 | #10
    Oct 24th, 2008 at 20:05

    原来分析Digg的时候就发现了他的图片都是做在一起的。

    Reply | Quote
  11. 0 diggs+0 / -0+1-1
    ucax | #11
    Oct 24th, 2008 at 21:35

    mg12 請問你首頁上方的公告訊息是用何種外掛？

    Reply | Quote
  12. 0 diggs+0 / -0+1-1
    mg12 | #12
    Oct 24th, 2008 at 22:37

    Zoll :

    呵呵 在研究很多博客的代码时候也发现了这个问题 不过自己还是嫌麻烦了点 :!:

    是啊, 所有我也很少用.

    Denis :

    这个叫做 CSS Sprites 技术，详细可以看这篇文章
    http://realazy.org/blog/2007/10/08/css-sprites/

    原来这还有个名堂, 呵呵~
    那篇文章很好, 受教了.

    underone :

    所以我一直想重写G7v1，之前太不靠谱了。。。

    重写吧, 大家都支持你!

    饭后网 :

    原来分析Digg的时候就发现了他的图片都是做在一起的。

    流量大的网张都这样做, 特别是雅虎.

    ucax :

    mg12 請問你首頁上方的公告訊息是用何種外掛？

    这是主题的功能, 我做的主题都有个控制后台, 可以修改公告信息.

    Reply | Quote
  13. +1 digg+1 / -0+1-1
    Sivan | #13
    Oct 24th, 2008 at 23:09

    这个技术很好，我觉得定位和编辑确实有点麻烦。
    我觉得还一个优点就是

    图片下载完，所有图标都能显示。分开存放，如果网络或者服务器有问题，经常出现个别图标无法显示的问题，不停刷新才显示的全。

    顺便问下mg12你这个用户体验的插件叫啥？能记录我的评论资料的这个。

    Reply | Quote
  14. 0 diggs+0 / -0+1-1
    mg12 | #14
    Oct 24th, 2008 at 23:15

    @Sivan
    这不是插件, 但实现并不困难. 你可以参考一下我以前的文章:
    http://www.neoease.com/wordpress-guest-post/

    Reply | Quote
  15. 0 diggs+0 / -0+1-1
    geno | #15
    Oct 27th, 2008 at 12:03

    呵呵，好久补习一下CSS。。厌烦了懂点皮毛

    Reply | Quote
  16. 0 diggs+0 / -0+1-1
    Yacca | #16
    Oct 27th, 2008 at 14:59

    @mg12
    收了...照着去改改自己的站 哈哈

    Reply | Quote
  17. 0 diggs+0 / -0+1-1
    CHENSHIAN | #17
    Oct 28th, 2008 at 13:06

    写的真好，我都有学习这个的冲动了，就是时间不宽裕，否则真该好好学学！

    Reply | Quote
  18. -1 diggs+0 / -1+1-1
    锐风 | #18
    Oct 30th, 2008 at 19:28

    哇哈, 很明显你是个完美主义.
    of course, me too!~ ;)

    Reply | Quote
  19. +1 digg+1 / -0+1-1
    锐风 | #19
    Oct 30th, 2008 at 19:30

    Reading blinds 果然强大!

    Reply | Quote
  20. 0 diggs+0 / -0+1-1
    Dianso | #20
    Nov 2nd, 2008 at 16:03

    原来是这样啊....
    我以前还觉得怪

    为什么那么多图标一个图就可以完成？

    Reply | Quote
  21. 0 diggs+0 / -0+1-1
    hiswing | #21
    Nov 11th, 2008 at 13:05

    这种方法是很好，不过就象你说的，太不方便。

    Reply | Quote
  22. 0 diggs+0 / -0+1-1
    K | #22
    Nov 29th, 2008 at 03:04

    学习，受教了……

    Reply | Quote
  23. 0 diggs+0 / -0+1-1
    jade | #23
    Mar 3rd, 2009 at 14:21

    good

    Reply | Quote
  24. 0 diggs+0 / -0+1-1
    枫子 | #24
    Mar 26th, 2009 at 18:04

    Zoll :呵呵 在研究很多博客的代码时候也发现了这个问题 不过自己还是嫌麻烦了点

    @hiswing

    hiswing :这种方法是很好，不过就象你说的，太不方便。

    :cry:

    Reply | Quote
  25. 0 diggs+0 / -0+1-1
    Sean | #25
    Apr 20th, 2009 at 14:52

    减少http请求 节省资源 呵呵！

    Reply | Quote
  26. 0 diggs+0 / -0+1-1
    mg12 | #26
    Apr 20th, 2009 at 17:25

    哈哈~ 发现 Yahoo! 的 CSS Sprites 做得很极限.

    Reply | Quote
  27. 0 diggs+0 / -0+1-1
    austin | #27
    Apr 25th, 2009 at 16:33

    啊哈，这种也有挺多讲究的

    Reply | Quote
  28. 0 diggs+0 / -0+1-1
    河南seo | #28
    Sep 1st, 2009 at 13:10

    先支持下，我这个blog http://www.liuyiwei.org.cn 一直都是用你的主题 。请教下今天刚发完一篇文章前台就出现左侧边栏掉到下面去了，看了首页代码也没找到什么原因，然后换了其他主题换了几个，都是同一个样，不知道是什么原因造成的，谢谢

    Reply | Quote
  29. +1 digg+1 / -0+1-1
    Calcifer | #29
    Sep 1st, 2009 at 18:09

    @河南seo
    检查下你发的文章是否有一些不封闭的标签

    Reply | Quote
  30. 0 diggs+0 / -0+1-1
    Bruce | #30
    Sep 2nd, 2009 at 10:12

    定位太麻烦了……加之网站制作过程中的图片基本上规则的不多……

    Reply | Quote
  31. 0 diggs+0 / -0+1-1
    shallen | #31
    Nov 22nd, 2009 at 14:20

    网站图片少的情况一般是不会用的，更省时

    Reply | Quote
  32. +1 digg+1 / -0+1-1
    加盟库 | #32
    Dec 10th, 2009 at 05:32

    @胡戈戈
    牛逼啊。

    Reply | Quote
  33. 0 diggs+0 / -0+1-1
    yeahlee | #33
    Dec 31st, 2009 at 21:43

    这是很常用的一种方法啦～

    Reply | Quote
  34. 0 diggs+0 / -0+1-1
    hpseo | #34
    Feb 8th, 2010 at 16:28

    有时候真的是这样的

    Reply | Quote
  1. Atman » 为什么将多个图标放在一个图片里?
    Oct 24th, 2008 at 23:11
  2. WordPress杂记周报第一期(0801) | 默默の丸
    Oct 26th, 2008 at 00:05
  3. 合众网络传媒 » 【转载】为什么将多个图标放在一个图片里?
    Dec 6th, 2008 at 09:47

Twitter Email feed
RSS feed