使用较大图像的 CSS 背景图像破解 (CSS Sprites)答案

【问题标题】：Css background image hack with larger images (CSS Sprites)使用较大图像的 CSS 背景图像破解 (CSS Sprites)
【发布时间】：2012-10-02 07:39:06
【问题描述】：

浏览器如何智能地实现“css 背景图像黑客”，这种技术在内存方面是否适用于更大的图像？

示例可以是这个页面（看例如加号图标）：
http://blueimp.github.com/jQuery-File-Upload/

加号图标并不是真正的 16x16px 图像，它更大（469px x 159px），实际上是这样的： http://blueimp.github.com/cdn/img/glyphicons-halflings.png
（或者这个：http://blueimp.github.com/cdn/img/glyphicons-halflings-white.png）

此图像用作图标模板，其中包含所有图标，并且在 css (http://blueimp.github.com/cdn/css/bootstrap.min.css) 中调整背景图像位置以仅显示图标模板的特定区域：
@987654325 @

如果图标更大怎么办，例如。大小为 150 像素 x 150 像素的缩略图和图标模板由 500 个图像组成？然后图标模板为 37500 像素 x 37500 像素。浏览器能否以合理的方式处理这个问题，或者每次加载这些缩略图更好，每个都在它自己的 http 进程中？

【问题讨论】：

标签： css background-image

【解决方案1】：

这种技术称为 CSS Sprites，它用于减少您的 http 请求，因此您的页面加载速度更快。

解释：

网站中使用的所有图像都放置在一个画布上，并且每个图像都使用background-position 属性进行映射，这样，http 请求就会减少，从而使您的网页加载速度更快。

假设你有 10 个<img> 标签调用 10 个不同的图像，因此浏览器需要 10 次请求 10 个不同的图像，因此增加 http 请求，如果所有这些图像都放在一个画布/图像（主要是透明的png），它只加载一次， CSS 处理其余的..

当您在悬停按钮或其他东西时使用图像时，这非常有用，因为它已经加载，您在悬停时不会看到轻弹...

For More Reference

【讨论】：

大图怎么样？如果画布是 37500px x 37500px 并且有 500 个大小为 150px x 150 px 的图标？
在制作精灵之前，您需要在您的网站上剪下您想要的适当图像，此外您也可以查看 CSS3 background-size:whateverpx whateverpx;
是的，如果您的网站流量增加，这很有用，它会增加页面加载时间，您只需要聪明地使用什么，使用 3-4 图像不会有很大的不同，如果你有很多图片，它确实有所作为，谷歌、Facebook 等流行网站广泛使用它，仅供参考，用作背景的图片不会被拖拽......
我明白这一点，但我的问题是“浏览器实现的智能程度如何......并且这种技术在记忆方面是否适用于更大的图像？”我不确定您的答案是否是当前问题的正确答案。
这里没有浏览器智能，只是css hack，浏览器也只是渲染你的指令，而是使用CSS的智能技术

【解决方案2】：

我进一步研究了这一点，并且需要这种名为 CSS sprites 的 hack（以及其他 hacky 优化：data-urls 中的 base64 图像、CSS/Javascript 连接），因为 HTTP 1.1 使所有调用同步 (source)。

此时（2012 年 10 月）这些类似的 hack 可能适用于每页有数百个 HTTP 调用的大型网站，但 HTTP 2.0 is coming 在几年内（我假设）支持更好的技术（例如异步调用）并使得希望这些黑客没有必要。

hack 的问题在于降低了可维护性，当 HTTP 2.0 最终出现时，可能需要删除所有 hack 以恢复适当的可维护性和/或充分受益于 HTTP 2.0 的优势if there are such)。在等待 HTTP 2.0 时，请考虑例如。 SPDY（根据recent news，这可能是 HTTP 2.0 的基础，但首先要仔细检查其他服务器模块是否不会干扰 SPDY 并遵循浏览器对 spdy 的支持如何增加（如果它完全增加的话）。或者如果你的网站只有几个或几十个 http 调用，请仔细考虑这些 hack 是否有足够的好处来弥补降低的可维护性。

【讨论】：