Begreppet sprites har funnits ett tag nu. Det är en av de mest använda teknikerna i spelbranschen för att påskynda processen att visa animationer på en skärm. I den här artikeln kommer vi särskilt att titta på hur denna teknik kan hjälpa oss att förbättra användarupplevelsen på webbsidor med hjälp av CSS Sprites i följande ordning:
- Vad är en Sprite?
- Vad är CSS Sprite - en snabb översikt?
- Exempel på hur det hjälper i webbutveckling?
- Fördelar med att använda CSS Sprites
- Vad en utvecklare måste göra när han arbetar med CSS Sprites?
- Hur skapar jag ett CSS Sprite Sheet?
- Hur arbetar jag med CSS Sprites?
- Företag som använder CSS Sprites
Vad är en Sprite?
En sprite är en enda bild som ingår i en större scen i ett spel. Flera sprites kombineras sedan till en stor bild som kallas sprite-ark. När ett sprite-ark har laddats i minnet återges olika sprites i snabb följd för att ge en illusion av animering. Detta görs samtidigt för tiotals till hundratals olika sprites för att skapa en scen i spelet.
Grundidén är att det är mycket snabbare att ladda en bild och visa en del av den där det behövs jämfört med att ladda flera bilder och visa dem.
Vad är CSS Sprite: En snabb översikt?
En CSS sprite är en teknik som ofta används av webbutvecklare för att optimera webbsidornas prestanda. I denna teknik kombineras flera mindre bilder vanligtvis med samma dimensioner till en enda stor bild som kallas a sprite ark eller kakeluppsättning . Detta sprite-ark används sedan för att visa enskilda element var vi än behöver dem.
Vanligtvis ingår element som logotyper, navigationspilar, knappar i sprite-arket eftersom de nästan har samma dimensioner och ofta används på en webbsida.
Exempel på hur det hjälper i webbutveckling?
I allmänhet lagras och används bilder som enskilda filer under utformningen av webbsidor. Så när en användare öppnar en webbsida måste webbläsaren göra en HTTP-begäran för var och en av dessa filer, ladda ner dem separat och visa dem. Detta leder till högre sidladdningstider, eftersom en viss webbsida kan ha ett stort antal mindre bilder som knappar, ikoner, logotyper.
CSS-sprites hjälper utvecklarna att kombinera dessa ofta använda små bilder till en stor bild. Webbläsaren måste då bara ladda ner en fil som sedan användsvisa önskat avsnitt genom att kompensera bilden.
Fördelar med att använda CSS Sprites
Det finns två huvudfördelar med att använda CSS-sprites jämfört med normala bilder:
Snabbare sidladdning: Förbättrar sidans laddningstid när bilder som används på webbsidan visas så snart arket laddas ner.
Större genomströmning och lägre resursanvändning: Inte bara denna teknik förbättrar slutanvändarupplevelsen genom att göra sidan snabbare att ladda,men det minskar också trängseln i nätverket eftersom lägre antal HTTP-förfrågningar görs.
Vad en utvecklare måste göra när man arbetar med CSS Sprites?
När du arbetar med enskilda bilder kan utvecklaren helt enkelt arbeta med HTML-tagg och utforma den i CSS om det behövs. Men när man arbetar med CSS Sprites måste en utvecklare göra två specifika saker:
- Skapande av Sprite Sheet
Under utvecklingen av en webbsida om utvecklaren bestämmer sig för att använda CSS-sprites, måste han / hon först skapa sprite-arket genom att slå samman alla önskade element som knappar, logotyper etc. i ett rutnätsmönster. Detta kan göras med valfritt bildredigeringsprogram som Photoshop eller Gimp. Det finns också många onlineverktyg tillgängliga som hjälper dig att göra sprite-arket. Dessa verktyg diskuteras senare i den här artikeln.
- Få åtkomst till ett visst element på spriten med hjälp av CSS bakgrundsposition fast egendom
När sprite-arket är klart måste utvecklaren använda CSS-attribut för att komma åt olika delar av arket.
- bredd: Sprite bredd
- höjd: Sprite höjd
- bakgrund: Hänvisning till sprite-arket
- Bakgrundsposition: Förskjutningsvärden (i pixlar) för att endast komma åt den nödvändiga delen av sprite-arket
Hur skapar jag ett CSS Sprite Sheet?
Du kan använda valfri bildredigeringsprogramvara för att ordna dina mindre bilder i ett rutnät men två enklare metoder diskuteras nedan:
1. Online Sprite Sheet Creation Tool
LÄNK: toptal.com/developers/css/sprite-generator/
Det här verktyget är inte bara gratis att använda utan ger dig också den nödvändiga CSS-koden som kan användas när du refererar till sprite-arket. Du kan också leka med olika egenskaper som att stoppa mellan elementen och ändra deras inriktning.
2. Generera Sprite Sheet med Sprity
Om du använder Grunt, Node eller Gulp kan du installera ett paket som heter Sprity som hjälper dig att skapa ett sprite-ark i en mängd olika format som PNG, JPG, etc.
För det första måste du installera Sprity med:
npm installera sprity -g
Använd sedan följande kommando för att generera sprite-ark:
sprity ./output-directory/ ./input-directory/*.png
Hur arbetar jag med CSS Sprites?
I det här exemplet använder vi följande sprite-ark:
Som du kan se i bilden ovan har sex ikoner (Instagram, Twitter och Facebook) ordnats i ett rutnätliknande mönster. I den första raden har vi ett normalt tillstånd och i den andra raden har vi deras svävande tillstånd (bilden som visas när vi håller muspekaren över dem).
Om du skapade sprite-arket med de verktyg som vi diskuterade ovan vet du redan de förskjutningar som krävs i CSS men om du använde något annat verktyg eller om du helt enkelt fick något sprite-ark, oroa dig inte, vi kommer att diskutera en metod som hjälper dig att få förskjutningar för det nödvändiga elementet.
Låt oss nu se ett mycket enkelt sätt att få nödvändiga förskjutningar för var och en av de sex ikonerna med hjälp av MS Paint. Det kanske inte är en idealisk lösning att arbeta med sprites men eftersom den har funktionen som tillhandahåller koordinaterna för muspekaren kan den användas för att få de önskade X- och Y-koordinaterna.
Öppna först din sprite-arkbild (rutnät som innehåller alla mindre bilder) och ta med muspekaren i det övre vänstra hörnet av spriten som du vill ta tag i.
När du har koordinaterna för den övre vänstra punkten på din sprite (överst till vänster på Instagram-bilden) kan du visa den här specifika spriten var som helst med CSS-koden:
bakgrund: url ('img_sprites.png')
bakgrundsposition: 0 0
bredd: 125 pixlar
höjd: 125px
Vi använder bredden och höjden som 125 pixlar eftersom våra ikoner har den dimensionen. För att hämta nästa bild (Twitter) i samma rad använder vi följande kod:
bakgrund: url ('img_sprites.png')
bakgrundsposition: -128px 0px
bredd: 125 pixlar
höjd: 125px
Observera attributet bakgrundsposition i utdraget ovan. (-128px, 0) betyder att vi kompenserar vårt sprite-ark till vänster med 128 pixlar (med hänsyn till vaddering mellan element) och 0 pixlar på Y-axeln. Om vi skulle komma åt twitter-svävarikonen så skulle vårt bakgrundspositionsattribut vara:
bakgrundsposition: -128px -128px
På detta sätt kan vi nu komma åt varje komponent i vårt sprite-ark med CSS. Låt oss gå igenom en fullständig HTML- och CSS-kod för hur man gör det.
Steg 1: Skriva HTML-kod som krävs
I koden nedan lägger vi helt enkelt till tre länkar. Vi kommer också att länka vår HTML med formatmallen (screen.css).
Steg 2: Skriva nödvändig CSS. Först utformar vi vår delade ikonklass. Här kan du se att vi hänvisar till sprite-arket som vi skapade.
c ++ sortera nummer i stigande ordning
/ * Delad ikon Klass * /
span.icon en länk,
span.icon a: besökt{
visa:blockera
textindrag:-9999px
bakgrundsbild: url (./ img_sprites.png)
bakgrund-upprepa:nej-upprepa
}
Steg 3: Hämta de enskilda ikonerna från sprite-arket med hjälp av förskjutningarna.
/ * Instagram-ikon * /
span.instagram en länk,
span.instagram a: besökt{
bredd:125px
höjd:125px
bakgrundsposition:0 0
}
/ * Twitter-ikon * /
span.twitter en länk,
span.twitter a: besökt{
bredd:125px
höjd:125px
bakgrundsposition:-128px 0
}
/ * Facebook-ikon * /
span.facebook en länk,
span.facebook a: besökt{
bredd:125px
höjd:125px
bakgrundsposition:-257px 0
}
Steg 4: Få svävarikonerna från sprite-arket med hjälp av förskjutningarna.
span.instagram a: sväva{bakgrundsposition:0 -128px}
span.twitter a: sväva{bakgrundsposition:-128px -128px}
span.facebook a: sväva{bakgrundsposition:-255px -128px}
Företag som använder CSS Sprites
Många stora namn i branschen använder CSS Sprites för att förbättra responsen på deras webbplatser. Företag som Google, Facebook, Amazon använder den här metoden i stor utsträckning eftersom det hjälper dem att minska antalet HTTP-förfrågningar per session för en viss användare. Detta är en stor fördel när vi tar hänsyn till att dessa företag tjänar miljontals kunder vid varje tillfälle.
Nu när du har grepp om vad CSS-sprites är och hur du arbetar med dem, är du ett steg närmare på din resa för att lära dig CSS. Begrepp som sprites är en spelväxlare i dagens tid eftersom det har blivit oerhört viktigt för utvecklare att extrahera varje prestanda från en webbsida.
Kolla in vår som kommer med instruktörsledad liveutbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på bloggen 'HTML-bilder' så återkommer vi till dig.