小圖示優化 - 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