前几天MS的ASP.NET小组推出了一个小组件：Sprite and Image Optimization Framework，用于生成Sprite CSS，及将小的图片生成一副大图。
下载地址：http://aspnet.codeplex.com/releases/view/50140
8189E6B8-FBE4-4F01-8F9F-5687C0EA9F59
下载后工程中有一个类库，一个ASP.NET WebForm示例以及一个ASP.NET MVC示例。
下面我们就看看ASP.NET MVC的示例：
图中所标记的图片都是来源于一个整张的图片：
~\App_Sprites\categories\sprite0.png
~\App_Sprites\popular\sprite0.png
而这个整张图片则是由Sprite and Image Optimization Framework自动以几个小图片合并并生成类似下面的CSS：
.popular_azureLogo
-
png{width:32px;height:30px;background
-
image:url(sprite0.png);background
-
position:
-
0px
0
;}
我们下面看看我们怎么在程序中使用这个工具吧。
1.在程序中建立一个名为App_Sprites的文件夹
在其中建立子目录每一个子目录中的图片文件将会自动合并成一个大文件，并且生成CSS。
图中框中的文件为小的图片文件，sprite0.png为自动生成后的大图片、highCompat.css/lowCompat.css为自动生成的CSS文件。
注：这两个CSS文件暂没有不同，但未来lowCompat.css可能只支持IE7-9、FF的主流浏览器，highCompat将支持其它。
settings.xml为配置文件：
<?
xml version="1.0" encoding="utf-8"
?>
< ImageOptimizationSettings >
< FileFormat > png </ FileFormat >
< Base64Encoding > false </ Base64Encoding >
< Quality > 80 </ Quality >
< BackgroundColor > 00000000 </ BackgroundColor >
< MaxSize > 500 </ MaxSize >
</ ImageOptimizationSettings >
< ImageOptimizationSettings >
< FileFormat > png </ FileFormat >
< Base64Encoding > false </ Base64Encoding >
< Quality > 80 </ Quality >
< BackgroundColor > 00000000 </ BackgroundColor >
< MaxSize > 500 </ MaxSize >
</ ImageOptimizationSettings >
其中FileFormat为大图片类型Based64Encoding为图片地址是否使用Base64编码，如果使用则生成的CSS可能如下：
.categories_azureLogo-png{
width:16px;height:16px;
background: url(data:image/png;base64,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) no
-repeat 0% 0%;}
width:16px;height:16px;
background: url(data:image/png;base64,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) no
-repeat 0% 0%;}
Quality为生成图片质量，BackgroundColor为背景色，默认透明，MaxSize为最大图片大小。
2.如何让这这些文件自动生成的
这个其中是靠添加Modules来完成的，也就是首次访问页面时就会自动生成大图片以及CSS，在System.Web节点上添加：
<
httpModules
>
< add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule" />
</ httpModules >
< add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule" />
</ httpModules >
或IIS7以上在System.WebServer节点上添加：
<
modules
runAllManagedModulesForAllRequests
="true"
>
< add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule" />
</ modules >
< add type ="Microsoft.Samples.Web.ImageOptimizationModule" name ="Microsoft.Samples.Web.ImageOptimizationModule" />
</ modules >
都可以达到效果。
3.如何使用
第一.引用生成的CSS
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/categories/") %>
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/popular/") %>
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/popular/") %>
指定到相应的文件夹就OK了，最终会根据访问者的浏览器，生成：
<
link
href
="App_Sprites/categories/lowCompat.css"
media
="all"
rel
="stylesheet"
type
="text/css"
/>
< link href ="App_Sprites/popular/lowCompat.css" media ="all" rel ="stylesheet" type ="text/css" />
< link href ="App_Sprites/popular/lowCompat.css" media ="all" rel ="stylesheet" type ="text/css" />
或使用highCompat.css的link标签。
第二 . 如何使用某生图片
如果要用img标签的话：
<%
: Microsoft.Samples.Web.ImageSprite.Image(
"
~/App_Sprites/popular/windowsLogo.png
"
)
%>
类似这样去用就可以了，会生成类似下面的标签：
<
img
class
="popular_mesh-png"
src
="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
/>
如果要直接使用CSS去引用，则可以使用指定的Class来规定Sprite的背景图片：
<
div
class
="categories_windowsLogo-png"
>
windows
</
div
>
则会在此标签的背景上显示大图片，并自动设定到要显示小图片的位移。
categories_windowsLogo-png
则表示要显示~/APP_Sprites/categories/windowsLogo.png
附原图一张：
