Repetindo o site Imagem de fundo - tamanho vs velocidade

Question

Eu queria saber se alguém fez algum teste com imagens de fundo. Normalmente, criamos um plano de fundo que se repete pelo menos em uma direção (x ou y ou ambos).

Exemplo
Digamos que temos um fundo gradiente que se repete na direção x. A altura do gradiente é de 400px. Temos várias possibilidades. Podemos criar a imagem o mais pequena possível (largura de 1 pixels e 400 pixels de altura) ou podemos criar uma imagem maior com altura de 400 pixels.

Observação
Como o gradiente tem 400 pixels de altura, provavelmente não escolhemos o formato GIF, porque só pode armazenar 256 cores adaptativas. Talvez seja isso se nosso gradiente for sutil, pois não tem tantos, mas, caso contrário, provavelmente preferiremos armazenar a imagem como uma imagem PNG de 24 bits para preservar os detalhes completos do gradiente.

Dilema
Devemos criar uma imagem de tamanho 1 × 400 px que será repetido n vezes horizontalmente ou devemos criar uma imagem de tamanho de 100 × 400 px para acelerar a renderização no navegador e ter um tamanho de arquivo de imagem maior.

Então. Tamanho da imagem vs. velocidade de renderização? Qual vence? Alguém se importa em testar isso? Com relação à velocidade de renderização do navegador e possíveis pequenas imagens de redefinição de imagem ...

Answer 1

A velocidade de renderização é o gargalo aqui, pois os ladrilhos maiores podem ser colocados no cache do navegador.

Na verdade, eu tentei isso para os principais navegadores, e pelo menos alguns deles se tornaram visivelmente lentos em azulejos muito pequenos.

Portanto, se aumentar o tamanho do bitmap não resultar em ridiculamente Grandes tamanhos de arquivo, eu definitivamente iria com isso. Teste você mesmo e veja. (Lembre -se de incluir o IE6, pois muitas pessoas ainda estão presas).

Você pode encontrar um bom equilíbrio entre o tamanho do bitmap e o tamanho do arquivo, mas em geral eu tentaria 50x400, 100x400, 200x400 e até 400x400 pixels.

Answer 2

Descobri que pode haver uma enorme diferença no desempenho da renderização do navegador, se você tiver uma imagem de fundo com largura de 1px e repeti-lo. É melhor ter uma imagem de fundo com dimensões um pouco maiores. Portanto, uma imagem com uma largura de 100px tem um desempenho muito melhor no navegador. Isso entra em jogo especialmente quando você usa uma imagem de fundo repetida em uma camada arrastável em seu site. O desempenho de arrasto é muito ruim com uma imagem de fundo muitas vezes repetida.

Answer 3

Eu gostaria de ressaltar que, pelo custo de enviar algumas linhas extras (1-2 Exemplo apenas aqui) .8k - 1,6kb (se você puder se safar com 8 bits) mais como 2,4kb - 4,0kb para 24 bits

2 colunas de pixels mais significam as iterações necessárias para que o fundo seja reduzida para 1/3 para 1,6kb (8 bits) ou 4kb (24bits)

Mesmo 1 coluna extra metade da escape necessária para metade da largura do elemento.

Se o fundo for feito em menos de um segundo para um modem de 56,6k, acho que é magro o suficiente.

Answer 4

Se Pequenas dimensões de uma imagem têm um impacto negativo na renderização, tenho certeza de que qualquer navegador decente prejudicaria a imagem internamente algumas vezes antes de ladrilhos.

Dito isto, eu tendem a não usar 1 pixel de dimensões da imagem, para que eu possa ver a imagem claramente sem redimensioná -la. A compactação PNG é boa o suficiente para lidar com isso com muito pouco custo para o tamanho do arquivo, na maioria das situações.

Answer 5

Eu colocaria dinheiro no gargalo, sendo o download da imagem, em vez do mecanismo de renderização que faz o ladrilho, então opte pela opção de 1 pixels de largura.

Além disso, o PNG de 24 bits é redundante, pois você ainda está recebendo apenas 8 bits por canal (vermelho, verde e azul).

Answer 6

Geralmente, prefiro ir entre, 1pixel de largura provavelmente fará com que seu gradiente pareça um pouco claro, mas você pode fazer algo como a largura de 5 pixels, que dá espaço suficiente ao gradiente para manter consistência e clareza em toda a página. Mas eu sugiro que você possa Adicione mais padrões e imagens a uma única imagem e use o posicionamento de fundo (Sprites CSS) para posicioná -los porque baixar uma única imagem de Say 50kb levaria menos tempo comapared para 5 imagens de 40kb, já que o navegador faz menos solicitações ao servidor ...

Answer 7

Eu não comparei isso, mas aposto que, na maioria dos computadores modernos, a renderização não será um problema, enquanto você sempre deseja economizar no tempo de download da imagem. Costumo usar o tipo de gráfico de 1px.