Fordele, ulemper og gode ressourcer til CSS Sprites
Jeg har tidligere snakket omkring CSS Sprites i mine indlæg omkring en struktureret tilgang til HTML og CSS. Siden da har jeg fået lidt mere indsigt i brugen af netop CSS Sprites. Det er disse erfaringer, jeg vil dele ud af idag. De er faringer jeg har lært er hovedsageligt sket her på min egen hjemmeside, derfor vil i også komme til at se, hvordan jeg har bygget mine CSS Sprites op.
Da det kan være lidt tricky at arbejde med CSS Sprites, så håber jeg dog også på, at læserne måske har yderligere erfaringer at byde ind med, hvis de tør? 
Indholdsfortegnelse
- Fordele ved CSS Sprites
- Ulemper ved CSS Sprites
- Se mine CSS Sprites
- Gode ressourcer
- Andre om CSS Sprites
- Konklusion
- Sig din mening om CSS Sprites
1. Fordele ved CSS Sprites
Der er gode fordele ved at benytte af sig af CSS Sprites. De kan være med til at gøre loadtiden på din hjemmesiden væsentlig hurtigere, fordi der ikke skal laves en lang række kald til serveren. Du synes måske ikke, det betyder noget, hvis der skal laves 50 kald for at hente 50 små billeder, men brugeren synes måske noget helt andet. Forestil dig en hjemmeside, hvor besøgstallet er ganske højt, og disse små billeder hele tiden bliver efterspurgt – hvad tror du så det betyder? Desmere vil det faktisk også gå hurtigere for brugen, hvis de skal hente få store filer frem for mange små filer.
Personligt finder jeg det bl.a. en fordel at benytte CSS Sprites til knapper. Forestil dig det scenarie, at du skal ændrer skrifttypen på 30 forskellige knapper på en hjemmeside. Forestil dig efterfølgende at skulle åbne 30 filer i Photoshop. Eller det kan også være, at du har været lidt på forkant og gemt alle knapperne i en fil, men hvad så, når du skal gemme alle 30 knapper? Jo vidst, så kan du lave en batch, men ville det ikke være sjovere bare at gemme alle knapper på en gang?
Jeg synes også det kan være en fordel, at kunne opgradere/ændrer i flere grafikelementer på engang blot ved at åbne en fil. Som i eksemplet ovenfor, så behøver du nemlig ikke at skulle gemme adskillige filer. Jeg bruger eksempelvis CSS Sprites her på min egen hjemmeside. De bliver bl.a. brugt til forskellige overskrifter, hvilket jeg forleden valgte at ændrer lidt på. Det var faktisk ret nemt, fordi det hele var samlet i en fil. Samtidig kunne jeg uploade et billede og efterfølgende trykke CTRL-F5 – og vupti – alle disse overskrifter var blevet ændret.
CSS Sprites ses også ofte anvendt til hover-effekter, hvor du vil skifte udseende på et menupunkt, et ikon eller noget helt tredje. Her fungerer de også ganske glimrende, fordi et nyt baggrundsbillede ikke skal downloades ved hover, men allerede på forhånd er blevet downloadet. Det betyder, at hovereffekt vil være smertefri og harmonisk. Netop denne teknik benytter jeg mig faktisk rigtig ofte af – ikke kun her på min egen hjemmeside. Teknikken er eksempelvis brugt på Apple’s hjemmeside til hovednavigationen, hvor det samlede baggrundsbillede ser således ud. Dette er selvfølgelig ikke optimalt, hvis menupunkterne ofte skal opdateres og justeres, men det er en helt anden snak.
2. Ulemper
Ligesom vi havde ovenfor nævnte scenarie med knapperne, så kan det modsat være en ulempe. Hvad hvis du derimod skal ændre farven på alle knapperne. Pludseligt, kan det hele blive lidt mere omsonst. Heldigvis er du skarp i Photoshop, og kender alle de smarte teknikker – eller du er måske ikke en af dem?
En anden ulempe er også, at du ikke uden videre kan samle alle dine baggrundsbilleder i en fil. Du er nødt til at tage højde for, om baggrundsbillederne skal gentages. Det kunne eksempelvis være langs Y- eller X-aksen, hvilket sker ganske ofte. Her kan du dog vælge at samle de billeder, der skal gentages i hver sin fil. Dette har jeg selv gjort en indsats for at praktisere.
Desmere skal du også overveje kvaliteten af dine baggrundsbilleder. Hvis du har mange baggrundsbilleder med mange detaljer, så kan du eksempelvis ikke benytter dig af GIF, da den sammenlagte fil for det første er begrænset til 256 farver, og for det andet betyder det også, at billedet vil komme til at fylde ekstra meget, da GIF håndterer pixels enkeltvis. Du kan også overveje PNG, men derved kan du også havne med store filer. Derfor kan det godt være et ekstra stort arbejde, men du er jo alligevel vant til at overveje kvaliteten af baggrundsbillederne, hvis de var enkeltvis.
Udover at skulle kæmpe med JPG, GIF eller PNG, så kan du også rende ind i et problem, hvis pladsen i dit samlede baggrundsbilleder pludselig løber op. Specielt, hvis du ikke har lavet din CSS bedst muligt, så kan en udvidelse betyde, at du skal opgradere din CSS adskillige steder. Derfor undgå så vidt muligt at bruge “bottom” og “top”, når du positionerer dine baggrundsbilleder.
Du kan også rende ind i et problem, hvis du har små eller større grafikelementer, der skal benyttes på eksempelvis et link i en menustruktur. Hvis vi tager udgangspunkt i min footer, hvor jeg har nogle små ikoner under spalten omkring mig selv. Disse ikoner er placeret i min samlede CSS Sprite. Men linkene strækker sig længere end ikonet, så man skal huske at indregne det, når man sætter grafikelementerne op i sin CSS Sprite. Hvis ikke man husker dette, så vil du snildt kunne se brudstrykker af andre grafikelementer, og det er jo næppe din hensigt. Nu lykkedes det mig dog at håndtere denne situation problemfrit, men det var lidt en anden sag med mine gåseøjn i spalten med mine Tweets, men det lykkedes dog.
3. Mine CSS Sprites
- Sprite for alle enkeltstående grafikelementer i GIF
- Sprite for alle grafikelementer til gentagelse langs x-aksen i GIF
- Sprite for sociale ikoner i GIF
- Sprite for “følg mig på twitter” og “Bliv ajour med RSS” i GIF
- Sprite for alle enkeltstående grafikelementer i PNG
- Sprite for alle grafikelementer til gentagelse langs x-aksen i PNG
- Sprite for alle grafikelementer til gentagelse langs y-aksen i PNG
Du vil nok straks bemærke, at mit sprite for alle grafikelementerne i GIF kan virke rodet. Ganske enkelt, så kan det samlede baggrundsbillede nemt blive rodet, specielt når du skal tage højde for nogle af ulemperne nævnt ovenfor. I mit tilfælde er det “heldigt”, at jeg ikke benytter mig af så mange farve, hvilket kunne have kompliceret min brug af CSS Sprites.
Jeg vil dog råde dig til at holde bedst mulig orden i dine sprites, og specielt i dine Photoshop-filer. Her vil jeg henvise til mit blogindlæg omkring god skik i Photoshop. Dette er ikke noget, du kun skal gøre for din egen skyld, men også dine kollegaer eller andre, der måtte komme ind over et givent projekt. Tænk fremad, som de vidst nok har sagt i en reklame fra Nykredit.
4. Gode resourcer
Jeg har samlet en række ressourcer, der kan hjælpe dig i dit arbejde med CSS Sprites – specielt hvis du ikke nødvendigvis magte dem i Photoshop, Fireworks eller hvilket stykke software du end måtte benytte.
- CSS Sprite Generator (uafprøvet service)
- CSS Sprites (anden uafprøvet service)
- SpriteMe (Endnu en uafprøvet service)
- Creating easy and useful CSS Sprites
Selv har jeg ikke benyttet mig af nogle tilgængelig services ude på nettet, men valgt den hårde fremgangsmåde. Om du vil benytte den ene eller anden fremgangsmåde, er op til dig selv, men tror helt sikkert den hårde vej, giver mest erfaring og indsigt. For ikke at snakke om forståelse og indsigt i formaterne GIF, PNG og JPG.
5. Andre omkring CSS Sprites
Ganske enkelt munder dette blogindlæg ud i mine egne erfaringer med CSS Sprites, men internettet byder dog også på en lang række artikler og blogindlæg, der kan være din tid værd. Jeg har samlet de bedste, som jeg er stødt på:
- The Mystery Of CSS Sprites (God artikkel fra Smashing Magazine)
- To Sprite Or Not To Sprite (Vladimir Vukićević om CSS Sprites)
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- CSS Sprites: Image Slicing’s Kiss of Death (A Lista Part omkring emnet tilbage i 2004)
- CSS Sprites: Useful Technique, or Potential Nuisance?
- CSS Sprites – What, Why, How and When?
- Nettuts – Exactly How to Use CSS Sprites
- Smashing Magazine, Transparent CSS Sprites
Alle disse artikler omkring CSS Sprites nævner mange forskellige ting, også ting jeg ikke har været inde på. Mit blogindlæg tager som nævnt udelukkende udgangspunkt i mine egne erfaringer. Uanset hvad, så bør du gennemlæse ovenforstående artikler, da de giver endnu mere indsigt.
6. Konklusion
Fordelene og ulemperne afhænger uden tvivl af, hvor stor en hjemmeside, du beskæftigere dig med. Om den pågældende hjemmeside har mange besøgende eller ej. Om den har mange baggrundsbilleder eller ej. Det kræver uden tvivl ekstra tid at benytte sig af CSS Sprites, så derfor er det ikke sikkert at budgettet tillader det på enhver side, du beskæftigere dig med. Samtidig, hvis det er en simpel og billig hjemmeside, kan man godt vurdere, at CSS Sprites ikke er nødvendige at bruge tid på.
Min anbefaling er, at du skal overveje hvilke projekter, hvorpå du vil bruge tid på CSS Sprites. Omvendt synes jeg også, at du skal bruge noget tid på at få opbygget solide rutiner. Som det fremgår af både fordele og ulemper, så er det ikke nødvendigvis nogen nem opgave.
Og selvom mine ulemper umiddelbart overskygger mine fordele, så skal man aldrig undervurderer et område som loadtid. Som bruger af en hjemmeside, så ønsker man ganske enkelt, at det går stærkt. Man ønsker ganske enkelt en behageligt oplevelse, hvilket gode loadtid er med til at underbygge.
Ganske enkelt, så handler det i høj grad om at danne sig nogle rigtig gode rutiner, hvilke også kan være med til at nedsætte den tid, du bruger på dine CSS Sprites fremover.
