CSS雪碧图基础图片的尺寸问题

Question

3

当使用CSS精灵时，图像的长度和宽度是否重要？我注意到SO精灵图像是一个长图像，所有精灵都在彼此上方。

SO image

将精灵组合在一起是否会提高性能？

- zsalzbank

3个回答

1

如果您能减小图像大小，它将提高性能。但我怀疑这样做不会显著提高性能，因为减小图像大小并不会减少请求的数量，而这正是使用精灵的原因。尽管如此，使用拨号上网的用户可能会注意到差异。

- Samuel

0

在某些情况下，这是可能的，因为多个不同的图像集合的大小比单个大图像要大。此外，将不需要为每个图像发送请求，所有所需的图像都将在单个精灵图像中可用。然后稍后您的CSS将剪切并使用所需的区域。

差异将在低带宽连接中注意到，其中每个图像都将以稍微有时间间隔的方式呈现，而基于精灵的CSS中，每个图像几乎同时显示。

- Shekhar_Pro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emmett · Accepted Answer

由于png的过滤/压缩算法的存在，大片均匀色彩的像素几乎不会对文件大小产生贡献。

将您的精灵垂直排列（类似于Stack Overflow），而不是将图标挤入完美的正方形，可能会带来更干净的CSS和更易维护的精灵，这种方式带来的微小文件大小成本可能是值得的。