Stel je voor dat je zes afbeeldingen gebruikt door je hoofdpagina-ontwerp en dat de browser deze afzonderlijk moet downloaden. Als ze worden gecombineerd tot slechts één afbeelding, kunt u de paginasnelheid aanzienlijk verlagen. Dit vermindert het aantal retourreizen dat nodig is om uw pagina weer te geven, waardoor uw site sneller wordt.
In plaats van zes afbeeldingen te downloaden, hoeft uw webpagina er nu slechts één te downloaden.
Dit is het mooie van CSS-sprites. Eén bron, maar meerdere toepassingen.
De meeste webpagina’s gebruiken verschillende kleine afbeeldingen in hun ontwerp. Achtergrondafbeeldingen, hoekafbeeldingen, pictogrammen, menu-items, enz. Deze kleine afbeeldingen tellen echt op als u ernaar kijkt vanuit het oogpunt van paginasnelheid.
Elke afbeelding moet worden gedownload, wat betekent dat de webbrowser de server erom moet vragen, de server deze moet verzenden en vervolgens moet de browser deze weergeven. Als dit alleen met één of twee afbeeldingen zou gebeuren, zou het prima zijn, maar naarmate meer en meer afbeeldingen worden geladen, is het slechter voor uw paginasnelheid.
De oplossing voor dit scenario wordt image sprites genoemd, die verschillende kleine afbeeldingen combineren tot één afbeelding, zodat de webpagina aanzienlijk sneller kan worden weergegeven.
Hoe afbeeldingen in CSS-sprites te combineren
Er zijn twee hoofdstappen die u moet nemen bij het maken van CSS-sprites. Eerst moet u de afbeelding maken en ten tweede moet u de afbeelding plaatsen.
Afbeeldingen combineren
We zullen hier een eenvoudig voorbeeld gebruiken. Laten we zeggen dat we twee afbeeldingen hebben die we op een webpagina willen weergeven voor stijldoeleinden en deze willen combineren in één. We moeten de grootte van de afbeeldingen weten om de sprite te maken. We zullen een voorbeeld gebruiken waarbij beide afbeeldingen dezelfde grootte hebben (50 pixels bij 50 pixels).
Om deze afbeeldingen te combineren, zouden we een afbeelding maken van 100 pixels bij 50 pixels. We moeten deze afbeelding iets noemen, laten we het “sprite.png” noemen. Nu we een gecombineerde afbeelding hebben, kunnen we wat we weten over de afbeelding gebruiken om deze correct weer te geven op onze webpagina.
De gecombineerde afbeelding heeft een breedte van 50 pixels en een hoogte van 100 pixels. Als zodanig kunnen we zeggen dat de eerste afbeelding (de megafoon) zich in de bovenste 50 pixels van de nieuwe afbeelding bevindt en dat de tweede afbeelding (smiley) zich in de onderste 50 pixels van de afbeelding bevindt. We kunnen deze kennis gebruiken om onze afbeeldingen correct op onze pagina te plaatsen. In wezen zullen we de bovenste helft van de afbeelding weergeven als we de megafoon willen en de onderste helft van de afbeelding als we het smileygezicht willen. Dit is hoe we dat gaan doen …
De afbeeldingen op de pagina plaatsen
Voor dit voorbeeld zullen we de afbeeldingen gebruiken als achtergrondafbeeldingen in divs. Dit betekent dat we lege div-tags in onze HTML maken om afbeeldingen weer te geven. als we wilden dat de megafoonafbeelding ergens op onze pagina zou verschijnen, zouden we een CSS div-klasse van “megafoon” kunnen maken …
.megaphone {breedte: 50 px; hoogte: 50px; background: url (images / sprite.png) 0 0px;}
De bovenstaande CSS-code zegt de breedte en hoogte van de megafoonafbeelding (50 px bij 50 px) en noemt de afbeelding ook “sprite.png”, wat onze gecombineerde afbeelding is. Ten slotte zegt het het deel “0 0px”, dat is hoe de sprite werkt. Door de afbeelding te vertellen dat hij moet beginnen bij “0 0px”, zegt hij dat de afbeelding moet worden weergegeven vanaf 0 pixels X en 0 pixels Y. Laat je hierdoor niet afschrikken en breng geen slechte algebra-huiswerknachtmerries aan. Het zegt echt “start de afbeelding bovenaan” en “start de afbeelding links”.
Omdat we de breedte en hoogte van de afbeelding in de CSS hebben gedefinieerd, zal de afbeelding slechts 50 pixels lager worden weergegeven (waar de megafoon is) en stoppen, waardoor het smileygezicht helemaal niet wordt weergegeven. Laten we nu het smileygezicht maken en kijken hoe dat onze code verandert. We zullen een CSS-klasse maken met de naam “smile” …
.smile {breedte: 50 px; hoogte: 50px; achtergrond: url (images / sprite.png) 0 -50px;}
Merk op dat we nog steeds dezelfde breedte en hoogte vermelden, we noemen nog steeds dezelfde afbeelding, maar wat we hebben gewijzigd, is het gedeelte “0 – 50 px”. Dit komt omdat we het beeld nu vertellen dat het ergens anders moet beginnen. we stellen met name dat de afbeelding 50 pixels lager (-50 px) moet beginnen. Dit komt omdat de smileyafbeelding pas begint als de onderste helft van de gecombineerde afbeelding, 50 pixels vanaf de bovenkant.
Nu de CSS klaar is, kunnen we gewoon een div in onze HTML aanroepen waar we de afbeeldingen willen weergeven. Waar we een megafoon willen, voeren we gewoon een lege div in genaamd “megafoon”
Wanneer we het smileygezicht willen, komen we in een div genaamd “smile”
Dat is de basis van het combineren van afbeeldingen in CSS-sprites, maar er zijn veel manieren om dit te doen en het is de moeite waard om te onderzoeken wat het beste is voor uw pagina’s. De bovenstaande tutorial was alleen om in het algemeen weer te geven hoe sprites werken en is geenszins een diepgaande bespreking van hen.
