Konseptet med sprites har eksistert en stund nå. Det er en av de mest brukte teknikkene i spillindustrien for å øke hastigheten på å vise animasjoner på en skjerm. I denne artikkelen vil vi spesielt se på hvordan denne teknikken kan hjelpe oss med å forbedre brukeropplevelsen på websider ved hjelp av CSS Sprites i følgende rekkefølge:
- Hva er en Sprite?
- Hva er CSS Sprite - en rask oversikt?
- Eksempel på hvordan det hjelper i webutvikling?
- Fordeler med å bruke CSS Sprites
- Hva en utvikler må gjøre når han jobber med CSS Sprites?
- Hvordan lage et CSS Sprite Sheet?
- Hvordan jobbe med CSS Sprites?
- Bedrifter som bruker CSS Sprites
Hva er en Sprite?
En sprite er et enkelt bilde som er en del av en større scene i et spill. Flere sprites kombineres deretter til et stort bilde som kalles sprite-ark. Når et sprite-ark er lastet inn i minnet, gjengis forskjellige sprites raskt etter hverandre for å gi en illusjon av animasjon. Dette gjøres samtidig for titalls til hundrevis av forskjellige sprites for å generere en scene i spillet.
Den grunnleggende ideen er at det er mye raskere å laste inn et bilde og vise en del av det der det er nødvendig, sammenlignet med å laste inn flere bilder og vise dem.
Hva er CSS Sprite: En rask oversikt?
En CSS sprite er en teknikk som ofte brukes av webutviklere for å optimalisere ytelsen til nettsider. I denne teknikken kombineres flere mindre bilder, vanligvis med samme dimensjoner, til et enkelt stort bilde som kalles a sprite ark eller flis sett . Dette sprite-arket brukes deretter til å vise individuelle elementer der vi trenger dem.
Vanligvis er elementer som logoer, navigasjonspil, knapper inkludert i sprite-arket, ettersom de nesten har samme dimensjoner og ofte brukes på en webside.
Eksempel på hvordan det hjelper i webutvikling?
Generelt sett lagres og brukes bilder under bruk av websider som individuelle filer. Så når en bruker åpner en webside, må nettleseren gjøre en HTTP-forespørsel for hver av disse filene, laste dem ned separat og vise dem. Dette fører til høyere sidetid, siden en bestemt webside kan ha et stort antall mindre bilder som knapper, ikoner, logoer.
CSS sprites hjelper utviklerne å kombinere disse ofte brukte små bildene til ett stort bilde. Nettleseren må da bare laste ned en fil som deretter brukes tilvise ønsket del ved å motregne bildet.
Fordeler med å bruke CSS Sprites
Det er to hovedfordeler med å bruke CSS-sprites fremfor normale bilder:
Raskere sideinnlasting: Forbedrer siden for lasting av siden når bilder som brukes på websiden vises så snart arket er lastet ned.
Større gjennomstrømning og lavere ressursbruk: Ikke bare denne teknikken forbedrer sluttbrukeropplevelsen ved å gjøre siden lastet raskere,men det reduserer også overbelastning i nettverket ettersom det blir gjort lavere antall HTTP-forespørsler.
Hva en utvikler må gjøre når han jobber med CSS Sprites?
Når du arbeider med individuelle bilder, kan utvikleren ganske enkelt jobbe med HTML-tag og styl det i CSS om nødvendig. Men når du jobber med CSS Sprites, må en utvikler gjøre to spesifikke ting:
- Opprettelse av Sprite Sheet
Mens utvikler en webside hvis utvikleren bestemmer seg for å bruke CSS sprites, må han / hun først lage sprite-arket ved å slå sammen alle de ønskede elementene som knapper, logoer, etc. i et rutenettlignende mønster. Dette kan gjøres ved hjelp av et hvilket som helst bilderedigeringsprogram som Photoshop eller Gimp. Det er også mange online verktøy tilgjengelig som hjelper deg med å lage sprite-arket. Disse verktøyene blir diskutert senere i denne artikkelen.
- Få tilgang til et bestemt element i spriten ved hjelp av CSS bakgrunnsposisjon eiendom
Når sprite-arket er klart, må utvikleren bruke CSS-attributter for å få tilgang til forskjellige deler av arket.
- bredde: Sprite bredde
- høyde: Sprite høyde
- bakgrunn: Henvisning til sprite-arket
- Bakgrunnsposisjon: Forskyvningsverdier (i piksler) for kun å få tilgang til den nødvendige delen av sprite-arket
Hvordan lage et CSS Sprite Sheet?
Du kan bruke hvilken som helst bilderedigeringsprogramvare for å ordne mindre bilder i et rutenett, men to enklere metoder er diskutert nedenfor:
1. Online Sprite Sheet Creation Tool
LINK: toptal.com/developers/css/sprite-generator/
Dette verktøyet er ikke bare gratis å bruke, men gir deg også den nødvendige CSS-koden som kan brukes mens du refererer til sprite-arket. Du kan også fikle rundt med forskjellige egenskaper, som polstring mellom elementene og endre justering.
2. Genererer Sprite Sheet med Sprity
Hvis du bruker Grunt, Node eller Gulp, kan du installere en pakke som heter Sprity, som vil hjelpe deg med å lage et sprite-ark i en rekke formater som PNG, JPG, etc.
For det første må du installere Sprity ved å bruke:
npm installer sprity -g
Bruk deretter følgende kommando for å generere sprite-ark:
sprity ./output-directory/ ./input-directory/*.png
Hvordan jobbe med CSS Sprites?
I dette eksemplet vil vi bruke følgende sprite ark:
Som du kan se i bildet ovenfor er seks ikoner (Instagram, Twitter og Facebook) ordnet i et rutenettlignende mønster. I den første raden har vi en normal tilstand, og i den andre raden har vi deres svevetilstand (bildet som vises når vi holder musepekeren på dem).
Hvis du laget sprite-arket ved hjelp av verktøyene vi diskuterte ovenfor, vet du allerede forskyvningene som kreves i CSS, men hvis du brukte et annet verktøy eller bare fikk noe sprite-ark, så ikke bekymre deg, vi vil diskutere en metode som vil hjelpe deg med å få forskyvninger for det nødvendige elementet.
cloudera sertifisert utvikler for apache hadoop
La oss nå se en veldig enkel måte å få nødvendige forskyvninger for hvert av de seks ikonene ved å bruke MS Paint. Det er kanskje ikke en ideell løsning å jobbe med sprites, men siden den har funksjonen som gir koordinatene til musemarkøren, kan den brukes til å få de nødvendige X- og Y-koordinatene.
Først åpner du sprite-arkbildet (rutenett som inneholder alle de mindre bildene) og tar med musepekeren øverst til venstre på spriten du vil ta tak i.
Når du har koordinatene til det øverste venstre punktet på din sprite (øverst til venstre på Instagram-bilde), kan du vise denne spesifikke spriten der det er nødvendig ved hjelp av CSS-koden:
bakgrunn: url ('img_sprites.png')
bakgrunnsposisjon: 0 0
bredde: 125px
høyde: 125px
Vi bruker bredde og høyde på 125 piksler, ettersom ikonene våre har den dimensjonen. For å hente neste bilde (Twitter) i samme rad, bruker vi følgende kode:
bakgrunn: url ('img_sprites.png')
bakgrunnsposisjon: -128px 0px
bredde: 125px
høyde: 125px
Legg merke til bakgrunnsposisjonsattributtet i utdraget ovenfor. (-128px, 0) betyr at vi utligner sprite-arket vårt til venstre med 128 piksler (tar hensyn til polstring mellom elementene) og 0 piksler på Y-aksen. Hvis vi skulle få tilgang til twitter-sveveikonet, ville bakgrunnsposisjonsattributtet være:
bakgrunnsposisjon: -128px -128px
På denne måten kan vi nå få tilgang til hver komponent i sprite-arket vårt ved hjelp av CSS. La oss gå gjennom en komplett HTML- og CSS-kode for hvordan du gjør det.
Trinn 1: Skrive den nødvendige HTML-koden
I koden nedenfor legger vi ganske enkelt til tre lenker. Vi vil også koble HTML-en vår med stilarket (screen.css).
Steg 2: Skrive nødvendig CSS. Først vil vi utforme vår delte ikonklasse. Her kan du se at vi refererer til sprite-arket vi opprettet.
/ * Delt ikon Klasse * /
span.icon en kobling,
span.icon a: besøkt{
vise:blokkere
tekstinnrykk:-9999px
bakgrunnsbilde: url (./ img_sprites.png)
bakgrunn-gjenta:nei-gjenta
}
Trinn 3: Få de individuelle ikonene fra sprite-arket ved hjelp av forskyvningene.
/ * Instagram-ikon * /
span.instagram en kobling,
span.instagram a: besøkt{
bredde:125px
høyde:125px
bakgrunn-posisjon:0 0
}
/ * Twitter-ikon * /
span.twitter en kobling,
span.twitter a: besøkt{
bredde:125px
høyde:125px
bakgrunn-posisjon:-128px 0
}
/ * Facebook-ikon * /
span.facebook en kobling,
span.facebook a: besøkt{
bredde:125px
høyde:125px
bakgrunn-posisjon:-257px 0
hvordan gå ut i java
}
Trinn 4: Få svingikonene fra sprite-arket ved hjelp av forskyvningene.
span.instagram a: sveve{bakgrunn-posisjon:0 -128px}
span.twitter a: sveve{bakgrunn-posisjon:-128px -128px}
span.facebook a: sveve{bakgrunn-posisjon:-255px -128px}
Bedrifter som bruker CSS Sprites
Mange store navn i bransjen bruker CSS Sprites for å forbedre responsen på nettstedene deres. Bedrifter som Google, Facebook, Amazon bruker denne metoden i stor grad, da dette hjelper dem med å redusere antall HTTP-forespørsler per økt for en bestemt bruker. Dette er en stor fordel når vi tar i betraktning at disse selskapene betjener millioner av kunder til enhver tid.
Nå som du har et grep om hva CSS-sprites er og hvordan du kan jobbe med dem, er du et skritt nærmere på reisen din for å lære CSS. Konsepter som sprites er en spillveksler i dagens tid, siden det har blitt ekstremt viktig for utviklere å hente ut hver bit av ytelse fra en webside.
Sjekk ut vår som kommer med instruktørstyrt liveopplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet på 'HTML Images' -bloggen, så kommer vi tilbake til deg.