使用ASP.NET创建精灵图像

Question

我遇到了一个重大的性能问题.问题是在我的一个网站上有一个调用大约180个图像的滑块.这180个图像中的每一个都是由客户端浏览器通过个人URL下载的.它们是GIF和jpg的混合物,我想将它们组合成一个单独的图像; 因为透明度不是问题,所以最好是jpg.图像存储在SQL数据库中,并通过MVC控制器显示.我想这个精灵也可以通过MVC控制器创建,而不是更传统的通用ashx处理程序.

我做了一些谷歌搜索,并发现斯科特汉塞尔曼的博客文章.该帖子解释了如何组合检查图像,并通常做我想做的事情.它写于2005年,所以我很好奇是否有更好的方法.我一直在另一个项目上使用ImageResizer.我听了Hanselman先生的播客,该播客与该项目的创始人讨论了如何使用IIS和.NET调整图像大小.我从那个播客和我的经验中收集到,.NET和IIS中的图像处理可能会变得奇怪.

以这种方式调整图像到sprite是一个好主意吗？我不想要一个精灵生成器,我想要一个有效的方法将.gif和jpg组合成一个可以用作精灵的单个图像.

Answer 1

我不建议所有组合成一个单一的形象,你会耽误任何图像的"初次亮相",直到整个文件下载.最好让可见的东西尽快加载并优化其余的整体吞吐量.

例如,如果图像各自低于50KB,将它们组合为精灵图像可能是有意义的,但我建议一次组合10个.如果图像很小,每个像5KB,那么每次30个是合理的.

你有一系列的瓶颈值得担心

1. HTTP开销和并发连接限制(精灵图像有助于此)
2. 服务器吞吐量开销(可通过正确的磁盘缓存和边缘缓存解决)
3. 浏览器渲染开销(Sprites最适合图标和小缩略图;它们不应该是巨大的,尝试将其保持在100万像素以下).

将现有图像连接在一起并以jpeg形式重新压缩有时可以改善压缩,有时则会引入伪像.例如,混合线条艺术和照片是一个坏主意.Jpeg 在线条艺术上很糟糕.如果需要,可以使用PNG,甚至是PNG-8.有时您会发现100%质量的JPEG最终比GIF或PNG版本小,但大多数时候,艺术线条最好以PNG形式存储.

如果您拥有这些照片的ID,并计划使用磁盘缓存进行动态路由,则可以显着简化您的任务.

该ImageResizer库将让你在插入'到它的动态管道和磁盘缓存系统很容易.

在这种情况下,您将实现IVirtualImageProvider和IVirtualBitmapFile.有关生成位图并让管道处理其余部分的简单示例,请参阅Gradient插件.

您必须定义您的url语法并在FileExists和GetFile方法中查找它.像/combine-images.ashx?idlist=34,56,79,23&dir=horizo​​ntal&width=50&height=50之类的东西.

然后,您必须加载每个图像,使用Managed API将其调整为位图实例,然后在您分配的画布上绘制它.

您的大部分瓶颈可能都是从SQL中提取图像.如果你有在服务器上有限的RAM,串行方法可能比一个平行的一个更安全(即在从SQL时间内得到一幅图像,调整大小和绘制它,处理数据,前进).如果你的源图像很小,那么多线程的apprach可能没问题.请记住,即使磁盘已缓存,也需要快速启动,因为请求默认在30秒后超时.正确完成后,您应该可以在2秒内使用空磁盘缓存提供10个图像精灵,缓存后为20毫秒.

如果这看起来有点压倒性,我确实提供自定义插件开发,但有一个队列.

1个每个请求文件的方法有很多优点,在跳过Sprite的潮流之前,可能值得尝试使用ImageResizer的磁盘缓存和SqlReader插件.不是说这是错误的方法,但未缓存的MVC + SQL可能会增加很多可能有所贡献的开销.