As Sprites CSS são uma forma de reduzir o número de pedidos HTTP feitos para os recursos gráficos, pelo seu site. As imagens são combinadas numa imagem alargada nas coordenadas X e Y definidas. Após atribuir a imagem gerada aos elementos referentes da página, a propriedade CSS background-position pode ser utilizada para deslocar a área visível necessária para a componente gráfica.

Esta técnica pode ser muito eficaz para melhorar o desempenho do site, nomeadamente em situações em que muitas imagens pequenas, tais como os ícones de menu, são utilizadas. A homepage do Yahoo!, por exemplo, aplica esta técnica exactamente para isso.

Gotchas

Existem alguns bugs realmente irritantes que deve considerar quando criar Sprites CSS.

Opera

O Opera (pelo menos quanto à versão 9.0) não vai reconhecer uma posição do fundo superior a 2042px ou inferior a -2042px, usando esse valor limite em vez. A ferramenta contorna este bug, criando novas colunas dentro da imagem de saída sempre que o limite vertical é alcançado.

Safari

O Safari tem um problema com a repetição de imagens de fundo . Felizmente, isso pode ser facilmente resolvido especificando um valor de afastamento horizontal suficientemente grande (configurável).

Leitura

A A List Apart publicou um artigo intitulado CSS Sprites: Image Slicing's Kiss of Death que explica o conceito por detrás das Sprites CSS. Se esta técnica é nova para si, sugerimos que vá à A List Apart e dê uma olhadela.