Você já leu o artigo sobre CSS Sprites da Smashingmagazine? Veja bem, levando em conta que você tem conhecimento desse assunto, gostaria só de basear minha crítica em cima de dois pontos desse artigo:

  1. Cache de imagens
  2. Acessibilidade

Mas antes, vamos ser francos, usar sprites é uma mão na roda no desenvolvimento de sites, e sei q o pessoal da Smashingmagazine também pensa assim. Eles só colocaram o assunto em xeque devido ao mau uso ou o uso exagerado.

Cache de imagens

Se todas as imagens são “cacheadas” pelo browser na primeira visita à pagina (salvo contrário quando se atribui uma tag de cabeçalho expires) não teria muito sentido ter “uma imagem contendo várias outras”, sendo que isso pode ser complicado ou mesmo incômodo de se fazer manutenção. Mas isso caso seja realmente necessário alterar e/ou inserir nova(s) imagem(ns) no sprite. (Pense sempre, mesmo que não seja seu caso, em alguém que não seja você pra dar manutenção no seu trabalho. Essa pessoa conseguiria fazer isso?)

Se você criar sprites sempre da esquerda pra direita e de cima pra baixo, acredito que nunca terá problemas em dar manutenção, porque você não vai precisar recalcular as background-position de cada elemento. E, verdade seja dita, uma única imagem contendo várias outras é menor (em Kb) do que todas essas outras separadas.

Outra vantagem é evitar o FOUC (Flash Of Unstyled Content) que acontece muito em efeitos hover de botões muito elaborados (pesados). Seu estado inicial já está carregado mas quando passamos o mouse sobre ele o estado hover demora alguns milésimos de segundo pra ser exibido.

Acessibilidade

O uso incorreto de IR (Image Replacement). Se você não for criar botões e/ou algo a ser clicado que interfira na navegação, não justifica usar imagem de fundo.

Se a imagem a ser exibida for de conteúdo relevante e não for um item de navegação (que pode ser substituído por palavras) ela deve ser aplicada inline (diretamente no documento), e não por IR.

Na prática

Veja esse exemplo nesse outro artigo. Ele contém 5 itens de menu com seus estados up e hover. Ou seja, são 10 imagens totalizando 20,5Kb e gerando 10 requisições ao servidor. Com sprites tem-se 1 imagem de 13Kb (um ganho de quase 40% no tamanho do arquivo) e apenas 1 requisição ao servidor.

Enfim, olhando muitos exemplos de CSS Sprites por aí tentei desenvolver um menu de navegação diferente, para que você compreenda as extensas possibilidades e vantagens desse artifício.

Nele também procurei abordar o conceito de graceful degradation, onde as bordas arredondadas de cada item do menu não interferem na acessibilidade do mesmo (para usuários de IE elas não aparecem).