Otimizar imagem e testar o carregamento do blog

Nessa onda de otimizar o blog, melhorar as imagens e encontrei um site que testa a velocidade de carregamento das páginas, mostra as imagens e arquivos mais pesados. Já queria ter feito isso a um tempo mas o brasileiro aqui vai deixando para amanhã; mas agora vai ficar meio bagunçado, por poucos dias. Já diminui três imagens, enquanto posto aqui.


O site que faz o teste de tempo de carregamento do blog ou página é esse Linkvendor.com, Esse site carrega seus links de forma um pouco diferente, caso não apareça nesse endereço(linkvendor.com/seo-tools/site-analysis/website-speed-test,46.html) procure o link para essa ferramenta: website speed test.

Post relacionado
Ferramenta SEO online grátis, Keyword Analise blog, site

Atualização 2009: Esse foi um dos meus primeiros posts usando o blogger, está meio confuso, principalmente abaixo. Mas encontrei um site que reduz o peso(bytes) de algumas imagens sem perda de qualidade, porém, talvez ela deva estar hospedada na web, o site smush.it ou yahoo.com/yslow/smushit

Otimizar imagens online com a ajuda do blogger(diminua bytes)

Uma vez eu postei uma imagem animada grande e o blogspot transformou a imagem, dessa vez é uma transparente, ele não modificou essa apenas fez duas, essas são com fundo transparente.

Essa imagem acima estava no meu PC, ia postar ela aqui nesse post sobre anti-vírus

Clique com o botão direito do mouse e em propriedade sobre as imagens abaixo e veja (bytes) de cada. Detalhe; Era apenas uma quando postei, entenda mais lendo Três endereços das imagens postadas no BlogSpot

Não usei essa

Otimizada pelo blogger, apenas em bytes, mas a qualidade da imagem ficou muito inferior. Dica: Clique com botão direito do mouse e depois propriedades sobre a imagem para conhecê-la melhor.

Só que o blogspot me sacaneou nessa acima que era .gif e ele transformou em duas .PNG

Apesar de elas terem nomes com o final .GIF quando coloca o nome na barra de endereço do navegador baixa ou abre uma imagem .PNG, mas o peso delas em byts diminui quando são postadas no BlogSpot, o que me leva a imaginar que antes elas passam por um software que otimiza elas para uso na Internet, bom pro meu blog também que ta precisando de um "regime", já consegui diminuir um terço no tempo dele carregar, mais ainda não ta nada bem, tive que tirar algumas coisas que eram minhas... coisas quase inúteis mas eu gostava, mas vou otimizá-las e colocar de volta, com o tempo...

Essa imagem abaixo era maior, a parte azul, eu usava como background de de um formulário, reduzi seu tamanho para carregar mais rápido, veja a ilustração de como ela era antes:

E abaixo o depois:

Dica: Para página carregar mais rápido especifique o tamanho real das imagens usando:

width para largura, height para altura.

Veja exemplo:

<img alt="newsleter" title="receba postagem por email" description="imagem que irá ativar botão para receber postagem por email" src="http://3.bp.blogspot.com/_NrcfzTud13U/SEzja-B5GBI/AAAAAAAAAEw/2hM-ZDmSaGk/s200/newsleterla3%5B1%5D.gif" width="18" height="14"/>

Otimizar imagens pro google

Também é interessante usar essas três tags para imagem:

E de preferência combinar o nome da imagem com a tag ALT e os textos próximos a ela;

Exemplo: Vamos supor que a imagem abaixo fosse de um software e eu estivesse fazendo no blog, uma campanha, para vender ou demonstrar as utilidades de um construtor de imagens(software)

o blog poderia aparecer com a imagem nas buscas por imagens do google, e ela teria ainda um valor de texto, usaria:

<img src=".../images/software-creator-imagem-otima.gif" Alt="software creator o melhor software para deixar sua imagem com otima qualidade" title="Gif creator - Faça um teste online, grátis" width="50" height="50" />Esse software melhora a imagem, baixe grátis para avaliação, 30 dias....

alt="newsleter"

Caso a imagem não carregue irá aparecer o texto, é bom observar que imagem pequena é aconselhável usar o texto curto pra ALT, se for texto grande e a imagem não aparecer em seu lugar irá aparecer um grande texto.

title="receba postagem por email"

Ao passar o cursor sobre a imagem aparecera um texto geralmente amarelo ou da cor especificada pelo usuário no PC. É bom não exagerar, muitas vezes ele desaparece ao mexer com o mouse e ninguém gosta de ler a "metade".

description="imagem que irá ativar botão para receber postagem por email"

Essa tag define um texto que um usuário com alguma deficiência visual irá ouvir se ele tiver um software para isso(pode descrever em detalhes a imagem).

Também é interessante usar imagens Atrativas, bonitas, engraçadas, etc. para que as pessoas que fazem busca por imagens visitem seu blog.