Sem categoria

Como otimizar imagens para motores de busca e navegadores

regua

Se você tem um site ou blog, deve se atentar para a otimização dele para os buscadores ou motores de busca como Google, Bing e tantos outros. Cada modificação feita nos códigos pode significar mais visitas se for implementada corretamente. Essa técnica se chama SEO – Search Engine Optimization.

Estive lendo um post escrito pelo Thiago Rodrigues do blog Design Blog tratando de SEO para imagens. Recomendo fortemente o artigo dele, mas quero acrescentar só mais uma técnica que não encontrei no artigo dele.

Siga o @denavegador no Twitter e fique por dentro das novidades dos navegadores.

A técnica que falo consiste em determinar a largura (width) e a altura (height) do espaço em que a imagem será colocada. Isso faz com que o navegador não tenha que descobrir sozinho o tamanho da imagem a ser colocada no local estipulado.

Vejamos como implementar a técnica. Um exemplo de imagem do código sem a marcação de largura e altura:

<img src="navegador-bom-e-veloz.jpg" alt="Navegador Bom e Veloz" title="Navegador Bom e Veloz" />

Agora, o mesmo código com a marcação de largura (width) e altura (height):

<img src="navegador-bom-e-veloz.jpg" width="160" height="230" alt="Navegador Bom e Veloz" title="Navegador Bom e Veloz">

A tag width determina a largura da imagem enquanto que a tag height determina a altura. É aconselhável determinar o tamanho real da imagem no local. Se uma imagem tem 256×256 pixels, as tags width e height devem ter valores 256.

Não é aconselhável redimensionar imagens através das tags width e height pois o navegador fará download do seu tamanho real. Por exemplo:

Se a imagem possui 256px de largura e 256px de altura, ou seja, 256×256, e você colocar na tag width o valor 500 e no height 500, sua imagem ficará maior, mas perderá qualidade na visualização.

Outro caso é diminuir a imagem. Se você tem uma imagem de 256×256 e colocar a tag width com valor 50 e height com valor 50, isso fará com que sua imagem fique menor, mas não perderá qualidade. O problema disso é que o navegador fará download do tamanho normal da imagem e a mostrará pequena. Para economizar no tamanho do arquivo (e ajudar seu servidor), é preciso ou colocar o tamanho real da imagem ou fazer o redimensionamento dela antes de colocá-la no servidor com editores de imagens como Photoshop ou Gimp.

Definir o tamanho do espaço da imagem é uma das técnicas para melhorar o tempo de carregamento do seu site.

Faça isso no seu site ou blog!