Atributos básicos em imagens


Dentre os fatores que tornam o carregamento do blog mais rápido está o uso de atributos para imagens. Já havia lido isso em algum lugar, mas nessa manhã, vendo algumas dicas no Bloggersphera, novamente isso veio à tona. Como fazer para atribuir esses valores às imagens? Eis a resposta:

Exemplo 1:

Cavalos românticos
width="500" height="400"

Exemplo 2:
Cavalos românticos
width="150" height="100"

Retirando os valores que eu atribuí, temos:

Cídigo para imagens

Dica: se você costuma publicar sempre imagens nos seus posts, talvez seja interessante manter esse código sempre nos rascunhos dos posts. Se você for usá-lo, basta inserir os valores. Se não for, é só apagar.
Imagem

3 comentários

Tem um pequeno problema aí...
Simplesmente atribuir uma altura e uma largura para uma imagem de 1024x768, por exemplo, não impedirá o carregamento da imagem original, ou seja: a imagem grande será carregada, mas exibida em tamanho menor.
A solução para isso é, na verdade, redimensionar o arquivo para o tamanho desejado e postar o novo arquivo.


Em tempo: o Blogger faz isso automaticamente. Ao enviar uma imagem, o sistema cria uma miniatura dela do tamanho que você definir (no caso, "pequeno", "médio" ou "grande").

Abraço!

Reply

O problema dos atributos de largura e altura de uma imagem são os seguintes, se você tem uma imagem relativamente grande, de 1024x768 e coloca em uma página da web mas só muda os atributos width e heigth o navegador vai consumir banda baixando toda a imagem e já vai deixá-la do tamanho que você especificou.
Se não colocar o tamanho, será exibida no tamanho real, 1024x768 que é o que o navegador distinguiu ao começar a carregá-la.
Em alguns lugares fala-se para colocar o width e heigth em toda e qualquer imagem, mas não com o intuito de redimensioná-la e sim de poupar processamento do browser para calcular esse tamanho, e dizem que é isso que aumenta a rapidez da página ao ser exibida.
Eu não sou muito categórico com isso, e sei que deveria usar, mas no momento me falta tempo (leia-se coragem) para atribuir as imagens. Nunca fiz um teste específico para ver se realmente funciona. Imagino que seja muito mais vantajoso você se preocupar com o tamanho real delas (em KB) do que os atributos. E também com os scripts que podem não serem grandes, mas usam muito processamento e acabam deixando uma página verdadeiramente lerda, uma lesma.
Pra mim, o principal para uma imagem é ficar com menos de 50KB (600x400) e a URL da seguinte forma: [img src="imagem.jpg" alt="texto" title="texto"]

Reply

Felipe, é isso mesmo que você disse que já li por aí. Repito sua fala:

"Em alguns lugares fala-se para colocar o width e heigth em toda e qualquer imagem, mas não com o intuito de redimensioná-la e sim de poupar processamento do browser para calcular esse tamanho, e dizem que é isso que aumenta a rapidez da página ao ser exibida."

Claro que se a velocidade de conexão é muito boa, isso nem se percebe. Pela largura da área de postagem, o tamanho de imagem que você usa é o melhor mesmo, acho. Obrigado pro responder minha questão.

O Garçom, como você pode ver no comentário do Felipe, já vimos por aí essa conversa de colocar valores para as dimensões da imagem. Creio que, em resumo, o melhor é diminuir o tamanho do arquivo e ao mesmo tempo atribuir valores para altura e largura da imagem. E agora, edito o post ou não?

Reply

Postar um comentário

Os comentários deste blog são moderados.