Texto original: CSS Sprite: Fazer ou Não Fazer?
Traduzido de: Para Sprite ou Não para Sprite
Isenção de responsabilidade: Os Sprites CSS mencionados neste artigo são Sprites CSS . Esta frase nunca teve uma tradução fixa ou convencional para o chinês. Algumas pessoas começaram a chamá-la de Sprites CSS. continuaremos a fazer isso no futuro. Continuaremos a ser chamados de CSS Sprites. Shen Fei (vocal)
CSS Sprite já existe há algum tempo e surgiu como uma forma de tornar seu site mais rápido. Steve Souders acaba de apresentar o SpriteMe! no Velocity 09 (discutindo por que usar um CSS Sprite Generator ou outra ferramenta baseada em servidor quando você pode usar canvas e toDataURL e gerar sprites dinamicamente?). No entanto, existem alguns equívocos sobre sprites CSS, sendo o principal deles que eles não têm desvantagens.
O princípio básico do CSS Sprite é integrar algumas imagens utilizadas no seu site em uma única imagem, reduzindo assim o número de solicitações HTTP para o seu site. A imagem é renderizada usando as propriedades CSS background e background-position (vale ressaltar que isso também significa que suas tags ficam mais complexas, a imagem é definida em CSS, não na tag <img>).
O maior problema do CSS Sprite é o uso de memória. A menos que a imagem do sprite seja organizada com muito cuidado, você acabará com muitos espaços em branco inúteis. Meu exemplo favorito vem do site da WHIT TV, onde esta imagem é usada como sprite. Observe que esta é uma imagem PNG de 129.915.000 pixels. Também está muito bem compactado e o tamanho real do download é de apenas 26K - mas o navegador não renderiza os dados da imagem compactada. Quando esta imagem for baixada e descompactada, ela ocupará aproximadamente 75 MB de memória (1299 * 15000 * 4). Se esta imagem não usar transparência alfa, ela será otimizada para 1299 * 15000 * 3, mas às custas da velocidade de renderização. Mesmo assim, estamos falando de 55 MB. A maior parte desta imagem está em branco , não há nada lá, nenhum conteúdo útil. Apenas carregar a página inicial do WHIT fará com que o uso de memória do seu navegador aumente para pelo menos 75+ MB, apenas por causa daquela imagem. ( PS: Infelizmente, o site foi revisado recentemente e as fotos mencionadas no artigo não existem mais )
A compensação certa em favor de um site não existe.
Outra desvantagem (embora não tão importante) é que se uma página usando CSS Sprite for dimensionada usando o recurso de zoom de página inteira fornecido por alguns navegadores, o navegador precisará fazer algum trabalho extra para corrigir o comportamento dessas bordas da imagem. para evitar que imagens adjacentes no Sprite sejam expostas. Isso não é problema para imagens pequenas, mas será um impacto no desempenho para imagens grandes.
Certamente existem alguns exemplos que mostram os benefícios óbvios dos sprites CSS, sendo o principal deles a fusão de um lote de imagens do mesmo tamanho em um único arquivo. Por exemplo, uma série de ícones 16×16 usados para identificar muitas coisas em seu site, ou alguns ícones 32×32 usados como cabeçalhos de categorias ou similares. Mas nunca é uma boa ideia combinar imagens de tamanhos muito diferentes, especialmente uma imagem alta e fina ao lado de uma imagem larga e curta.
No entanto, CSS Sprite melhora o tempo de carregamento da página (pelo menos no carregamento inicial da página e nos carregamentos subsequentes, o navegador armazena a imagem em cache). Existe algo que possa ser substituído? Infelizmente, ainda não há alternativa. Muitos navegadores estão começando a oferecer suporte a manifestos off-line e pode ser possível estender isso para permitir o download de um arquivo (como um arquivo jar/zip) que contém uma lista de recursos e URLs correspondentes. Mas tal abordagem não será vista por algum tempo...
Portanto, ao decidir usar CSS Sprite, esteja ciente de que existem muitos fatores além do desempenho de carregamento inicial da página. Como regra geral, se uma grande parte do seu sprite CSS não contém conteúdo de imagem real, você deve evitar usá-lo adequadamente. Da mesma forma, fique de olho em possíveis problemas futuros enquanto mantém a velocidade de carregamento da página e tome cuidado para evitar bugs de memória e impactos no desempenho do Sprite.
Outras deficiências do CSS Sprite
A seguir estão algumas deficiências do CSS Sprite mencionadas por alguns internautas nos comentários deste artigo:
Imagens chamadas por CSS Sprite não podem ser impressas a menos que a instrução print seja adicionada especificamente a @media por RichB
Se você quiser modificar uma imagem no Sprite, terá que modificar a imagem inteira, o que sem dúvida aumentará a carga de trabalho de Tom B.
Se você encontrar alguma deficiência em outros Sprites CSS durante o uso, sinta-se à vontade para mencioná-la.