Snabba upp laddningen med hjälp av sprites

Sprites är ett sätt att bygga ihop flera bilder till en större, en så kallad sprite map. Detta kan man ha mycket nytta av när det gäller grafik till en hemsida, som logotype och andra grafiska element som återkommer ofta. Detta för att spara laddningar från servern till besökarens dator eftersom det går snabbare att skicka en lite större fil än flera små.

I våra exempel kommer vi att titta på denna enkla sprite map:

sprites

Den är uppbyggd av flera bilder sammanfogade till en stor bild.

Men, varför går det snabbare att ladda en stor bild än flera små egentligen?

Om vi tittar på vår sprite map så är den 3425 bytes stor. Om vi däremot sparar alla 7 bilder som den är uppbyggd av så ser det ut såhär:

kamera-lg.png 2097 bytes
kamera-retro-rod.png 1342 bytes
kamera-retro.png 1339 bytes
kamera-rod.png 1370 bytes
kamera.png 1377 bytes
skarm-rod.png 1122 bytes
skarm.png 1122 bytes

Detta ger en total storlek av 9769 bytes, alltså nästan 3 gånger så stor som vår sprite map. Men det är inte allt! Det går också snabbare av en annan anledning: Vi bara gör ett http-anrop till server istället för flera och webbläsare har ett begränsat antal http-anrop som kan göras samtidigt och det är framförallt därför som sprites gör så stor skillnad.

Det man gör är att skapa en stor bild som innehåller alla element som man vill använda för att sedan med hjälpa av css visa valda delar av den stora bilden.

Vår sprite map innehåller 7 bildelement som vi nu ska använda var för sig med lite enkel css.

För att visa den lilla svarta kameran så skriver vi helt enkelt:

.sprite {
background:url('sprite.png') no-repeat;
}

.kamera {
width:39px;
height:34px;
background-position:-1px -1px;
}

Detta betyder att alla element som har klassen sprite kommer att få bakgrundsbilden sprite.png och alla element som får klassen kamera kommer att bli 39 pixlar bred, 34 pixlar hög och dess bakgrundsbild kommer att vara positionerad 1 pixel till vänster och 1 pixel uppåt. Detta för att bilden av den svarta kameran börjar i just den positionen i vår sprite map.

Sedan skriver vi html-koden:

<div class="sprite kamera"></div>

Då får vi ut detta som resultat:

 

Vi kan sedan bygga ut vår css för att kunna visa de andra bild-delarna också:

.sprite {
background:url('sprite.png') no-repeat;
}

.kamera {
width:39px;
height:34px;
background-position:-1px -1px;
}

.kamera-rod {
width:39px;
height:34px;
background-position:-1px -36px;
}

.kamera-retro {
width: 36px;
height: 32px;
background-position: -41px -2px;
}

.kamera-retro-rod {
width: 36px;
height: 32px;
background-position: -41px -37px;
}

.skarm {
width: 39px;
height: 34px;
background-position: -78px -1px;
}

.skarm-rod {
width: 39px;
height: 34px;
background-position: -78px -36px;
}

.kamera-stor {
width: 116px;
height: 101px;
background-position: -1px -71px;
}

Nu kan vi enkelt använda vår sprite map för att visa alla delar var för sig.

<div class="sprite kamera-retro"></div> blir:

 

<div class="sprite kamera-retro-rod"></div> blir:

 

<div class="sprite skarm"></div> blir:

 

<div class="sprite skarm-rod"></div> blir:

 

<div class="sprite skarm-stor"></div> blir:

 

Det vi praktiskt gör är att bara visar en del av en bild genom ett hål som vi bestämmer hur stort det ska vara (width och height) och vilka koordinater det ska ha (background-position). Så när vi skriver klasserna sprite och kamera-retro-rod så ser det ut som bilden nedan om man kunde se det som döljs med vår css.

sprites-cut

Utöver detta kan man jobba vidare med att definiera sprites för när man för muspekaren över bilden:

.kamera-retro {
width: 36px;
height: 32px;
background-position: -41px -2px;
}

.kamera-retro:hover {
background-position: -41px -37px;
}

Med denna kod blir retro-kameran röd när man för musen över bilden och ingen extra laddning sker eftersom bilden redan är laddad.

Det kan vara intressant att titta på större sprite maps och få inspiration på hur man kan utnyttja sprites till max. Titta t ex här på Googles sprite map:

google-sprite-122x300

Sprite maps kan man tillverka själv i t ex Photoshop, Gimp (gratis) eller någon annat bildbehandlingsprogram och helt enkelt räkna ut var dina olika sprites ska hamna på din sprite map.

Ett alternativ är att använda en av alla de verktyg som finns för att förenkla processen att skapa sprite maps som t ex SpritePad (gratis) där man drar in de bilder man vill ha med i sin sprite map och resultatet är både en sprite map och en färdig css med alla koordinater.