[ALG] Hoe werken images sprites (met CSS)*

Deze techniek heeft vast een naam. Ik ken hem niet, maar ik zie hem steeds vaker.

Neem als voorbeeld Hyves.nl. Die hebben vandaag een totaal nieuw design doorgevoerd en lijken helemaal op facebook en zijn echt slecht bezig. Maar that's not the point.

Als ik op de menu balk bovenin rechter-muisknop doe end an 'achtergrond bekijken', zie ik een soort 'skin' png bestandje waar alle elementen bij elkaar staan.
Deze: (alhoewel ik niet weet of die link bij iedereen werkt) http://cache4.hyves-stati...ds/nav-trans.4f9c7dd4.png

Ik neem aan dat je bij een div de coördinaten van de achtergrond opgeeft en dat zo de background bepaald wordt. ( ? )

Facebook doet het ook
http://static.ak.fbcdn.ne...e/MegaSprite_5005_ltr.png

of tweakers:
http://tweakimg.net/g/if/v2/header/menu_buttons.png

Nou, genoeg voorbeelden voor iets wat velen hier heel logisch vinden.

Hoe werkt dit? Wat is het voordeel van deze techniek? Hoe heet het? Waar komt het vandaan? Is het de moeite waard om toe te passen?

Techniek heet 'CSS sprites'.

voordeel ervan is dat de rollover altijd klaar staat,
normaal kan je de afbeelding ook "vervangen", maar dan duurt het bij de eerste rollover even voordat de nieuwe image ingeladen is

Het voordeel hiervan is dat alle onmouseovers gepreload worden. En het scheelt natuurlijk een heleboel losse afbeeldingen.
Die van hyves is trouwens wel slecht Je moet alles zo dicht mogelijk op elkaar zetten t.b.v. de grootte van de afbeelding.

Voor zover ik weet is Google een beetje degene die dit heeft uitgevonden. Zij doen dit al superlang met de zoekmachine enzo.
http://www.google.nl/images/nav_logo6.png

offtopic:
Is sowieso wel eens leuk om met firebug te spelen bij google-websites. Moet je bij gmail bijv. eens een thema instellen en dan de bronafbeelding voor de ronde hoeken bekijken

Gersompie wijzigde dit bericht 02-07-2009 14:55 (41%)

Ok, duidelijk en logisch ook. CSS sprites zal ik zeker naar gaan kijken.

Maar deze dan?

http://www.google.nl/firefox/

de achtergrond:

http://www.google.nl/images/firefox/sprite2.png

waarom is die rechterkan verschoven?

quote:

Frash schreef op donderdag 02 juli 2009 @ 14:50:
Techniek heet 'CSS sprites'.

En het komt er kortweg op neer dat je in plaats van verschillende plaatjes één plaatje inlaadt en bij rollovers en dergelijke met aangepaste waarden voor left en top een ander gedeelte van het plaatje laat zien. Inderdaad met name om flikkeringen bij rollovers en dergelijke te voorkomen.

quote:

Gersompie schreef op donderdag 02 juli 2009 @ 14:52:
Het voordeel hiervan is dat alle onmouseovers gepreload worden. En het scheelt natuurlijk een heleboel losse afbeeldingen.
Die van hyves is trouwens wel slecht Je moet alles zo dicht mogelijk op elkaar zetten t.b.v. de grootte van de afbeelding.

Voor zover ik weet is Google een beetje degene die dit heeft uitgevonden. Zij doen dit al superlang met de zoekmachine enzo.
http://www.google.nl/images/nav_logo6.png

offtopic:
Is sowieso wel eens leuk om met firebug te spelen bij google-websites. Moet je bij gmail bijv. eens een thema instellen en dan de bronafbeelding voor de ronde hoeken bekijken

Holy shit, dat ik dat nog nooit gezien heb :-) Wat geniaal.

De voornaamste reden is overigens niet preloading, maar performance. Het scheelt een enorme bak requests naar de server, wat bij sites als Google en Facebook een flinke slok op een borrel scheelt (misschien zelfs wel een paar servers minder).

Voor de gemiddelde site is het vaak iets minder zinvol, want het kost wel iets meer tijd om te implementeren en in onderhoud dan losse afbeeldingen. Al kan het voor met name CSS-hovers natuurlijk wel flikkeringen voorkomen.

Bosmonster wijzigde dit bericht 02-07-2009 15:02 (9%)

quote:

Gersompie schreef op donderdag 02 juli 2009 @ 14:52:
Het voordeel hiervan is dat alle onmouseovers gepreload worden. En het scheelt natuurlijk een heleboel losse afbeeldingen.
Die van hyves is trouwens wel slecht Je moet alles zo dicht mogelijk op elkaar zetten t.b.v. de grootte van de afbeelding.

Voor zover ik weet is Google een beetje degene die dit heeft uitgevonden. Zij doen dit al superlang met de zoekmachine enzo.
http://www.google.nl/images/nav_logo6.png

[ot]Is sowieso wel eens leuk om met firebug te spelen bij google-websites. Moet je bij gmail bijv. eens een thema instellen en dan de bronafbeelding voor de ronde hoeken bekijken [/ot]

Ik zie een heeele lange png van 1px breed ofzo?

quote:

y-pop schreef op donderdag 02 juli 2009 @ 14:56:
Ok, duidelijk en logisch ook. CSS sprites zal ik zeker naar gaan kijken.

Maar deze dan?

http://www.google.nl/firefox/

de achtergrond:

http://www.google.nl/images/firefox/sprite2.png

waarom is die rechterkan verschoven?

Omdat je plaatje zelf vierkant moet zijn, maar het logo komt wat hoger, plaatsbesparing dus .
Wanneer je het plaatje effectief gebruik offset je het gewoon wat naar boven. Zelf gebruikte ik dit tot nu toe enkel voor mouse-overs, maar ga het eens een stuk intensiever toepassen als ik die voorbeelden zo zie.

*edit* zonet even de ronde hoeken in gmail gechecked met opera dragonfly. Je moet eens spelen met die img url, ALLES is gewoon dynamisch gegenereerd, geniaal gewoon.

Boeboe wijzigde dit bericht 02-07-2009 15:09 (21%)

quote:

Bosmonster schreef op donderdag 02 juli 2009 @ 14:59:
De voornaamste reden is overigens niet preloading, maar performance. Het scheelt een enorme bak requests naar de server, wat bij sites als Google en Facebook een flinke slok op een borrel scheelt (misschien zelfs wel een paar servers minder).

Voor de gemiddelde site is het vaak iets minder zinvol, want het kost wel iets meer tijd om te implementeren en in onderhoud dan losse afbeeldingen. Al kan het voor met name CSS-hovers natuurlijk wel flikkeringen voorkomen.

Mwah, plaatjes zoals deze gebruik ik zelf eigenlijk steeds vaker. Het scheelt naast requests ook schijfruimte (met testjes zit ik tegen de 50% besparing op in bytes als ik 1 plaatje met alle onderlinge plaatjes vergelijk met alle plaatjes gewoon los).
Updaten vind ik juist stukken makkelijker, je hoeft iedere keer maar 1 plaatje te uploaden. Kleuren veranderen gaat zo zelfs wat makkelijker.

quote:

Boeboe schreef op donderdag 02 juli 2009 @ 15:02:
[...]


Omdat je plaatje zelf vierkant moet zijn, maar het logo komt wat hoger, plaatsbesparing dus .
Wanneer je het plaatje effectief gebruik offset je het gewoon wat naar boven.

*edit* zonet even de ronde hoeken in gmail gechecked met opera dragonfly. Je moet eens spelen met die img url, ALLES is gewoon dynamisch gegenereerd, geniaal gewoon.

Inderdaad.. Google is echt het perfecte voorbeeld van hoe je zoveel mogelijk in een png-skin-afbeelding kan proppen.
zie ook deze: http://s.ytimg.com/yt/img/master-vfl102488.png (hier snap ik dan alleen weer niet waarom er zoveel ruimte tussen die balken vanonder zit).

quote:

Boeboe schreef op donderdag 02 juli 2009 @ 15:02:
[...]


Omdat je plaatje zelf vierkant moet zijn, maar het logo komt wat hoger, plaatsbesparing dus .
Wanneer je het plaatje effectief gebruik offset je het gewoon wat naar boven.

Hoe zinvol is dat bij PNG compressie? Ik neem aan dat er gewoon RLE gebruikt wordt, waardoor 560x50 extra witte pixels niets kosten.

DOT wijzigde dit bericht 02-07-2009 15:10 (16%)

Bij PNG maken grote vlakken idd amper iets uit. Ik denk dat die paar bytes die je hooguit extra hebt wel opweegt tegen het feit dat alles overzichtelijker is.

Het staat ook al zo ongeveer in de naam van de Facebook afbeelding; megasprite

quote:

y-pop schreef op donderdag 02 juli 2009 @ 14:56:
http://www.google.nl/images/firefox/sprite2.png

waarom is die rechterkan verschoven?

Het Firefox logo steekt normaalgesproken een stuk uit boven de balk. Zoals Gersompie al aangaf gaat het erom de afbeelding zo klein mogelijk te houden. Anders zouden ze een heel stuk loze ruimte in hun afbeelding krijgen, wat toch weer een aantal bytes scheelt, zeker met een afbeelding die zo vaak wordt geladen.

Die van Hyves is idd een beetje raar Wel een goed idee om een transparante afbeelding te gebruiken en daaronder de background colors te laden, daar had ik nog niet aan gedacht

Edit: whoeps spuit11

Waar ik wel af en toe last van heb is dat er horizontaal 1px verschil zit tussen IE vs Firefox/Chrome/Opera. Zijn er meer mensen die hier last van hebben of ben ik gewoon iets vergeten te clearen?

Pendaco wijzigde dit bericht 02-07-2009 15:29 (21%)

quote:

Pendaco schreef op donderdag 02 juli 2009 @ 15:15:
Het staat ook al zo ongeveer in de naam van de Facebook afbeelding; megasprite


[...]


Het Firefox logo steekt normaalgesproken een stuk uit boven de balk. Zoals Gersompie al aangaf gaat het erom de afbeelding zo klein mogelijk te houden. Anders zouden ze een heel stuk loze ruimte in hun afbeelding krijgen, wat toch weer een aantal bytes scheelt, zeker met een afbeelding die zo vaak wordt geladen.

Die van Hyves is idd een beetje raar Wel een goed idee om een transparante afbeelding te gebruiken en daaronder de background colors te laden, daar had ik nog niet aan gedacht

Edit: whoeps spuit11

Waar ik wel af en toe last van heb is dat er horizontaal 1px verschil zit tussen IE vs Firefox/Chrome/Opera. Zijn er meer mensen die hier last van hebben of ben ik gewoon iets vergeten te clearen?

Hoe bedoel je 1px verschil? Als het goed is moet de achtergrond met harde css-background-pixel-positionering in alle browsers goed zijn..

quote:

TERW_DAN schreef op donderdag 02 juli 2009 @ 15:06:
[...]

Mwah, plaatjes zoals deze gebruik ik zelf eigenlijk steeds vaker. Het scheelt naast requests ook schijfruimte (met testjes zit ik tegen de 50% besparing op in bytes als ik 1 plaatje met alle onderlinge plaatjes vergelijk met alle plaatjes gewoon los).
Updaten vind ik juist stukken makkelijker, je hoeft iedere keer maar 1 plaatje te uploaden. Kleuren veranderen gaat zo zelfs wat makkelijker.

Bestandsgrootte en requests is niet zo heel boeiend bij een gemiddelde zakelijke website. Het onderhouden vind ik vaak iets lastiger, zeker als een plaatje ergens van grootte verandert. Daarnaast moet je overal de coordinaten van opzoeken/bijhouden. Dat maakt het zeker in een omgeving waar je soms met meerdere mensen aan een project werkt wat lastiger en onoverzichtelijker. Kleuren aanpassen gebeurt zelden, het ontwerp staat eigenlijk altijd al volledig klaar als ik eraan begin te werken.

Dat maakt dat ik het eigenlijk zelden toepas, omdat wij als bureau voornamelijk zakelijke sites bouwen.

Wil niet zeggen overigens dat ik het schuw. Als het nodig en nuttig is ergens pas ik het wel toe, maar dus niet per definitie voor ieder siteje dat we uit de grond stampen.

quote:

DOT schreef op donderdag 02 juli 2009 @ 15:10:
[...]

Hoe zinvol is dat bij PNG compressie? Ik neem aan dat er gewoon RLE gebruikt wordt, waardoor 560x50 extra witte pixels niets kosten.

PNG maakt voor zover ik weet geen gebruik van RLE compressie, maar van iets ingewikkeldere algoritmes. Neemt niet weg dat een volvlak kleur niet al teveel ruimte zal kosten. Ik zou dus ook eerder kiezen om wat meer ruimte tussen afbeeldingen te houden, zo kun je nog eens iets een paar pixels groter maken zonder het te moeten verplaatsen naar een ander deel van de sprite en zo een leeg vlak over te houden.

Bosmonster wijzigde dit bericht 02-07-2009 15:37 (26%)

Duidelijk verhaal en zeker interessant. Als het zoveel voordelen met zich mee brengt op gebied van bandbreedte en performance, zou er in een volgende css-versie nog verdere ondersteuning voor komen?

Zoals gezegd is dit een vrij arbeidsintensieve manier van werken en het komt mij best wel 'hackerish' over, om het zo maar te noemen...

Valt mee, gewoon goede tooling gebruiken.

Hou er overigens wel rekening mee dat er een hoger memory-gebruik met deze techniek meekomt, omdat browsers niet de gecomprimeerde image data renderen (en in geheugen houden) maar de uitgepakte bitmap. Zie http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ voor meer info.

vet man. ik kende het principe eigenlijk al van een tutorial-voor-ronde-hoekjes, maar had het nog nooit uitgebreidere manier gezien dan dat.. (stom eigenlijk).
een goede optie om eens van mijn knipperende rollovers af te komen :]

hmm, ik gebruik alweer een tijdje css-sprites, als je eenmaal door hebt hoe het werkt, maak je ze gemakkelijk met photoshop/paintshop.

Je spreekt een sprite aan met de CSS-code: background: url(../pad_naar/sprite.jpg) 12px -12px)

waarvan de 12px -12px, de horizontale/verticale offset berekent over de sprite,
beetje mee spelen met de getallen om je plaatje goed zichtbaar te krijgen.

je kunt hier meer over lezen hoe je deze zelf kunt maken:
http://www.alistapart.com/articles/sprites/

MrJey wijzigde dit bericht 03-07-2009 08:37 (25%)

Goed verhaal! Deze techniek heb ik nog nooit toegepast. Ik ga me er eens in verdiepen. Ik bouw niet van die grote sites, maar het is gewoon leuk om te kunnen

quote:

MrJey schreef op vrijdag 03 juli 2009 @ 07:36:
Je spreekt een sprite aan met de CSS-code: background: url(../pad_naar/sprite.jpg) 12px -12px)

Ik neem aan dat dat laatste haakje een ; moet zijn?
Er zit wel 1 nadeel aan deze techniek. Dat is wanneer je bijv. een div ter hoogte van 30 px een pictogram van 10px hoog als achtergrond wil geven. Dan moet je in de sprite-afbeelding boven en onder dat pictogram 10px wit of transparant maken.

Gersompie wijzigde dit bericht 03-07-2009 11:07 (28%)

quote:

Gersompie schreef op vrijdag 03 juli 2009 @ 11:06:
[...]

Ik neem aan dat dat laatste haakje een ; moet zijn?
Er zit wel 1 nadeel aan deze techniek. Dat is wanneer je bijv. een div ter hoogte van 30 px een pictogram van 10px hoog als achtergrond wil geven. Dan moet je in de sprite-afbeelding boven en onder dat pictogram 10px wit of transparant maken.

hmm, ik post nu op mijn werk, en daar staat er iemand anders ingelogd....mijn excuus.. (mrJey)
Dus geen cloon voor de duidelijkheid!

en niet tevergeten natuurlijk de ; na de laatste haakjes.

als je no-repeat toepast dan hoef je alleen ervoor te zorgen dat je sprite dezelfde kleur heeft als de div background

background: #FFF url(../pad_naar/sprite.jpg) 12px -12px;

of je maakt em transparant

Sch1sm wijzigde dit bericht 03-07-2009 12:06 (8%)