Če ste domači z koncepti web designa, potem že poznate osnove uporabe CSS. CSS sprites nam omogoča uporabo ene same grafike, v katero je vključenih več slik razporejenih v mrežo. Na spletni strani pa se prikazuje le željen del te datoteke. Tako potrebujemo le en HTTP zahtevek in celotna grafika spletnega mesta nam je takoj na voljo.
Ta tehnika je zelo uporabna, ko imamo pred seboj dizajn bodoče spletne strani, katerega navigacija pa vsebuje slike, piktograme ali netipične fonte, ki jih uporabniki spletnega mesta nimajo nameščenih na svojih računalnikih.
Včasih smo to rešili enostavno tako, da smo celotno grafiko razrezali na več manjših slik katere smo umestili v stran. Nato smo dodali povezave in stvar je bila rešena. Danes pa je to popolnoma nesprejemljivo. Spodaj je opisanih nekaj težav s katerimi se srečamo, v kolikor ne upoštevamo W3C standardov pri izdelavi netekstovne oz. grafične navigacije.
- Iskalniki in screen readerji ne znajo prebrati teksta v sliki, kar posledično pomeni težavo v rengiranju strani kot tudi v sami dostopnosti strani slepim in slabovidnim uporabnikom.
- Večja poraba pasovne širine, kar je še posebno kočljiva stvar, v kolikor ima stran veliko obiska.
- Daljše nalaganje spletnega mesta.
Uporabi slikovne navigacije se je načeloma dobro izogibati, čeprav lahko z pametno rabo CSS stvar naredimo povsem dostopno in uporabno. V prvem primeru lahko vidite osnovno rešitev, v drugem pa nadgradnjo in implementacijo sprites grafike.
