精灵图的主要目的是减少页面上绘制元素时向服务器发送的http请求吗？还是你想尝试将尽可能多的元素放入精灵图中。
我的问题是：精灵图什么时候会太大呢？
8个回答
16
当用户在页面可以使用之前必须等待文件下载完成时，这会使页面过大。
- Diodeus - James MacFarlane
10
如果您正在使用PNG作为雪碧图的图像类型，需要记住每一行通常是独立于其他行进行压缩（deflated）的。
因此，为了平衡每个雪碧图中精灵的数量和图像大小，请尽量将相似的精灵水平排列在一起，以利用压缩。
PNG还支持“预测器”（predictors），它们仅存储预测值（基于前面的行和同一行中前面的像素）与实际值之间的差异。
寻找一个良好的图像编辑器，可以设置不同的PNG预测器压缩设置（或自动优化）来找到最适合您图像的设置。
- Kevin Newman
3
3找一个好的图片编辑器，允许你设置不同的PNG预测压缩设置（或自动优化），以找到最适合你的图片的设置。在实践中，这意味着在Photoshop中使用“保存为Web”选项。 - Wolfr
1“pngcrush” 值得一试——我曾看到它可以减小使用 PhotoShop 的“保存为 Web”命令保存的 PNG 文件的大小。它通过尝试许多不同的压缩设置来强制解决问题，并查看哪种结果可以生成最小的文件。Mac 上的 Acorn 在您将 PNG 保存为 Web 时会自动使用 pngcrush。 - Paul D. Waite
1若需要在OS X上快速、可靠地进行PNG压缩，请尝试使用ImageOptim：http://imageoptim.com/ - Doug Avery
7
主要目的是将页面上的图形元素请求合并到一个 http 请求中，以减少对服务器的请求次数。如果有很多小图片请求，就需要将它们合并成一个精灵图来获取。关于精灵图的大小问题，你需要关注所有请求的总和。只有当精灵图的部分之和（也就是精灵图本身）太大时，精灵图才会太大。
- Bill the Lizard
5
关于精灵图，您一定要查看下面这篇博客文章中关于内存使用的讨论：http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
我的建议：
- 只将图标行、按钮和重复的图片（如圆角渐变框）制作成精灵图。
- 其他内容不要动。
- 保持图像在500x500或100kb以下，并尽可能少地留下未使用的空间。根据情况使用.png或.gif格式。
- Wolfr
3
您可以将所有小的静态设计元素打包成一个主图像，而不会遇到大问题。
当然，如果您的网站上有1000万像素的照片，将它们打包在一起就是疯狂的。
- User
2
4如果你的网站每个页面都有10百万像素的照片作为静态元素，那无论如何都是不理智的。 - Paul Tomblin
3如果我是摄影师，我仍会为网站制作较小的图像，并保留完整分辨率的图像供单独、明确的下载使用。但这只是我的个人做法。 - RolandTumble
2
CSS精灵在包含除必要的UI元素以外的内容时会变得太大。这些是小的补充图像，如图标和徽标，其中压缩不会对质量造成太大影响。由于所有这些图像本来都将独立加载，因此您不会比单独请求它们更糟糕。如果加载时间过长，则问题并不在于精灵，而在于正确压缩您的图像。
- Andrew Noyes
1
是的，主要目的是减少请求（从而减少加载时间）。另一个优点是您只需要担心一个图像被正确缓存。提示：使用PNG图像，因为它们的压缩可以最好地处理大面积的白色（“空白”）区域。
- slosd
0
谷歌地图使用[256x256]像素的图片。
- Aleris
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接