Een techniek voor het sneller maken van websites is het gebruik van “Image sprites”. In dit artikel wat tips voor het opbouwen van deze image sprites.
Interessant voor: mensen/developers die al enige ervaring met html en css hebben en bekend zijn met het gebruikt van Photoshop en achtergrondafbeeldingen in css.
Wat is een Image Sprite?
Een Image Sprite is een png/jpg of gif-afbeelding met daarin allemaal losse afbeeldingen. Door deze slim in te delen, zie je op een webpagina allemaal verschillende afbeeldingen die niets met elkaar te maken lijken te hebben. In werkelijkheid staan deze allemaal naast elkaar in het zelfde bestand. Deze techniek wordt al jaren in games gebruikt, maar de laatste tijd ook op internet.
Achter een block-element (bv. een A, LI) kan je er met css een achtergrondafbeelding zetten. Deze is met css zo te positioneren dat je alleen het deel van de sprite ziet, dat jij wilt tonen.
Bijvoorbeeld code:
ul li {
background: url(http://www.occhio.nl/images/layout/occhio-bullet-sprite.png) no-repeat scroll -20px 7px;
}
- Voorbeeld: De bullet voor deze zin is onderdeel van een sprite met meerdere bullets
De beste image sprite tips
Bij Occhio gebruiken we deze technieken al jaren; tijd om wat van onze kennis te delen. Voor het maken van de sprite-afbeelding hebben we wat tips
- Gebruik een grid van 20px bij 20px (dus elke afbeelding komt met de linker bovenhoek op zo’n grid-punt te staan). Dat rekent makkelijker.
- Hou ruimte links of rechts voor elementen waarvan je de grootte van te voren (bijna) niet weet
- bv. bij een brede TD.(zet deze plaatjes aan de linker of rechter zijkant van de sprite)
- Begin linksbovenin met grote blokken en vul op met kleine
- Hou bij buttons altijd ruimte voor een ‘selected’ en ‘hover’-versie (ook al zit dat nu nog niet in het ontwerp.. het kan nog komen)
- Hou in de gaten hoe je de sprite opslaat (png/gif) ivm semi-transparantie van png-24′s die niet in IE6 werkt. Soms moet je een aparte IE6-sprite maken
- Om onverklaarbare redenen laden brede afbeeldingen sneller in dan hoge afbeeldingen. Zet items dus liever naast elkaar. (maar overdrijf het niet) (bron: Yahoo)
- Bij grote sites is het vaak beter om een aantal sprites te maken
- Je wilt niet een uur lopen zoeken naar een afbeelding in een sprite
- Groepeer afbeeldingen met dezelfde kleuren zodat je in je gif voor minder kleuren kan kiezen (= kleiner qua kb)
- Je wilt bezoekers niet heel veel onnodige afbeeldingen laten inladen
- Als je een sprite geupdate hebt, update de links ernaar zodat bezoekers niet de oude gecachede sprite te zien krijgen: dus
sprite.png?20090102-1345 -> sprite.png?20090102-1350 - Zet commentaar in je sprite-afbeelding, bv ‘default’, ‘hover’, ‘active’ bij de rijen buttons.
- Bewaar het bronbestand (bv de .psd) en gebruik deze als je later iets toevoegd. Anders krijg je elke keer dat je opslaat kwaliteitsverlies.
Not done
Overdrijf het niet. Hou je sprite praktisch. Als je een grote website hebt en slechts een klein deel van de bezoekers komt in een bepaalde sectie met specifieke afbeeldingen (bv de ‘blauwe sectie’) dan is het niet handig om deze blauwe afbeeldingen aan de algemene image sprite toe te voegen.
Hierdoor wordt de algemene image sprite behoorlijk zwaar (qua kb’s) en laat je iedere bezoeker dit extra gewicht inladen. Gebruik hier dus een aparte ‘blauwe’ sprite die alleen ingeladen wordt als bezoekers in de blauwe sectie zijn.
Lastig, lastig… Turbo turbo..
Een lastig geval is een element waarvan je de grootte niet van te voren weet. Bijvoorbeeld een LI (list-item/bullet), TD (tabelrij/-cel) of DD/DT.
- Deze kan over meerdere regels gaan als er een flinke tekst in komt.
- Optie 1: In de image sprite niets onder de bullet zetten.
- Optie 2: In de image sprite hou je veel ruimte onder de bullet. List items langer dan 300px komen bijna nooit voor. Tenzij je listitems met veel sublistitmes maakt.
- Echter, in de breedte heb je het zelfde dilemma:
- Optie A: In de image sprite niets rechts van de bullet zetten.
- Optie B: In de image sprite hou je veel ruimte rechts de bullet. List items breder dan 600px komen bijna nooit voor.
Welke combinatie en afmetingen je kiest, hangt af van het ontwerp van je website. Ik heb persoonlijk een voorkeur voor combinatie 2-A. En deze dan in een aparte bullet-sprite zodat je in je algemene sprite geen rekening hoeft te houden met het vrijhouden van ruimte of het aan de randen plaatsen van afbeeldingen.
Wees dus niet bang om om praktische redenen een extra sprite te beginnen. Vier sprites in plaats van één mega-turbo-sprite hebben is niet erg: vroeger was elk plaatje een apart bestand.
[...] je als webmaster niet de technische kennis om bijvoorbeeld gebruik te maken van ‘image sprites‘ of het minimaliseren en combineren van javascript bestanden dan zijn er voor diverse [...]