Todos conhecem a ferramenta Google Imagens, com a qual se pode fazer pesquisas por imagens. Para esta tarefa, o Google conta com um crawler (robô) exclusivo para rastrear as imagens de cada página publicada na internet, seu nome é Googlebot-Image. Por isso é muito importante que seja feito um bom trabalho de otimização das imagens nas páginas de um site, pois esse trabalho pode gerar um bom resultado em termos de tráfego para o site.

O Google não usa resultados de imagens apenas da ferramenta Google Imagens, mas também nas pesquisas feitas pelo site de buscas na web (imagem abaixo). Assim como na pesquisa na web, o objetivo do Google para a ferramenta de pesquisa de imagens é oferecer a melhor experiência aos seus usuários, oferecendo os melhores e mais relevantes resultados de pesquisa. Com isso em mente é possível conseguir um bom posicionamento nos resultados dessa ferramenta.

Vamos ver algumas dicas que podem contribuir com o bom posicionamento das imagens de suas páginas nas pesquisas do Google:

1. Nome dos arquivos de imagens influencia muito em SEO

Os nomes dos arquivos de imagem devem sempre ser detalhados e informativos, de forma que deixe claro para o buscador sobre qual assunto está contido na imagem. Uma boa descrição do nome do arquivo para uma imagem que ficará numa página sobre venda de um produto seria nome-do-produto-a-venda.jpg, que é muito mais informativo do que IMG00123.jpg.

2. Uso da Tag Alt é fundamental

Utilize sempre o atributo da tag alt de forma tão descritiva quando o nome do arquivo. Para o Google a tag alt é usada para descrever os conteúdos de um arquivo de imagem, fornecendo informações muito importantes sobre o que está contido na imagem.

Veja os exemplos de conteúdo adequado para a tag alt de uma imagem indicado pelo Google:

• Uso comum: <img src=“filhotes.jpg” alt=”” />
• Melhor: <img src=”filhotes.jpg” alt=”filhotes” />
• Muito melhor:<img src=”filhotes-dalmata.jpg” alt=”Filhote de dálmata brincando de pegar” />

E a Tag “title”?

Fazem confusão com o uso da tag Title,. Hoje o Google não gera relevância para essa tag, mas ela tem uma papel fundamental no que se refere a usabilidade do seu site. Por esse motivo você deve dar tanto valor a esta tag quanto a tag alt.

3. Teste sua página na versão texto

Não abuse de palavras-chave dentro do atributo, isso pode fazer com que o seu site seja considerado como spam. O Google recomenda que você teste o seu conteúdo usando um navegador somente de texto, como o Lynx.

4. Relacione sua imagem com conteúdo correto

Fornece um bom contexto para a sua imagem dentro da página na qual esta está inserida possibilita aos buscadores mais informações sobre a imagem, inclua legendas ou títulos e sempre que possível, faça com que as imagens estejam próximas ao texto relevantes a elas.

Veja a forma indicada pelo Google para texto relevante a imagem inserida na página:

Outro ponto muito importante sobre as imagens é o dimensionamento e tamanho em bytes de uma imagem. Em alguns sites as grandes vilãs da lentidão de uma página são as imagens. Esse assunto será abordado já no próximo tópico sobre o tempo de carregamento das páginas e dentro dele será dada a devida atenção à importância das imagens.

5. Reduzindo o tamanho de imagens

No resultado obtido com a ferramenta Gtmetrix, você terá uma opção de visualizar o tempo de carregamento por arquivo, essa informação é obtida na aba Timeline do Gtmetrix. Você conseguirá visualizar o tamanho e tempo de carregamento para cada arquivo. E como estamos falando de imagens é importante utilizar imagens que sejam do tamanho realmente necessário para o bom entendimento de seus clientes, para que o resultado final da página não seja muito pesada e lenta.

Utilizar ferramentas de compressão de imagens como jpegtran, Jpegoptim, Smush.it do Yahoo! e OptiPNG é o caminho certo para se obter uma boa redução do peso das imagens.

O Google Page Speed também dará boas dicas de como otimizar a página em termos de imagens. Uma das dicas é sempre exibir imagens dimensionadas, isto é editar as imagens para que elas fiquem no tamanho correto no qual você deseja inserir no site, e não usando os atributos de redimensionamento pelo código. O Google também indica que especificar a dimensões (largura e altura) de todas as imagens do site permite uma renderização mais rápida da página.

6. Use CSS Sprites quando possível

Existe também a opção de combinar imagens com CSS Sprites, que também será avaliada pela ferramenta do Google. Aplicar esta técnica é muito aconselhável para websites com muitas imagens em suas páginas.

Utilizar o CSS Sprites é relativamente simples. Para tal, basta unificar todas as imagens da página em uma única nova imagem, como por exemplo, unificar todos os botões de um menu em uma única imagem. Usando o exemplo abaixo fica claro identificar como o CSS Sprites pode ser útil:

Se fôssemos carregar cada imagem desse menu separadamente teríamos seis requisições e 18kb no total. Após a unificação em uma só imagem o tamanho cai para 14kb. Agora imagine isso para mais 10 imagens usadas em uma única página.

O código HTML que vai precisar usar para o exemplo é realmente muito simples, utiliza-se um menu em lista onde será colocada a imagem unificada como background e definir a largura e altura fixa para cada item de menu, com isso aparecerá somente o Sprite correspondente à imagem que será visível:

Criar a propriedade CSS responsável pela mudança dos sprites usando background-position. Com isso será definida em que posição o background será exibido.

#menu li a { background: url(images/sprites.jpg) no-repeat;
 display: block; width: 120px; height: 60px; }
 /* define para cada item a posição em que o sprite está na imagem /*
 #menu li .home { background-position: 0px 0px; }
 #menu li .home:hover { background-position: 0px -60px; }
 #menu li .textos { background-position: 120px 0px; }
 #menu li .textos:hover { background-position: 120px -60px; }
 #menu li .contato { background-position: 240px 0px; }
 #menu li .contato:hover { background-position: 240px -60px; }

7. Seja autêntico – não copie imagens de outros sites

Como eu disse lá no começo, o Google dá muito importância para a relevância da imagem para os usuários, então ele não vai aceitar que você utilize-se de imagens de outros sites, dando assim conteúdo duplicado ao seu visitante.

Por isso, seja autêntico! Ao invés de copiar a imagens de outro site, apenas se inspire nela e crie a sua própria.

Conclusão

Para ter uma melhor ideia do quanto essas dicas são relevantes, procure em seu Google Analytics as informações de quantos são os visitantes que chegam ao seu site através do Google Images, procure em Fontes de Tráfego, você pode se surpreender com o número de visitantes que chegam ao seu site dessa forma.

No Portal Seu Negócio na Internet você vai encontrar dicas bônus para otimização de imagens, como uma dica para criar relatórios personalizados do Google Analytics para acompanhar o tráfego que as imagens geram para suas páginas, além de dicas para quem administra sites WordPress e quer usar plugins para essa tarefa.

Espero que gostem e aproveitem as dicas. Deixem suas dúvidas e comentários.