sprites de imagem CSS

Question

É a única vantagem de usar sprites imagem css que há menos solicitações HTTP?

Ou há outros benefícios?

Também há uma maneira fácil de detiming qual a área de um sprite para mostrar?

Answer 1

Como você disse, uma das principais vantagens é reduzir o número de solicitações ao servidor, melhorando o tempo de resposta (especialmente se você estiver carregando uma grande quantidade de pequenas imagens). Mas esta não é a única razão que as pessoas usam sprites.

Se você não usar sprites para um "rato sobre" display, o usuário verá a imagem desaparecer por um segundo ... e parece realmente ruim. Isso porque, se você alterar a imagem em vez de apenas movendo o sprite em torno dele irá carregar uma nova imagem e o tempo de carregamento podem ser visíveis para o usuário final.

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

Outra vantagem de sprites é que você pode manter todas as suas imagens em um local e, em alguns casos, faz mais sentido (para menus e assim por diante).

Para determinar qual a área de um sprite para mostrar, basta usar photoshop ou qualquer outro software de edição de imagem.

Answer 2

O principal benefício é suas páginas carregam mais rápido, principalmente por causa de solicitações HTTP reduzidos.

Você pode gerar seu sprite usando uma ferramenta.

Disclaimer -. Eu escrevi esta ferramenta

Answer 3

É muito mais fácil conseguir a colocação da imagem (especialmente ao lado de texto) o mesmo cross-browser. Você pode ajustar as imagens para cima / baixo / esquerda / direita com a utilização vertical-align e estofamento.

Acho que é mais fácil manter o controle de todas as imagens, se eles estão em um único arquivo. Especialmente desde que eu normalmente têm transparentes imagens PNG e em seguida, usar imagens GIF para o IE6. Eu salvar meu mapa Sprite png como um gif e adicionar uma linha background-image com no meu css ie6 e minhas imagens são trocados.

Eu uso o Photoshop ou o GIMP para obter localizações aproximadas no mapa Sprite e, em seguida, usar o Firefox para afinar o posicionamento.

Answer 4

Sim, há um outro benefício. Cada arquivo de imagem tem seus próprios cabeçalhos, descrevendo o tipo de imagem, cores etc. Então, quando você combinar imagens para um único sprite, você ganha alguns kb.

Mas, como você disse antes, a maior parte você ganha, reduzindo solicitações HTTP contagem.

Answer 5

Em termos de determinação da área de show, eu normalmente coloco minhas elementos em pixels que são múltiplos de 100. Portanto, se há um sprite com um monte de 64x64 ícones de pixel, eu vou normalmente tê-los em (0, 100 ), (0, 200), (0, 300), etc.

Desta forma, eu não tenho que digitar uma medida exata (ou qualquer outro desenvolvedor para que o assunto) e salve as teclas digitadas quando definir todas as minhas propriedades background-position.