Hoi janyep,
Stel dat het alle twee interface-elementen zijn, dan heeft het transparante img van het tweede voorbeeld niet echt een voordeel.
In het eerste voorbeeld kan je nl. bij de <span> een
title="..." attribuut opgeven met een tooltip, die de alt="..." vervangt.
- Als het tenminste de bedoeling van de alt="..." was om een tooltip te maken. Zo ja, dan zou die title="..." er ook in het tweede voorbeeld bij moeten, want een alt="..." is eigenlijk alleen bedoeld voor de alternatieve tekst als de browser geen image ziet (ofwel omdat het een pure tekstbrowser is, ofwel omdat het img niet gevonden kan worden).
- Hier is Internet Explorer weer de uitzondering: als er geen title="..." (met inhoud) of title="" (zonder inhoud, ook geen spatie) bij staat, toont IE altijd de alt-waarde als tooltip. De andere browsers laten alleen de title-waarde als tooltip zien, of niets: zoals het hoort.
- Als de alt alleen voor de toegankelijkheid en voor Google bedoeld was en een title-tooltip ongewenst is, dan kan je in het element van de sprite-afbeelding ook een stukje hidden tekst zetten.
Verder is het inderdaad vaak het handigste om content-afbeeldingen er als voorgrond-afbeelding in te zetten, zoals ThaDevil zegt.
Dan hoeft er o.a. geen nieuwe sprite gemaakt te worden als een content-image verandert (en hoeft ook de css voor de bediening van de sprite niet aangepast te worden).
Soms kan het echter de moeite lonen om toch content-images in een sprite te zetten, bv. als er vrij veel zijn die standaard terugkomen. Dan scheelt het enorm in pagina-snelheid om ze in een sprite te zetten, want dan hoeft er maar één traag http-request (van de browser naar de server) de deur uit te gaan i.p.v. veel voor de aparte afbeeldingen. En het scheelt ook in de overhead die bij elk image zit.
Aan de andere kant: als je voor de sprite je toevlucht moet nemen tot een jpg of png met 16 miljoen kleuren (omdat anders de kleuren van de onderdelen niet goed tot hun recht komen), kan die sprite een veel grotere bestandsomvang krijgen dan bv. 4 losse die elk met een 256 kleuren png toekunnen.
- Het aantal images speelt ook nog een rol: er kunnen er 4 à 6 gelijktijdig gedownload worden (met parallelle verbindingen), en dan zijn 4 kleintjes tegelijkertijd weer sneller binnen dan 1 grote die de hele rit moet uitzitten.
- Het blijft dus altijd een kwestie van wikken & wegen (en testen) wat het beste is.
En de uitsmijter: voor de puristen onder ons is het opgeven van een alt="Doctor Image" bij een transparant 1x1 gifje nogal gruwzaam!
[edit]O, een betere uitsmijter:[/edit]
- Ken je dit tooltje al: spriteme.org?
- Dat speurt automatisch alle images op een pagina af, geeft adviezen over het spriten ervan, en levert meteen de sprites ook!
Met vriendelijke groet,
CSShunter
