Skip to content

Sprite CSS – Imagini in Sprite-uri CSS

Sprite CSS – pentru ca suntem specialisti in optimizarea site-urilor pentru o incarcare mai rapida in browsere si eliminarea erorilor, incercam sa explicam si ce inseamna “Sprite CSS”. Daca ati facut teste de optimizare cu Page Speed, cu siguranta ati avut indicatii de combinare a imaginilor. Aceasta modalitate de combinare a imaginilor mici si in special imaginile din template, reduc cererile HTML si site-ul se incarca mult mai repede. Imaginile care se incarca separat, se vor incarca dintr-o singura imagine cu valori X si Y. Acestea se pot defini in mod automat cu diverse tool-uri din Internet sau chiar cu “Paint”, de la Windows.

Aceasta combinare de imagini si localizarea in imaginea sprite (X/Y), cu optiunea CSS backgroun-pozition, nu este foarte usoara insa, daca cititi cu atentie acest tutorial, veti reusi sa aveti un site mult mai performant. Am sa iau ca exemplu un website de oferte cazare, care nu a fost optimizat si care incarca cateva imagini din CSS. Mai jos, aveti imaginea cu problemele din site:

Dupa cum vedeti in imaginea de mai sus, imaginile pe care ar trebui sa le combin sunt in numar de 9. Daca incarcarea imaginilor din CSS, sunt in numar mai mic de 5, erorile sau indicatiile de la Page Speed, nu vor mai aparea insa, este foarte bine sa le coombinam pe toate. Pentru inceput, voi scoate din site imaginile care trebuiesc combinate si le voi adauga cu Photoshop, intr-o singura imagine. Iata cum arata imaginea dupa combinare:

Codul vechi din fisierul CSS, arata asa:

span.searchfor{background:url(http://cdncazare.cazare-pro.com/cazare/skins/cazare/search_forbg.png) no-repeat left top;}

Noul cod va arata asa:

span.searchfor{background-image: url(“http://oferte-cazare.biz/imagini/oferte-cazare-sprite.png”); background-position: -10px -10px;}

Dupa crearea imaginii oferte-cazare-sprite.png, am salvato si am adaugato in folderul /imagini de pe server. Daca observati, calea catre imaginea respectiva este http://oferte-cazare.biz/imagini/oferte-cazare-sprite.png. Toate celelalte imagini vor avea acelasi URL, vor fi diferite doar locatiile in imaginea oferte-cazare-sprite.jpg si mai exact, prima imagine pe care am inlocuito a fost search_forbg.png. In noua imagine ea se gaseste la – background-position: -10px -10px; Urmatoarea imagine va fi la – background-position: -10px -60px;, adica ceva mai jos, imaginea cu steluta.

Dupa terminarea acestei operatii, am facut din nou un test cu Page Speed si procentul meu a crescut de la 81%, la 91%. Din punctul meu de vedere este o realizare. Daca incercam sa optimizam site-ul si tinem cont de anumite standarde, vom avea o incarcare rapida in browser si vom elimina chiar si erorile din site. Iata imaginea de final:

Back To Top