Quando é um CSS Sprite é muito grande?

Question

É o principal propósito de sprites para reduzir http solicitações feitas ao servidor para elementos gráficos em uma página? Ou você quer tentar e se encaixam como muitos elementos para o sprite possível.

Eu acho que o que eu estou pedindo é: quando é o sprite muito grande

Answer 1

É muito grande quando o usuário tem que esperar para o arquivo para download antes de a página pode ser utilizado.

Answer 2

Se você estiver usando PNG para o tipo de imagem do sprite é útil lembrar que cada linha é geralmente comprimido (deflacionado) independentemente das outras linhas.

Assim, para ajudar com o equilíbrio do número de sprites / tamanho da imagem, tentar encaixar sprites semelhantes ao lado do outro na horizontal em vez de vertical -. Aproveitar a compressão

PNG também suporta "preditores" que só armazenar os deltas entre um valor previsto (com base no precedente linhas e precedendo pixels na mesma linha) eo valor real.

Encontre um editor de imagem boa que lhe permite definir diferentes configurações de compactação PNG preditor (ou otimiza automaticamente) para encontrar uma configuração que é melhor para sua imagem.

Answer 3

É o principal propósito de sprites para reduzir http solicitações feitas ao servidor para elementos gráficos em uma página?

Sim, você quer evitar ter muitos pedidos de pequenas imagens. Combinando-os em um Sprite lhes permite ser buscada em uma solicitação HTTP.

quando é o sprite muito grande?

É realmente o total de todos os pedidos que você quer olhar. A única maneira para o sprite a ser muito grande é se a soma de suas partes (que é exatamente o que o sprite é ) é muito grande para começar.

Answer 4

Em relação sprites, você deve definitivamente verificar para fora a discussão sobre o uso de memória abaixo deste post também: http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

Meu conselho:

• Somente linhas ícone sprite, botões e imagens de repetição (por exemplo, uma caixa de gradiente de canto arredondado).
• Deixe tudo sozinho
• Mantenha as suas imagens em 500x500 ou 100kb e licença tão pouco espaço não utilizado como possível. Use .png ou .gif, dependendo da situação

Answer 5

Você pode embalar todos os elementos de design estáticos pequenos para uma imagem mestre sem grandes problemas.

Claro que, se você tem 10 megapixels fotos em seu site, embalá-los juntos seria loucura.

Answer 6

A CSS Sprite é muito grande quando você está incluindo qualquer coisa mas os elementos de interface do usuário essenciais. Estas são pequenas imagens suplementares, como ícones e logos onde a compressão não prejudicar a qualidade muito. Uma vez que todas as imagens teriam sido carregado outra forma independente, você não é pior do que pedir-los individualmente. Se ele está levando muito tempo para carregar, o seu problema não depende com sprites, mas em comprimir suas imagens corretamente.

Answer 7

Sim, o objetivo principal é reduzir solicitações (e portanto o tempo de carregamento). Outra vantagem é que você só precisa se preocupar com uma imagem para ser armazenada em cache corretamente. Dica: Use imagens PNG como suas alças de compressão Large White ( "vazias") áreas melhores.

Answer 8

O Google Maps utiliza [256x256] px imagens.