ASP.NET MVC 3 网站优化总结(二)使用ASP.NET Sprite

来源:http://www.lidongkui.com/asp-net-mvc-3-website-optimization-summary-use-asp-net-sprite

网站中图片的加载是比较影响网站速度的，所以有必要对图片进行优化。今天我们看看在 ASP.NET MVC 3 中使用 ASP.NET Sprite 技术，关于 CSS Sprite 原理在这里不再阐述，可以参考下 CSS Sprites的使用。最终效果图如下：

现在就让我们看看 ASP.NET MVC 3 中实现 CSS Sprites，首先我们需要下载 Sprite and Image Optimization Preview 3，将三个 dll 文件Microsoft.Web.Samples.ImageOptimizationFramework.dll、Microsoft.Web.Samples.ImageSprite.dll和Microsoft.Web.Samples.SpriteHelper.dll添加到我们的 ASP.NET MVC 3 项目中，新建文件夹 App_Sprites，将我们需要生成 CSS Sprites 的图片放置在该文件夹中，运行项目就会自动生成 Sprite 文件：sprite0.png，同时生成了 CSS 文件：lowCompat.css、highCompat.css。如下：

.a-jpg
{
width:60px;
height:60px;
background-image:url(sprite0.png);
background-position:-0px -0px;
}
.c-jpg
{
width:60px;
height:60px;
background-image:url(sprite0.png);
background-position:-61px -0px;
}

当我们改变图片的名字时，CSS 中的样式名也会跟着改变，非常的方便。我们不一定要将图片放在 App_Sprites 中，大家可以在说明文档里看到相应的配置。

使用我们生成的图片时，首先引入 CSS 样式如下：

@Sprite.ImportStylesheet("~/App_Sprites/")

在需要显示图片时：

@Sprite.Image("~/App_Sprites/a.jpg")
@Sprite.Image("~/App_Sprites/b.png")

解析后：

<img class="a-jpg" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
<img class="b-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

可见，我们已经成功在 ASP.NET MVC 3 中实现了 Sprite，图片来自一个地址，在其他 ASP.NET 项目具体使用方法可以参考下 Scott 的 ASP.NET Sprite and Image Optimization。