如何阅读图像的块？

Question

许多网站都使用这种技术（Facebook，谷歌也是如此）

例如，打开facebook.com

保存此页面（不是* .MHTM，而是带图像的HTML）（平均登录页面）

它保存：

facebook_files（DIR） facebook.html（文件）

然后在文件夹中，您可以看到一个GIF文件，其中包含该页面的所有主要图像。

问题是：如何在一个文件中读取多个块？ 如何称呼这种方法？

Answer 1

这些图像被称为“精灵”。看看它们this article。

基本思想是，无论何时你想使用精灵中的图像，你都有一个只显示大精灵图像部分的元素。因此，页面中的每个“图片”实际上都是div，此图片作为背景，只是偏移，因此正确的部分显示出来。

主要优点是您的页面需要的请求更少，因此加载速度更快。

网上有一些工具可以更轻松地使用精灵。我没有使用它们，所以不能推荐一个，但使用工具可以为你节省大量的工作。

Answer 2

这就是你所谓的“精灵”，就像街机游戏中使用的精灵（一个角色的图像，它的位置不同）。基本上它是包含较小图像的一大块图像。

这种方法的优点是，不是100个不同的HTTP请求100个微小的GIF（这导致开销），你只需要请求一个包含这100个GIF的巨大图像。然后，不是每张图片都使用<img>，而是使用CSS background，然后使用background-position将正确的图片“对齐”通过容器以显示正确的图像。