为动态图像生成 CSS 精灵
我有一个网页，其中包含大约 20 - 50 个动态图像（从非静态源提供的图像）。这些图像通过基于请求 URL 的 servlet 提供。这会导致每个图像生成一个请求，从而导致性能下降。
如果这些图像是静态的，我将创建一个 CSS 精灵并用一个请求替换 50 个请求。由于它们是动态的，这当然不是那么容易。我正在寻找一个可以使用的工具/库/方法，以便在运行时将这些图像聚合到单个精灵中。幸运的是，图像大小是恒定的，并且对于所有图像来说都是相同的，这应该会使这变得更容易。
有什么建议吗？
I have a webpage which contains about 20 - 50 dynamic images (images served from a non-static source). These images are served through a servlet based on the request URL. This results in a request being generated per image, which leads to performance decay.
If these images were static, I would create a CSS sprite and replace the 50 requests with a single one. As they are dynamic this is not that easy of course. I'm looking for a tool/library/method that I can use in order to aggregate these images into a single sprite at runtime. Luckily image size is constant and the same for all, which should make this much easier.
Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以检查并尝试jawr（https://jawr.dev.java.net/）库用于在 servlet 上生成/修改（也压缩、合并）css 文件。它可以选择动态更改背景图像。
您可以安排捆绑包来切换 css 文件以更改皮肤。
优点：您还可以管理和排列您的 .js 文件！
You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically.
You may arrange bundles for switching css file(s) for changing skin(s).
Plus side: You can also manage and arrange your .js files too!
您可以通过调用系统命令行，使用免费的 ImageMagick 库附加图像，这样您就有了用 Java 编写的代码少了很多，而且速度更快。
要水平附加，请使用此命令：
要垂直附加，请使用此命令：
有关详细信息： http ://www.imagemagick.org/Usage/layers/#append
因此，使用 CSS，您可以使用具有简单偏移的单个图像来显示精灵（您可以使用 CSS“背景”属性来加载图像）并设置要显示的单个精灵的偏移量）。如果您只做简单的事情，则不需要 JavaScript。
You can append images with the free ImageMagick library, via a call to the system command line, so you have a lot less to code in Java and it is faster.
For appending horizontally, use this command:
For appending vertically, use this command:
For more informations: http://www.imagemagick.org/Usage/layers/#append
So, with CSS you can display the sprites using a single image with a simple offset (you can use the CSS "background" propriety for load the image and set the offset of the single sprite that you want to display). No JavaScript is required if you do only simple things.
服务器上的处理开销值得吗？
我现在正在考虑 C# 的问题，以减少创建动态图像并将其发送给客户端的复杂性为代价，同时减少单个图像访问。
值得进行一些分析的权衡。
Is the processing overhead on the server worth it?
I'm thinking about this now for C#, trading of the added complexity creating the dynamic images and sending them to the client, with the reduction in individual image accesses.
A trade off worthy of a bit of analysis.