Wat is de CSS Sprite afbeeldingen techniek?
Maximale Web Performance, dat wil iedereen bereiken! Snelle laadtijden van pagina’s en hierdoor een betere vindbaarheid in de Google index. Dat kan al met een kleine techniek genaamd ‘CSS Sprite’. Het idee achter CSS Sprite is het combineren van meerdere afbeeldingen in 1 grotere afbeelding. Met CSS kiest men een locatie op de x- en y-as om net die ene afbeelding van pixel tot pixel te laten weergeven in de HTML pagina.
U maakt vast ook wel eens mee, dat een rollover-afbeeldling van een button pas na enkele seconde laad. Dit komt omdat deze hover-afbeelding nog niet was geladen bij het laden van de gehele website. Deze wordt nu pas geladen en staat nu pas in uw browser cache. Maar het is mogelijk om deze ‘delay’ te voorkomen en zelfs u gehele website te versnellen. We kunnen deze rollover-afbeelding ‘verstoppen’ in dezelfde afbeelding als de button zelf. Door de achtergrond-positie bij :hover te veranderen, wordt de rollover-afbeelding weergegeven die eerst niet zichtbaar was. U kunt ongelimiteerd afbeeldingen combineren tot één grote afbeelding.
- Groepeer meerdere afbeeldingen in een Sprite-afbeelding
- Naast elkaar, onder elkaar, zolang ze maar pixel perfect op elkaar aansluiten
- Zet de Sprite-afbeelding op in de CSS als achtergrond element
- Positioneer de afbeelding en geeft de vaste breedte en hoogte aan
- Geniet van de vele mindere HTTP requests op uw server, minder afbeeldingen worden aangeroepen en dat verbeterd de snelheid van uw website
CSS-Sprite met de Short-hand CSS techniek
Als de de combinatie van CSS-Sprite combineren met onze Short-hand CSS techniek, dan heeft u de optimale code voor het web! Als u de hover-afbeelding onder de normale heeft staan en ze hebben een hoogte van 36px, dan ziet de code er als volgt uit:
a.button { background: #FFF url(../images/spriteimage.png) 0 0 no-repeat; }
a.button:hover { background-position: 0 36px; }
De eerste ‘position parameter’ staat voor de pixels vanaf de linker kant. De 2e parameter staat voor de pixels van de bovenkant, ze het als een padding voor de achtergrond. Bij de hover blijft de afbeelding dus links uitgelijnd, maar gaat hij wel 36pixels omlaag. En vergeet niet de width en height erbij de plaatsen. Stel je hebt nog een afbeelding naast je gewenste afbeelding, dan zal deze ook worden getoond. Deze techniek werkt alleen voor vaste afbeeldingen, vaak voor iconen, knoppen en logo’s. Als u een herhalende achtergrond wilt, dan is dat met CSS-Sprite (nog) niet mogelijk. Van 2 HTTP-requests gaat u website nu al naar 1 minder, stelt u eens voor dat u 20 afbeeldingen in 1 Sprite-afbeelding plaatst. Kijkt u eens wat voor prachtig werkstuk Youtube ervan gemaakt heeft. Van het ophalen voor bijna 100 kleinere afbeeldingen, 100 requests bij de server per gebruiker, is dat nu maar 1 request geworden! Ga naar een CSS-Sprite generator om het zelf te proberen!
