Artiklar » .NET 4.0 » Generera CSS Sprites i ASP.NET

 
 

Generera CSS Sprites i ASP.NET

Författare: vimpyboy
Datum: den 10 augusti 2010
Antal lästa: 2972
Ej stjärnmärkt

Något man väldigt ofta använder sig utav på hemsidor är små ikoner som används för att ge ett trevligare utseende på länkar och annat. De här små ikonerna brukar läggas in antingen som en bakgrundsbild för länkarna, eller som separata bilder. Oavsett vilket av dessa man väljer så laddas varje bild in för sig, vilket skapar ett antal extra anrop. Då en webbläsare bara kan göra ett visst antal anrop åt gången mot webbservern så leder det till att det kan ta ett tag innan alla bilder och annan information har laddats in. För att lösa det här så kan man använda sig utav CSS Sprites.

CSS Sprites går ut på att man använder en och samma bild för att visa olika bilder på sidan. Istället för att ha alla bilder i separata filer så lägger man dessa bredvid varandra. När man sedan hämtar in bilden så behöver man bara göra ett enda anrop mot servern. När man vill visa rätt bild så får man använda CSS för att flytta fokus till den enskilda bilden.

Ett exempel där det används är på Google.com. Där används en och samma bild för logon samt alla små ikoner som används. På så vis slipper man ladda ned alla bilder för sig:

Klicka för att se bilden i full skala...


Det här är ett ganska vanligt sätt att lösa det på då det ger bättre prestanda.
Det finns dock vissa nackdelar med att använda CSS Sprites. Det kan vara svårt att uppdatera de bilderna som används och det kan vara klurigt att få bilderna på rätt plats.
För att enkelt kunna använda den här funktionaliteten utan att behöva göra en massa extra jobb så har Microsoft utvecklat en ny kontroll som kan användas med ASP.NET Web Foms, MVC och Web Pages. Det den här kontrollen gör, är att den tar alla bilder i en viss mapp och slår ihop dem. Sedan genereras en CSS-fil med alla klasser som behövs för att visa upp bilderna. Vi får dessutom en genererad bild direkt på sidan med en Helper.

För att kunna använda den här nya kontrollen så behöver vi först och främst ladda ned filerna som behövs. Projektet har öppen källkod (under beta-stadiet enbart en licens för previews av ASP.NET, vilken enbart låter en kika på koden och inte modifiera den), och kan laddas ned på CodePlex:
http://aspnet.codeplex.com/releases/view/50140

Det finns väldigt bra dokumentation att ladda ned där, vilken jag absolut kan rekommendera. Den tar upp vissa saker som jag inte kommer att använda mig utav här.

När vi nu har alla filer så skapar vi ett nytt ASP.NET MVC-projekt (jag använder ASP.NET MVC Preview 1 med Razor) och lägger till referenser till ImageOptimizationFramework samt ImageSprite.

För att bilderna och css:en ska genereras så behöver vi även lägga till det här i web.config:

Kod:
<httpModules>
  <add type="Microsoft.Samples.Web.ImageOptimizationModule" name="Microsoft.Samples.Web.ImageOptimizationModule"/>
</httpModules>



Nu har vi allt som krävs för att vi ska kunna använda oss utav nya kontrollen.

Jag kommer att använda mig utav tre olika bilder (hämtade från http://www.iconaholic.com):

Klicka för att se bilden i full skala...

Klicka för att se bilden i full skala...

Klicka för att se bilden i full skala...


De här bilderna vill jag sätta ihop till en enda och använda CSS Sprites för att visa rätt. För att kunna använda Sprites-kontrollen i ASP.NET så skapar jag en ny mapp som heter App_Sprites i roten för projektet och skapar i den en ny mapp som heter icons. Varje mapp i App_Sprites bildar en egen sammansatt bild och css, vilket gör att vi inte behöver ha en enda gigantisk sprite-bild.

För att få in dem normalt så kan jag använda det här:

Kod:
<ul>
  <li>
  <img src="/app_sprites/icons/calendar.png" />
  <a href="#">Link #1</a>
  </li>
  <li>
  <img src="/app_sprites/icons/card.png" />
  <a href="#">Link #2</a>
  </li>
  <li>
  <img src="/app_sprites/icons/folder.png" />
  <a href="#">Link #3</a>
  </li>
</ul>



Det som händer nu är att bilderna visas precis som vanligt, och tre olika anrop görs mot servern för att hämta dessa. Då jag vill använda Sprites så lägger jag istället till det här i head:

Kod:
@Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/icons/")



Och det här i body:

Kod:
<ul>
  <li>
  @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")
  <a href="#">Link #1</a>
  </li>
  <li>
  @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/card.png")
  <a href="#">Link #2</a>
  </li>
  <li>
  @Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/folder.png")
  <a href="#">Link #3</a>
  </li>
</ul>



Det jag gör är är att jag använder Image-helpern och skickar in sökvägen till original-bilden. Oavsett vilken av dessa jag kör med så får jag det här resultatet:

Klicka för att se bilden i full skala...


Ser vi på den HTML som har renderats så ser vi det här:

Kod:
<link href="App_Sprites/icons/lowCompat.css" media="all" rel="stylesheet" type="text/css" />



Och:

Kod:
<ul>
    <li>
        <img class="icons_calendar-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <a href="#">Link #1</a>
    </li>
    <li>
        <img class="icons_card-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <a href="#">Link #2</a>
    </li>
    <li>
      <img class="icons_folder-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
            <a href="#">Link #3</a>
    </li>
</ul>



Vi kan se att vi har fått en css-fil vid namn lowCompat.css. Den innehåller de css-klasser som sedan används för de olika bilderna. Vi har även en base64-sträng som src för alla bilder, och det är en genomskinlig bild på 1x1 pixlar som finns där som placeholder.
Skillnaden nu mot tidigare är att vi har ett enda anrop för alla tre bilder, istället för tre anrop som vi hade tidigare. Vi har även fått en bild vid namn sprite0.png som ser ut så här:

Klicka för att se bilden i full skala...


Det är de olika bilder som ska kunna visas upp. De tre ikonerna är tillsammans 16 KB, men den sammansatta bilden är på 15 KB, så vi har förutom färre  anrop även fått lite mindre data som ska skickas över.

Men hur kan vi sedan påverka det som renderas? Tänk om vi vill generera en jpg-fil med lite sämre kvalitet och en bakgrundsfärg?

För att få in inställningar för de olika sprites-bilderna som skapas så kan vi skapa en settings.xml-fil, vilken vi lägger antingen i /App_Sprites vilket gör att den ärvs nedåt, eller direkt i /App_Sprites/icons, vilket gör att den bara gäller för den mappen. För att testa detta så lägger vi till följande fil där:

Kod:
<?xml version="1.0" encoding="utf-8" ?>
<ImageOptimizationSettings>
  <FileFormat>jpg</FileFormat>
  <Base64Encoding>false</Base64Encoding>
  <Quality>20</Quality>
  <BackgroundColor>ff00ff00</BackgroundColor>
</ImageOptimizationSettings>



Vi ändrar filformat till jpg, sätter kvaliteten till 20 (ska vara 0-100 där högre är bättre kvalitet), samt sätter bakgrundsfärgen till ff00ff00, vilket ger en grön färg. Färgen sätts som ARGB, vilket betyder att 0000ff00 hade blivit transparent då de två första tecknen avgör transparens.

Uppdaterar vi sidan nu så får vi detta:

Klicka för att se bilden i full skala...


Vi har fått en mycket sämre kvalitet på bilderna, men samtidigt kan vi se att filstorleken är nere på 2 KB, vilket är mycket mindre än tidigare. Det bästa är att ta så låg kvalitet som möjligt, utan att förstöra kvaliteten på bilderna för mycket.

Vi kan även på samma sätt använda det här med ASP.NET Web Forms och det nya ASP.NET Web Pages på samma sätt. Om vi vill så kan vi använda en ny ImageSprite-webbkontroll för Web Forms.
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan