html - 移动站点使用 'Mega CSS Sprites' 有什么缺点？

Question

我正在为我的移动网站创建一个星座页面。

这里是图片资源的详细信息，我正在使用。

1. 有 24 (12+12) 张占星图(选择/悬停模式为 +12)
2. 每张图片的大小约为 >3.5kb。
3. 尺寸:106 x 108
4. 格式:png

现在我将它们中的每一个渲染为单独的图像文件。

我已经阅读了许多关于使用 Sprite 的建议，例如: http://alistapart.com/article/sprites和 Why should I use sprites on my mobile site?

但我的问题是关于专门针对“移动网站”使用“Mega CSS Sprites”及其缺点(除了维护)。

提前致谢。

Answer 1

除了可维护性，其他一些缺点包括:

1。由于错过了优化，许多 png 集的文件更大。

我在 Mac 上使用 Image Alpha ，它允许您通过限制它的调色板来压缩 png，我相信 Windows 有一个类似的工具。许多 png 可以限制为 256、128 甚至 64 种颜色而不会降低质量，因为它们的调色板并不广泛。

这通常会将文件大小减少 50% 或更多，而且您通常不能使用图像 Sprite 来做到这一点，因为合并了更多图像。

2。您失去了使用一些方便的 css 大小调整/放置技术的能力。

您不能使用诸如background: contain 和background: cover 之类的东西来调整背景图片的大小。

很难将背景图像置于框中，因为您不能使用 background-position: left center 等。

计算 background-size: 80% 等，也变得很棘手。您仍然可以，它只是在 sprite 表的大小发生变化时发生变化，并且您最终可能会根据位置显示 sprite 的其他部分。

3。加载可能速度较慢。

虽然请求较少，但浏览器必须下载更多数据才能使用 sprite 显示任何图像。这意味着右上角的 Logo 作为单个文件可能会显示得更快，因为它会在浏览器仍在请求其他文件时下载和显示。

我见过这种情况，但效果很少明显。

---

这些和可维护性开销的结合通常使我无法使用大量的 sprite 图像，尽管我仍然通常将默认和悬停状态组合到一个 sprite 或一组具有相似调色板的相关图像中。