小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)

小图示优化 - ASP.NET Sprite and Image Optimization (Web Form)

 

透过 NuGet安装下面的套件，可以将您的小图示（icon）合并成一张图

透过 CSS Sprites的方式，减少浏览器跟Web Server之间的图档传递，藉此增加效率。

 

您常看见的 Google 涂鸦（特定节日，Google的标示会有一段动画）

也会用到这样的效果喔！

关于 CSS Sprites可以参阅下面两篇中文文章的说明：

http://www.techbang.com/posts/5803-today-google-doodle-css-sprites-principle

http://www.wibibi.com/info.php?tid=373

范例演练 -- http://www.w3schools.com/css/css_image_sprites.asp

 

 

 

https://www.youtube.com/watch?v=g52lgaUO8bQ 

 

在 NuGet里面，搜寻关键词「aspnetsprites」即可

这个套件可以用在 Web Form 或是 ASP.NET MVC

     （文末有 Demo分享的文章，就是介绍在MVC里面使用之）

 

安装完成后，会出现一个 App_Sprites目录

然后，我把几个「小图标」的图片，复制到这个新的 App_Sprites目录里面

（不要把你所有的图档，尤其是 "大图档" 通通摆进去。您还是回头把 CSS Sprites的观念厘清吧）

 

记得喔！要建置您的网站或项目，才会帮您处理

 

完成后，您可以看见 App_Sprites目录里面  多了一张新图片与CSS文件。

我放进去的十张小图示，被结合成一张大图档

 

 

以下使用 Web Form 说明

我们可以使用一个新的控件，名为 <asp:ImageSprite>

 

建议图片的路径，必须使用 ASP.NET的根目录，写完整，

从～符号写起，不然的话，结果可能出不来！

 

上图我刻意采用两种比对方法：

   上方，使用传统HTML的 <img>标签与 <asp:Image>来展示图片。

   下方，则使用新的 <asp:ImageSprite>控件

 

从执行结果来看，您可以发现两者的差异（如下图）

 

 

相关文章：

使用ASP.NET MVC的朋友  请看 Demo的大作 -- 

Sprite and Image Optimization 网站优化套件，无脑实做 CSS Sprite 的套件

http://demo.tc/post/783

 

这里有 YouTube教学影片（不过，因为版本略有小差异，仅供参考）

https://www.youtube.com/watch?v=URuuSlLZcX0

 

这篇文章也很清楚 http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx