如何从存储在数据库中的图像创建CSS sprites？

Question

我有一个ASHX处理程序，用于显示存储在数据库中的图像。我以缩略图的形式显示图像，如果用户将鼠标悬停在其上，则显示完整尺寸。

如何在运行时组合图像以生成用于这种情况的CSS精灵？

如果可以做到，有没有人建议从哪里开始？

UPATE

似乎大多数人都说使用精灵并不是一个好的情况。我是精灵概念的新手，所以请耐心等待。

如果我每次都要在我的数据库的页面上加载30个缩略图，为什么将它们从服务器传递到客户端作为一个大图像而不是传递30个单独的图像是没有意义的？这会不会更快？这不是CSS Sprites的目的吗？

Answer 1

就浏览器而言，HTTP资源是一种HTTP资源，如果服务器通过从硬盘读取文件，从数据库中取出数据或者随机喷出内容来生成它，则无关紧要。数字生成器通过一种算法输出有效的PNG数据。

您只需正常生成数据中的图像。

也就是说，由于图像是内容，因此CSS将它们包含在文档中是不合适的工具。您应该使用<img>元素。

Answer 2

你有两个选择。

1. 您的处理程序可以动态组合从数据库获取的图像，并将整个图像发送到浏览器。

OR（我更喜欢这个）

1. 您可以在将图像上传到网站时创建合并图像。

第二个更好，因为转换只需要发生一次，因此意味着您只需要花费一次这些资源。它确实意味着你实际上存储了2个图像副本，但这很好。

<强>更新

我相信我误解了你想要做的事情。我以为你试图将缩略图与完整的图像结合起来。相反，您似乎真的在问如何组合所有缩略图。

在这种情况下，这更是一个坏主意。正如David Dorward所说，CSS用于控制布局。你在谈论内容。但是，除了语义问题之外，如果您想对布局进行调整，您将不得不修改代码，从而创建精灵。如果您决定拍摄35张图片怎么办？或者，改变做18？

通过精灵路线，您可以通过强制修改任何布局更改的代码来解决这个问题。

要涵盖最后一个问题：它会不会更快？可能不是。在这种情况下，您必须动态创建精灵，这会引入服务器开销，从而减慢所有速度。最多可能是在交货时间洗​​涤。在最坏的情况下，您会对服务器和开发性能产生负面影响。

Answer 3

结帐http://www.RequestReduce.com。它不仅自动创建精灵文件，而且还可以通过HttpModule动态执行，同时合并和缩小所有CSS。它还使用量化和无损压缩优化精灵图像，并使用ETags和Expires标头处理生成文件的服务，以确保最佳的浏览器缓存。设置很简单，只需要一个简单的web.config更改。请参阅我的blog post有关Microsoft Visual Studio和MSDN示例库采用它的信息。

Answer 4

我完全赞同大卫。只是关于大卫的最后一点的快速说明：这只是图像是内容的。但是，如果它们是布局的一部分，那么CSS将是合适的。

那就是说，用这个用例，精灵不是一个好选择。缩略图的目的之一是减少加载时间，精灵会使画廊更糟糕。一个更好的模式可能是使用灯箱或类似的两个图像而不是一个，更大的是按需请求。

Answer 5

Sprites不是一个好的解决方案。

为了回答您的更新，精灵是许多小图像的理想选择，其中新HTTP请求的开销超过了为小型png或gif发送的几个字节（例如16x16图标等）。对于较大的图像，随着下载时间的增加，HTTP请求的总体时间变得不那么重要了。

将图像打包到精灵中也意味着它们将执行一个更长的请求，而其他请求必须在它后面排队。如果重要的是快速显示缩略图，请确保在开始加载相同图像的任何较大视图之前先加载这些缩略图。

在初始页面加载时未显示的任何较大文件应该是后期加载（window.onload）或延迟加载（根据需要通过单击或悬停操作）。