Het concept van sprites bestaat al een tijdje. Het is een van de meest gebruikte technieken in de game-industrie om het weergeven van animaties op een scherm te versnellen. In dit artikel zullen we in het bijzonder bekijken hoe deze techniek ons kan helpen de gebruikerservaring op webpagina's te verbeteren met behulp van CSS Sprites in de volgende volgorde:
- Wat is een sprite?
- Wat is CSS Sprite - een snel overzicht?
- Voorbeeld van hoe het helpt bij webontwikkeling?
- Voordelen van het gebruik van CSS-sprites
- Wat moet een ontwikkelaar doen wanneer hij met CSS Sprites werkt?
- Hoe maak je een CSS Sprite-blad aan?
- Hoe te werken met CSS Sprites?
- Bedrijven die CSS Sprites gebruiken
Wat is een sprite?
Een sprite is een enkele afbeelding die deel uitmaakt van een grotere scène in een game. Meerdere sprites worden vervolgens gecombineerd tot een grote afbeelding, een sprite-blad genaamd. Zodra een sprite-blad in het geheugen is geladen, worden verschillende sprites snel achter elkaar weergegeven om de illusie van animatie te wekken. Dit wordt tegelijkertijd gedaan voor tientallen tot honderden verschillende sprites om een scène in het spel te genereren.
Het basisidee is dat het veel sneller is om een afbeelding te laden en een deel ervan waar nodig weer te geven in vergelijking met het laden van meerdere afbeeldingen en deze weer te geven.
Wat is CSS Sprite: een snel overzicht?
Een CSS-sprite is een techniek die vaak door webontwikkelaars wordt gebruikt om de prestaties van webpagina's te optimaliseren. Bij deze techniek worden meerdere kleinere afbeeldingen, meestal van dezelfde afmetingen, gecombineerd tot een enkele grote afbeelding, een sprite-blad of tegelset . Dit sprite-blad wordt vervolgens gebruikt om individuele elementen weer te geven waar we ze nodig hebben.
Gewoonlijk zijn elementen zoals logo's, navigatiepijlen en knoppen opgenomen in het sprite-blad omdat ze bijna dezelfde afmetingen hebben en vaak worden gebruikt in een webpagina.
Voorbeeld van hoe het helpt bij webontwikkeling?
Over het algemeen worden tijdens het ontwerpen van webpagina's afbeeldingen opgeslagen en gebruikt als individuele bestanden. Dus wanneer een gebruiker een webpagina opent, moet de browser een HTTP-verzoek doen voor elk van deze bestanden, ze afzonderlijk downloaden en weergeven. Dit leidt tot hogere laadtijden van pagina's, aangezien een bepaalde webpagina een groot aantal kleinere afbeeldingen kan hebben, zoals knoppen, pictogrammen en logo's.
CSS-sprites helpen de ontwikkelaars om deze vaak gebruikte kleine afbeeldingen te combineren tot één grote afbeelding. De browser hoeft dan slechts één bestand te downloaden dat vervolgens wordt gebruiktgeef de gewenste sectie weer door de afbeelding te verschuiven.
Voordelen van het gebruik van CSS-sprites
Er zijn twee belangrijke voordelen van het gebruik van CSS-sprites ten opzichte van normale afbeeldingen:
Sneller laden van pagina's: Verbetert de laadtijd van de pagina, aangezien afbeeldingen die op de webpagina worden gebruikt, verschijnen zodra het blad is gedownload.
Hogere doorvoer en lager resourcegebruik: Niet alleen deze techniek verbetert de ervaring van de eindgebruiker door de pagina sneller te laten laden,maar het vermindert ook de netwerkcongestie omdat er minder HTTP-verzoeken worden gedaan.
Wat moet een ontwikkelaar doen bij het werken met CSS Sprites?
Bij het werken met individuele afbeeldingen kan de ontwikkelaar eenvoudig met HTML-tag werken en stijl het indien nodig in CSS. Maar wanneer je met CSS Sprites werkt, moet een ontwikkelaar twee specifieke dingen doen:
- Creatie van Sprite Sheet
Als de ontwikkelaar tijdens het ontwikkelen van een webpagina besluit CSS-sprites te gebruiken, moet hij / zij eerst het sprite-blad maken door alle gewenste elementen zoals knoppen, logo's, enz. Samen te voegen in een rasterachtig patroon. Dit kan worden gedaan met elk beeldbewerkingsprogramma zoals Photoshop of Gimp. Er zijn ook veel online tools beschikbaar die u helpen bij het maken van de sprite-sheet. Deze tools worden later in dit artikel besproken.
- Toegang tot een bepaald element van de sprite met behulp van de CSS achtergrondpositie eigendom
Zodra het sprite-blad klaar is, moet de ontwikkelaar CSS-attributen gebruiken om toegang te krijgen tot verschillende delen van het blad.
- breedte: Breedte van de sprite
- hoogte: Hoogte van de sprite
- achtergrond: Verwijzing naar het sprite-blad
- Achtergrondpositie: Offsetwaarden (in pixels) om alleen toegang te krijgen tot het vereiste deel van het sprite-blad
Hoe maak je een CSS Sprite-blad aan?
U kunt elke beeldbewerkingssoftware gebruiken om uw kleinere afbeeldingen in een raster te rangschikken, maar hieronder worden twee eenvoudigere methoden besproken:
1. Online tool voor het maken van sprite-sheets
KOPPELING: toptal.com/developers/css/sprite-generator/
hoe double naar int te converteren
Deze tool is niet alleen gratis te gebruiken, maar biedt je ook de vereiste CSS-code die kan worden gebruikt bij het verwijzen naar de sprite-sheet. Je kunt ook spelen met verschillende eigenschappen, zoals opvulling tussen de elementen en hun uitlijning veranderen.
2. Sprite-blad genereren met Sprity
Als je Grunt, Node of Gulp gebruikt, kun je een pakket genaamd Sprity installeren waarmee je een sprite-sheet kunt maken in verschillende formaten zoals PNG, JPG, enz.
Ten eerste moet u Sprity installeren met behulp van:
npm install sprity -g
Gebruik vervolgens de volgende opdracht om een sprite-blad te genereren:
sprity ./output-directory/ ./input-directory/*.png
Hoe te werken met CSS Sprites?
In dit voorbeeld zullen we het volgende sprite-blad gebruiken:
Zoals je in de bovenstaande afbeelding kunt zien, zijn zes pictogrammen (Instagram, Twitter en Facebook) gerangschikt in een rasterpatroon. In de eerste rij hebben we een normale toestand en in de tweede rij hebben we hun zweeftoestand (de afbeelding die verschijnt zodra we de muiscursor erop plaatsen).
Als je de sprite-sheet hebt gemaakt met behulp van de tools die we hierboven hebben besproken, weet je al welke offsets vereist zijn in de CSS, maar als je een andere tool hebt gebruikt of als je gewoon een sprite-sheet hebt gekregen, maak je dan geen zorgen, we zullen een methode bespreken die helpt u bij het verkrijgen van offsets voor het vereiste element.
Laten we nu een zeer eenvoudige manier bekijken om de vereiste offsets voor elk van de zes pictogrammen te krijgen door MS Paint te gebruiken. Het is misschien geen ideale oplossing om met sprites te werken, maar aangezien het de functie heeft die de coördinaten van de muiscursor levert, kan het worden gebruikt om de vereiste X- en Y-coördinaten te krijgen.
Open eerst je sprite-bladafbeelding (raster met alle kleinere afbeeldingen) en plaats je muiscursor in de linkerbovenhoek van de sprite die je wilt pakken.
Zodra je de coördinaten van het punt linksboven van je sprite hebt (Instagram-afbeelding linksboven), kun je deze specifieke sprite waar nodig weergeven met behulp van de CSS-code:
achtergrond: url ('img_sprites.png')
achtergrondpositie: 0 0
breedte: 125px
hoogte: 125px
We gebruiken breedte en hoogte als 125 pixels, omdat onze pictogrammen die dimensie hebben. Om de volgende afbeelding (Twitter) in dezelfde rij op te halen, gebruiken we de volgende code:
achtergrond: url ('img_sprites.png')
achtergrondpositie: -128px 0px
breedte: 125px
hoogte: 125px
Let op het kenmerk background-position in het bovenstaande fragment. (-128px, 0) betekent dat we onze sprite-sheet naar links verschuiven met 128 pixels (rekening houdend met opvulling tussen elementen) en 0 pixels op de Y-as. Als we het twitter-hover-pictogram zouden openen, zou ons kenmerk background-position zijn:
achtergrondpositie: -128px -128px
Op deze manier hebben we nu met CSS toegang tot elk onderdeel van ons sprite-blad. Laten we een volledige HTML- en CSS-code doornemen om te zien hoe u dit moet doen.
Stap 1: De vereiste HTML-code schrijven
In de onderstaande code voegen we eenvoudig drie links toe. We zullen ook onze HTML linken met de stylesheet (screen.css).
Stap 2: Het schrijven van de nodige CSS. Eerst zullen we onze gedeelde pictogramklasse opmaken. Hier kun je zien dat we verwijzen naar het sprite-blad dat we hebben gemaakt.
/ * Gedeeld pictogram Klasse * /
span.icon een link,
span.icon a: bezocht{
Scherm:blok
tekst streepje:-9999px
c ++ sorteert een array
achtergrond afbeelding: url (./ img_sprites.png)
achtergrond herhaling:geen herhaling
}
Stap 3: De afzonderlijke pictogrammen uit het sprite-blad halen met behulp van de offsets.
/ * Instagram-pictogram * /
span.instagram een link,
span.instagram a: bezocht{
breedte:125px
hoogte:125px
een sorteeralgoritme kan worden gebruikt om een set van ________ in ________ volgorde te rangschikken.
achtergrond-positie:0 0
}
/ * Twitter-pictogram * /
span.twitter een link,
span.twitter a: bezocht{
breedte:125px
hoogte:125px
achtergrond-positie:-128px 0
}
/ * Facebook-pictogram * /
span.facebook een link,
span.facebook a: bezocht{
breedte:125px
hoogte:125px
achtergrond-positie:-257px 0
}
Stap 4: De hover-pictogrammen uit het sprite-blad halen met behulp van de offsets.
span.instagram a: hover{achtergrond-positie:0 -128px}
span.twitter a: hover{achtergrond-positie:-128px -128px}
span.facebook a: hover{achtergrond-positie:-255px -128px}
Bedrijven die CSS Sprites gebruiken
Veel grote namen in de branche gebruiken CSS Sprites om het reactievermogen van hun websites te verbeteren. Bedrijven als Google, Facebook, Amazon gebruiken deze methode uitgebreid omdat dit hen helpt om het aantal HTTP-verzoeken per sessie voor een bepaalde gebruiker te verminderen. Dit is een enorm voordeel als we er rekening mee houden dat deze bedrijven op elk moment miljoenen klanten bedienen.
Nu je grip hebt op wat CSS-sprites zijn en hoe je ermee kunt werken, ben je een stap dichter bij je reis om CSS te leren. Concepten zoals sprites zijn een game-wisselaar in de huidige tijd, omdat het voor ontwikkelaars buitengewoon belangrijk is geworden om alle prestaties uit een webpagina te halen.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om met back-end en front-end webtechnologieën te werken. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de 'HTML-afbeeldingen' blog en we nemen zo spoedig mogelijk contact met u op.