Sprite / PNG local gráficos pesados, oh meu!

Question

Eu preciso criar um site que é muito gráficos-pesados ??(rasgados fundos de papel com sombras transparentes gráficos sobre texturizados, etc.) Uma maneira que eu estava pensando em poupar no tamanho do arquivo foi para soltar todos os meus elementos de fundo em um PNG . A questão é que este arquivo é agora 180k. Se eu dividi-lo em vários GIFs e um par de PNGs então seria mais perto de 70k.

Será que realmente importa? O que é "muito grande" estes dias para o tamanho do arquivo? Vai notar qualquer um se o arquivo é 180 ou 70k?

Answer 1

Se os usuários têm acesso rápido ao seu site (como, em uma intranet), 180k é quase um problema. Se, por outro lado, o site é usado por O Generic Older Pessoa Com Um Humorously conexão lenta, ele provavelmente vai ser um problema. Se os usuários usar GPRS, mas ter paciência infinita, ele provavelmente não vai ser um problema. Se o site dá a um milhão de dólares para quem tem a paciência de esperar o tempo de carregamento, velocidades de transferência não são um problema. E assim por diante.

O que estou dizendo, ele realmente depende de suas necessidades e constrangimentos. Isso requer que você sabe (e, posteriormente, nos dizer, para nós, para ser mais útil) muitas coisas antes que você possa obtê-lo perto para a direita.

Para evitar esses downvotes traquinas para muito válidas-respostas-mas-simplesmente-não, por favor, alguém, aqui está a minha resposta:

180k dividido por uma taxa de transferência de modem ADSL padrão = 180KB / 100 kB / s = 1.8s = suportável.

Answer 2

Existe uma razão não para utilizar as imagens menores? Parece que você já quebrou-lo, então por que não ir com o método de menor, mais rápido?

De um ponto de vista puramente relativista, 70k terá apenas 38% do tempo de download que 180k faria (aproximadamente). Se você está esperando o tráfego elevado ou quer os tempos de carga rápidos, cada bit ajuda.

Answer 3

Você tem que comparar o tempo que leva para solicitar todas as imagens separadas e o tempo que leva para baixar o um grande. O problema é com solicitações HTTP.

Eu sugiro que você fazer alguns testes com extensão do Firefox, do Google, PageSpeed ?? para ver se há uma diferença enorme entre a grande png ou os separados.

Um benefício que eu posso pensar, além de menos solicitações HTTP é que o seu site vai carregar tudo de uma vez, em vez de gradualmente à medida que todos os gráficos são baixados. A linha inferior no entanto, como disse Henrik é que ele depende de suas necessidades.

Answer 4

Eu tenho certeza que você está ciente de que a divisão em meios múltiplas imagens conexões adicionais ao servidor para recuperá-los, com lag associada em cada um, e o tamanho adicional do pedido e resposta cabeçalhos.

Uma vez que os navegadores restringir o número de conexões ativas para cada servidor (versão do navegador dependente) isso pode acabar levando mais tempo do que recuperar uma única imagem. A solução usual para levantar o limite é usar um separado "imagens" do servidor, ou um alias de DNS que mapeia para o mesmo host.

E a menos que você precisar de animação, eu sempre recomendo PNG sobre GIF.

Answer 5

Certifique-se de que a multa site parece com imagens desactivados primeiro (assim alt tags, largura e altura definida, cores corretas utilizado) e, em seguida, dividir as imagens baseadas em grupos. Grupo todos os seus botões em uma imagem, se possível (usando folhas de css sprites), e todas as fronteiras para outra. Manter grandes imagens em arquivos separados (assim fundo local, cabeçalhos).

As imagens mais você tem, mais o navegador pode paralelizar as solicitações. No entanto, se você dividi-los muito, então diferentes imagens carregará em tempos diferentes, tornando partes do pop site É um pouco de um trade-off, mas essa é a alegria de programação:.)

O melhor a sua aparência do site antes que as imagens são visíveis, a menos que o usuário vai se importar a velocidade de download das imagens.