5

在我正在创建的网站上，我有大约 100 个不同的缩略图 (64x64)，它们在不同的时间显示。在某些页面上，可能只显示 5-15 个缩略图。在其他人身上，所有 100 个都已加载。

我正在考虑使用像 CSS sprites 这样的技术来显示图像。也就是说，不要为每个拇指使用图像标签，而是执行以下操作：

<span class=thumb1"></span>

然后使用 CSS 将所有拇指拼接在一起的单个图像切片。也就是说，一张包含所有 100 个拇指的图像（在这种情况下为 640x640 图像）。

我的问题：

  • 这是一个好主意吗？
  • 如果是，我应该在出现图像的所有页面上执行此操作，还是仅在包含所有图像的页面上执行此操作？
  • 除了精灵之外，还有其他技术可能比简单地包含带有 img 标签的图像更好吗？
4

3 回答 3

8

如果您认为普通用户会使用这些缩略图访问至少两个不同的页面，那么我认为使用精灵确实是个好主意！

实际上，我会用所有缩略图制作一个大图像，然后在所有页面中使用它！

为什么？

  • 更少的 http 请求（从 100 到 1）！这是关于网站优化的最重要的事情之一（从Yahoo Performance Team speed optimization rules阅读这里）
  • 这样，用户将仅在第一次下载整个图像，然后他们将在接下来的所有页面中快速加载该图像
  • 互联网上最著名的网站已经这样做了！查看在Yahoo、Amazon或Youtube页面中使用的精灵。
  • 您可以将其他 UI 或布局图像添加到您的精灵

优化生成的 PNG：

After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/

When not to use sprites:

  • When part of the images in the sprite change frequently
  • In this specific case: when the majority of users would need less than the (about) 10% of the images
于 2010-01-18T00:15:07.497 回答
2

我不太确定“精灵”是什么意思，但这就是我认为你的意思：不是单独创建 100 个图像，而是创建 1 个图像，具有 10x10 光栅。每个坐标 (x,y) 都包含您想要显示的图像之一。现在，如果你显示一个图像，你可以使用 CSS 来设置 background-location: 即x * -64px和y * -64px，也许使用 JavaScript 来计算每个图像跨度的 x 和 y，或者使用服务器端脚本来打印出动态 CSS。

  • 是的，这是一个好主意：它减少了加载时间，因为一个人只需要下载一个大图像，而不是数百个小图像。
  • 这取决于。如果您具有页面的缓存功能，则可以将所有缩略图“缝合”到一个图像文件中。如果您有一个非常动态的网页，那么每次更新缩略图时构建这个拼接图像是相当苛刻的。
  • 不确定，如果这是您对“精灵”的看法，那么不，如果您对“精灵”提出其他看法，那么是的：这个答案就是一个例子。
于 2010-01-17T22:07:08.200 回答
2

这是一个好主意，如果

  • 速度很重要

  • 您不关心可访问性（屏幕阅读器读取图像的 ALT 文本等，当您使用精灵时，所有这些都消失了）

  • 您不在乎默认情况下不会在任何浏览器中打印缩略图

  • 您可以做到这一点而不会成为维护的噩梦（哪个图像再次出现在位置 461 上？）

至于您的第二个问题，可能建议将所有精灵放入一个或很少的容器图像中，以最大限度地减少加载时间。

于 2010-01-17T22:08:21.750 回答