I datorspelens och datorgrafikens barndom var användandet av stora bildfiler innehållandes en mosaik av småbilder stor. På så vis kunde man minimera antalet bildfiler och mängden utnyttjat RAM-minne. Eftersom allt går i cirklar är nu denna teknik i viss mån på väg tillbaka, fast den här gången beror det inte på våra datorer, utan på sådant som webben och små bärbara enheter med begränsade resurser (tänk din mobil).
När det gäller kommunikationsnätverk som Internet går det i många fall betydligt snabbare att ladda hem en stor fil än många små. För en hemsida med många småbilder och ikoner kan det därför vara en idé att klumpa ihop dessa till en så kallad sprite map för att på så vis kunna erbjuda en snabbare hemsida och en bättre webbupplevelse för ens besökare.
Lever vi som vi lär?
I detta fall, nej. Vår webbsida, loopia.se, skulle säkert kunna få sig en liten boost om vi klumpade ihop de mest använda bilderna till en och samma fil (sprite map).
Förstasidan på loopia.se består idag av 66 filer, varav 60 är bilder. Med en tjänst som Pingdoms Full Page Test går det enkelt att se att det inte är själva nedladdningen av filer som tar tid, utan väntan på att nedladdningen av varje enskild fil ska påbörjas (grön färg representerar väntetid och blå färg representerar tidsåtgången för själva nedladdningen).
Genom att minska antalet filer kan man således enkelt spara flera av dessa värdefulla tiondels sekundrar.
Så hur funkar det?
En sprite map är alltså en enda stor bild där alla småbilder som används på ens webbsida finns lagrade sida vid sida i en stor mosaik. När man sedan behöver använda en av dessa småbilder ”klipper” man ut önskad bild (sprite) ur sprite mapen och visar den i webbläsaren.
Konceptet är enkelt, men för att åstadkomma detta klippande och klistrande krävs lite HTML– och CSS-magi. Ett mycket enkelt exempel på hur du kan klippa ut tre småbilder ur en stor finner du nedan. Resultatet kan du se här.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>Exempel till Loopias blogg - Sprites</title>
<style type="text/css">
body {
font: 11px Verdana, Arial, Helvetica, sans-serif;
line-height: 15px;
}
.bild1 {
height: 16px;
width: 16px;
background: url(bild.png) no-repeat;
}
.bild2 {
height: 16px;
width: 16px;
background: url(bild.png) no-repeat;
background-position: -16px 0px;
}
.bild3 {
height: 16px;
width: 16px;
background: url(bild.png) no-repeat;
background-position: -8px -16px;
}
</style>
</head>
<body>
<p>Så här ser hela bilden ut (sprite mapen):</p>
<div>
<img src="bild.png" alt="" />
</div>
<p>
Detta är den första spriten (16 x 16 pixlar stor,
börjar på offset 0 x 0, övre vänstra hörnet).
</p>
<div class="bild1"></div>
<p>
Detta är den andra spriten (16 x 16 pixlar stor,
börjar på offset 16 x 0, övre högra hörnet).
</p>
<div class="bild2"></div>
<p>
Detta är den tredje spriten (16 x 16 pixlar stor,
börjar på offset 8 x 16, nedre centrum.
</p>
<div class="bild3"></div>
</body>
</html>
Som du ser ersätter vi varje img-tagg med en div-tagg där vi i CSS-koden angett en bredd, en höjd och en bakgrundsbild (hela sprite mapen). För att klippa ut önskad delbild (sprite) sätter vi en offset med background-position. Detta tillsammans med den fasta bredden och höjden, gör att vi kan klippa ut vad som helst ur sprite mapen.
I det ovanstående exemplet har vi alltså tre unika bilder som plockas fram ur en enda bild (sprite map). Då bilderna är så pass små (vilket ofta är fallet) blir sprite mapen dessutom mindre i filstorlek än om vi hade haft tre separata bildfiler. På så vis får vi en dubbel effekt i nedladdningen, eftersom den totala filstorleken är mindre och antalet bildfiler är färre än om du haft en separat fil för varje bild.
Allt detta är ju positivt, men finns det någon hake?
Ja, visst finns det sådana. Bland annat har div-taggar inget alt-argument vilket img-taggar har (med alt-argumentet kan du ange en beskrivning av vad en bild innehåller). Detta kan alltså vara något att tänka på i SEO-hänseende. Värt att notera är dessutom att varje gång du uppdaterar din sprite map, så behöver ju denna laddas ned på nytt av dina besökare. Om du har delbilder som du behöver uppdatera eller byta ut ofta, kan det vara en vits att lägga dem i separata bilder, då en stor sprite map kan vara tung att ladda ned.
För mer information om vad du kan göra med sprites, se gärna den detaljerade och välskrivna artikeln i ämnet på sidan A List Apart.
Har gjort många menysystem med denna teknik, funkar grymt! Även ur SEO-synpunkt.
En rikigt css klassiker vilket är bra på många sätt men ur SEO synvikeln går även det att lösa på smidigt sätt som enligt ovan.
Angående ALT i en img-tag,
Du kan använda title i div-taggen så får du ändå ett ”tooltip” när man ställer muspekaren öveer bilden.
Korkat. En av W3C:s rekommendationer är att webbsidor skall fungera med alla former av webbläsare – inklusive sådana som inte kan visa grafik. Således skall img-taggar användas och inte några slags fulhack med div.
Att tänka på är att bakgrundsbilder inte skrivs ut när man printar en sida på en skrivare (utan att ändra på inställningarna). Spriten bör därför bara användas för sådant som man ändå tänkt lägga in som background-image i css-filen.
Är det inte lite tokigt att använda div-taggar för att visa bilder? Hur ska en stackars screen-reader veta att det är en bild du försöker visa, så den kan berätta det för användaren? Och hur fungerar det om man har ställt in sin mobila webläsare på att inte visa bakgrundsbilder för att spara trafikmängd, men ändå vill se ”vanliga” bilder?
Om vi håller oss till att använda h#-taggar till titlar, p-taggar till paragrafer, img-taggar till bilder och table-taggar till tabell-data (och inte till att göra designer) så blir livet mycket lättare för alla.
Svenne: Det var inte det han pratade om. Ett tooltip när man håller muspekaren över bilden är title-attributets funktion, ja. I IE fungerar alt-attributet också, men det är ”fel”.
alt ska tillhandahålla ett alternativt innehåll när bilden inte kan laddas in. title ska tillhandahålla ett tooltip när man hovrar med musen.
Den hake som artikeln pratar om är att om inget alt-attribut finns så visas inget för de som på ett eller annat sätt inte kan se bilden i sin webbläsare, eller för sökmotorer.
Nu kan man ju dock, om alternativt innehåll tjänar något syfte (ibland är det svårt att tänka sig en beskrivande text för vissa små bilder osv) eller för ren SEO, använda sig av text-indent: -3000px; eller liknande i CSS:en. På så sätt förskjuts textens position så att den alternativa texten finns där men inte syns grafiskt. Användare med handikapp eller sökmotorer snappar upp den ändå.
Tobbe: Givetvis ska inte detta användas för vanliga bilder. Det används till bakgrundsbilder, menyer med rollover, flashiga hörn, anpassade punktlistor och liknande i designen… Dvs små bilder som det finns alldeles för mycket av. Loggan och vanliga bilder kan man kosta på sig att lägga in med vanliga img taggar.
Tyvärr är det fortfarande många som använder Internet Explorer 6, dom inte stöder bakgrunds positionering.
Resultatet blir istället att bilden inte visas alls.
Visst kan det vara bra att använda denna metod ibland, men man måste ju ta hänsyn även till gamla webbläsare.
Likaså är det ju mycket dumt att inte kunna använda alt taggen med denna metod.
Vervas riktlinjer har ju ändrats så dekorationsbilder av all typer och slag SKALL INTE ha någon ALT-text… Bara direkt informationsbärande bilder skall ha en sådan.
#9 Micke.
Jo, IE6 stöder positionering av bakgrundsbilder.
Ser att många klagar över att det är en DIV. Det är enkelt att lösa. Använd ett IMG element istället och använd CSS2-attributet ’clip’. Funkar dock endast om bilden är absolutpositionerad.
Nu går tekniken framåt och alla sidor är inte gjorda för alla läsare, Tex: IE6, mobil webbläsare och screen readers och jag ser absolut inget fel i att använda sig av Sprites för uppnå önskad effekt. Vill man skriva ut en sida går det att skapa en css fil för detta.
Se framåt inte bakåt.