ASP.NET Sprites

Cand trebuie sa cream designul unui site avem nevoie de o mulțime de imagini. Pentru a scadea numarul de apeluri la server, putem sa încărcam aceste imagini inline( conținutul binar a imaginii se poate pune direct in HTML sau CSS, ca si in exemplul de mai jos:

.logo-png
{
  width:310px;
  height:155px;
  text-decoration:none;
  display:block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAACb…
}

Dezavantajul la aceasta solutie este faptul ca doar browserele mai noi suporta acest lucru( IE8+,FF 3.5+). Daca trebuie sa incarcam pagini de dimensiuni mari atunci aceasta solutie nu este tocmai buna, deoarece utilizatorul trebuie sa astepte pana cand se incarca tot continutul pentru a putea afisa partial pagina.
Pentru a rezolva aceasta problema aparuta, imaginile se pot pune intr-o singura imagine, iar prin intermediul CSS-ului sa afisam doar o portiune din imagine. Click pentru mai multe informații.
Dar ar fi frumos sa putem pune toate imaginile intr-un singur director din proiect, iar la compilare sa generam automat aceste imagini sprite care sa contina colectia de imagini. In ajutor pentru acest lucru ne vine Sprite and Image Optimization Framework Preview 2.
Pentru al putea folosii trebuie sa cream un director cu numele App_Sprites( putem configura si un alt director). In aceasta locatie adaugăm toate imaginile pe care dorim sa le procesam ca si sprites.
Apoi trebuie sa adaugam in web.config:

<system.webServer>
   <modules runAllManagedModulesForAllRequests="true">   
     <add type="Microsoft.Samples.Web.ImageOptimizationModule"
name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
   </modules>
</system.webServer>
 Optimize="true" />

Urmatorul pas este sa adaugam un fisier cu numele settings.xml in care sa definim urmatori parametrii:

• FileFormat - tipul de imagine care se va genera la sfarsit;
• MaxSize - imaginea maxima a unui sprite, cand aceasta dimensiune este depasita se genereaza un nou sprite;
• Base64Encoding - daca e setat pe TRUE, continutul imaginilor este adaugat inline( chiar daca este setat pe TRUE, se genereaza sprite-urile pentru browserele ce nu suporta acest mecanism;
• Quality - nivelul de compresie a imaginii generate;
• BackgroundColor - culoarea de fundal la sprite( in format ARGB);

Exemplu:

<ImageOptimizationSettings>
<FileFormat>jpg</FileFormat>
<Base64Encoding>false</Base64Encoding>
<Quality>100</Quality>
<BackgroundColor>FFFFFF</BackgroundColor>
<MaxSize>1024</MaxSize>
</ImageOptimizationSettings>

Daca avem mai multe subdirectoare, putem defini cate un fis. de configurare pentru fiecare subdirector. Pentru a adauga o imagine in pagina este nevoie sa folosim controlerul SpriteImage:

<asp:SpriteImage ID="casaSpriteImage"
runat="server"
ImageUrl="~/App_Sprites/images/casa.png"
Optimize="true" />

Gata, fara batai de cap avem acum sprites. Nu mai trebuie sa facem manual adaugarea imaginilor in imaginea folosita pentru sprite si nici nu mai este nevoie sa ne definim CSS-ul manual.
Si acum cum funcționează: La pornirea aplicatiei, se genereaza automat imaginile de tip sprite din directorul App_Sprites( sau din cel specificat). La modificarea folderului App_Sprites, framework-ul detecteaza schimbarea si regenereaza sprites si css-ul pentru acesta.
In functie de setari la client ajunge un img care contine inline continul binar sau un tag ce are setat o clasa CSS ce defineste sprite-ul. Este bine de stiu ca daca avem cache-ul activ continul inline nu se adauga la img ci la CSS( pentru a nu aduce pe client continul binar a unei imagini de doua sau mai multe ori).
Ceea ce trebuie stiut este ca acest framework poate fi folosit in proiectele de tip: ASP.NET, MVC si Razor. In cazul meu a funcționat fara probleme.