13 Dicas de Ouro para Otimizar Imagens

em set 11, 2014:por

John Martin

John Martin, é especialista em Marketing Digital e adora encontrar soluções simples e objetivas para os problemas pessoais e empresariais de um mundo imerso na web!
Views784
otimização-de-imagens

Otimizar imagens não é uma tarefa fácil, no entanto pode render muitos frutos com o aumento de visibilidade nos mecanismos de pesquisa e também com melhora nas conversões. Confeccionei uma lista de dicas para otimização de imagens em seu site que acredito possa ajudar bastante.

Por que otimizar suas imagens?

Se aumentar a quantidade de acessos em seu site é um dos objetivos, otimizar imagens é uma tarefa que pode lhe auxiliar a cumprir esses objetivos.

Por exemplo, no dia 12 de outubro de 2013 tive 1.477 visitas de mecanismos de pesquisas ( visitas orgânicas) sendo que 369 são provenientes do Google Imagens. Isso significa que 25% ou 1/4 do total de visitas são originadas pelas minhas imagens. O mais impressionante é que as visitas provenientes do Google Imagens são absurdamente maiores que as visitas de todos os outros mecanismos de pesquisa, JUNTOS!

Visitas Orgânicas em Seo Martin

Preguiça não faz parte das competências necessárias para otimizar imagens!Seo Martin

01. Copyrights

Antes de mais nada, não crie problemas com imagens que contenham direitos autorais. Existem tantos bancos de imagens com custo reduzido que não entendo por que alguém que ganha dinheiro na internet não os utiliza.

De qualquer jeito, se você não quiser comprar as imagens, evite navegar no Google em busca da cópia perfeita; leia o artigo de Como encontrar imagens sem restrições de uso no Google e resolva seus problemas com imagens!

02. Salve suas imagens com tipos de arquivos padrões

Não invente, use formatos de imagens padrão e amplamente suportadas. O uso de imagens em JPEG, GIF, PNG e BMP nunca trará problemas. A dica nesse ponto é entender as características de cada tipo de arquivo de imagem e como eles se comportam. Imagens GIF tem qualidade inferior do que as JPG e para fotos com certeza não seria minha opção, mas são excelentes para ícones e ilustrações com poucas cores!

03. Use nomes adequados e amigáveis

Nunca fiz uma contagem oficial mas acredito que em mais de 90% dos sites que faço auditoria de otimização para mecanismos de pesquisa, encontro imagens com os nomes de arquivos originais da câmera como por exemplo DSC_8765.jpg ou Imagem786.jpg.

Nomear todas imagens adequadamente é a base da piramide de resultados satisfatórios. Use palavras-chave, mas seja coerente com a imagem e não crie um nome muito grande ou com letras maiúsculas. Lembre-se usar sempre minúsculas e separar as palavras com hífen ( – ) ao invés de sublinhado ou espaço. Veja alguns exemplos de nomes otimizados abaixo:

  • filhote-dalmata.png
  • bolo-chocolate-com-bombons.jpg
  • racao-para-filhotes-cachorro.png

04. Preste atenção para qualidade das imagens

Imagens e fotos de qualidade são facilmente reconheciedas pelos usuários e não existe a menor dúvida que o impacto sobre eles é diretamente proporcional.

A probabilidade desses usuários gostarem da imagem e ou da página é maior e com isso também aumenta a probabilidade de que compartilhem o seu conteúdo.

Imagens claras e nítidas também ficam melhores nas versões em miniatura exibidas nas pesquisas dos mecanismos de pesquisas como o Google, ou seja, maior chance do clique! Procure um bom banco de imagens e gaste um pouco com imagens profissionais!

05. Não exagere nas dimensões das imagens

O tamanho de suas imagens influencia diretamente no tempo de carregamento da página, importante fator de classificação do Google e outros buscadores, que favorecem sites mais rápidos.

Dimensionar o tamanho das imagens em largura e altura coerentes são fundamentais para evitar desperdício. Se for usar uma imagem como um thumbnail que costuma ter 320×200 pixels, não use uma imagem de 1.280×800 pixels; a menos que sua plataforma redimensione e reduza o tamanho automaticamente.

06. Fique atento ao tamanho dos arquivos

Além da dimensão, outros fatores como tipo de arquivo e aplicativo usado para salvar a imagem, são essenciais para reduzir ao máximo o tamanho da imagem sem perda de qualidade.

Não espere salvar uma imagem no Paint com a mesma qualidade e tamanho do Photoshop!

Salvar uma imagem exatamente igual em programas distintos, resulta em tamanhos de arquivos completamente diferentes.. Isso ocorre por que a capacidade de compressão e as configurações disponíveis variam entre cada um.

Mas se você não tem Photoshop ( por que não quer gastar ou o micro vira um mico com ele) então salve suas fotos onde quiser ( pode até ser no Paint) e depois utilize um aplicativo para ajustar dimensão e o tamanho das imagens.

Já usei vários mas nunca me dei tão bem com nenhum outro como Fotosizer, que consegue ajustar arquivos múltiplos de uma só vez. Abaixo o link para download se desejar testa-lo.

Também recomendo o Smush.it, mais simples e com menos recursos, mas você só precisará enviar as imagens através desse serviço web e recebê-las de volta redondinhas.

07. Posição das imagens

Quanto mais próximo do começo da página, ou para quem entende de html mais próximo do <body> a imagem estiver melhor.

Se sua página fala de teclados wi-fi por exemplo, faz todo sentido que tenha uma imagem de um teclado wi-fi mais próxima do início do artigo. Normalmente isso faz tanto sentido que se não vejo uma imagem relacionada do artigo que estou começando a ler no início até paro de ler ( shame on me, sad but true)

Lembre-se: se faz sentido para o usuário faz sentido para o Google! Seo Martin

Isso ocorre por diversos motivos mas principalmente por que o Google verifica as páginas e domínios de acordo com sua importância e relevância, então é comum que ele verifique tudo que estiver em sites como a Folha mas em páginas de pouca expressão seu robô não faça a varredura completa, principalmente por que isso significa custo para o Google (mesmo com as atualizações e melhoras de performance que vieram com o hummingbird).

Essa dica foi lembrada pelo Caio Japiassú e pelo Alex Sander Pelati no grupo de SEO e é de vital importância pois todo tempo que gastar para otimizar uma imagem será jogado fora se o Google não chegar ao ponto de visualiza-la e indexa-la.

08. Não custa adicionar título em suas imagens

Mesmo sabendo que os buscadores não utilizam o título da imagem como fator de classificação, é importante prestar atenção nos títulos das imagens, que normalmente são exibidos quando passamos o mouse em cima delas ( veja na imagem de exemplo abaixo) podem ser importantes para convencer o usuário a continuar sua navegação pelo seu site, o que pode reduzir a taxa de rejeição proveniente de buscas e influenciar seu ranking e visibilidade.

Recomendo que use como Título uma descrição curta ou algum tipo de orientação para o usuário como o exemplo abaixo.

exemplo de título de imagem

O título é um atributo global do Html e especifica informações extras para um elemento, nesse caso uma imagem.Seo Martin

09. Se preocupe com a experiência de todos usuários

O atributo ALT da imagem, também conhecido como descrição alternativa da imagem, exibe um texto para a imagem, caso ela não possa ser exibida. Não importa se a conexão está lenta ou a imagem foi removida do servidor, o usuário terá um texto para explicar do que se trata a imagem em quaisquer situações que isso ocorrer, veja o exemplo abaixo.

Outro ponto importante é que os principais softwares de leitura de páginas web para deficientes visuais utilizam o campo de descrição alternativa para explicar sobre do que se trata a imagem. Se por algum motivo esse campo estiver em branco, sua imagem não será interpretada por esses softwares e não será devidamente transmitida para esse público. Saiba mais por que preencher descrições alternativas nas imagens é tão importante!

Preencher essa descrição é uma importante forma de melhorar a experiência dos usuários além de fornecer informações para os buscadores indexarem e aumentarem sua visibilidade. Use descrições alternativas que sejam coerentes com as imagens e não tente manipular com uso de palavras chave!

Lembre-se que tecnicamente as imagens não são inseridas numa página html, elas são conectadas através de links com essas páginas. Seo Martin

10. Uma imagem vale mais COM mil palavras

Você já notou que o Google Imagens encontra diversas imagens que não estão nomeadas adequadamente? Como que o Google identifica que aquela imagem de nome DSC0456.jpg é um dálmata no sítio?

De forma bem simples e resumida o Google e outros buscadores conseguem identificar uma imagem através do texto que está em volta dela, ou seja, ele consegue visualizar a imagem pelo contexto.

Por isso, use imagens que estejam dentro do contexto e principalmente crie conteúdo de texto de qualidade, relevante e relacionado com a imagem.

11. Organize todas suas imagens

Mantenha todas imagens em pasta separada e se for possível use subpastas para dividir o conteúdo de imagens, com alguma lógica como mês em que foram enviadas para o servidor ( upload) ou talvez por assunto.

Em vez de ter arquivos de imagem espalhados em diversos diretórios e subdiretórios no seu domínio, considere consolidar suas imagens em um único diretório; por exemplo, seusite.com/imagens/Matt Cutts

Se você usa um gerenciador de conteúdo como o WordPress por exemplo, isso já é feito automaticamente na pasta http://seu-site.com /wp-content/uploads/, no entanto se seu site for feito de maneira estática, é super importante se atentar para esse detalhe. Se uma agência estiver confeccionando seu site, peça para a mesma manter todos os arquivos em uma pasta única, que também pode ser um subdomínio como http://imagens.seu-site.com.br.

12. Respeito máximo ao layout

Se puder, especifique a dimensão (largura e altura) para todas as imagens de sua página.

Como o carregamento da página nos navegadores pode ser feito antes das imagens serem carregadas, o posicionamento da página pode sofrer alterações no decorrer do carregamento da mesma. Definir as dimensões melhora o carregamento da página sem reposicionamentos desnecessários.

13. CSS Sprites

CSS Sprites do Google

Utilizar CSS Sprites significa aglomerar várias imagens em uma única e depois gerenciar com CSS o posicionamento de cada pedaço que você deseja exibir em cada local específico de sua página. Além de conseguir reduzir o tamanho da imagem consolidada em relação às imagens soltas, você também consegue reduzir a quantidade de requisições no servidor, o que influencia diretamente na velocidade de carregamento da página.

Essa é uma técnica avançada em que exige maior conhecimento técnico, no entanto você pode usar o SpriteMe para facilitar sua vida se realmente quiser tentar sem muito conhecimento!

Minha recomendação é usar CSS Sprites somente para imagens de sistema ( como do menu e ícones que são usados de forma repetitiva).

Atenção: Para imagens relevantes ao assunto da página, não utilize esse método, acredito que seja melhor inserir cada uma com seu nome de arquivo, título e descrição alternativa relevante e otimizada individualmente :)

Palhinha do Seo Martin

A otimização de imagens tem foco primário em aumentar a visibilidade de seu site, mas de uma forma mais ampla, pode ser feita direcionada para melhorar sua conversão final também. Com imagens personalizadas e bem pensadas, é possível induzir o usuário a clicar no botão comprar, enviar um formulário ou ver alguma informação relevante.

Imagens otimizadas com o layout da página são uma ótima ferramenta de conversão!Seo Martin

Muitos estudos comprovam que o posicionamento do corpo nas imagens tem grande impacto nas ações dos usuários ( mais do que olhos e rosto). A imagem abaixo mostra um estudo amplamente divulgado em que 2 versões ( teste A/B) de uma mesma página foram confeccionadas mas com imagens distintas.

Metade dos visitantes foi direcionada para a versão A (esquerda) e a outra metade para a versão B (direita). Com uso do famoso CrazyEgg para detecção do mapa de calor da visão dos usuários é nítido que a versão B consegue direcionar mais atenção para o conteúdo que se deseja passar.

otimização de imagem focada em conversão

Mas a questão crucial não é a posição do corpo, rosto ou olhos do bebê e sim a atenção quase que real do bebê no produto. Psicológico talvez, complexo com certeza, mas acredito que a personalização das imagens de acordo com o conteúdo de seu site seja a próxima barreira na otimização de imagens!

Deixe um comentário

O que achou do conteúdo? Compartilhe sua opinião:

Gostou do nosso conteúdo?

Deixe seu e-mail aqui e receba as novidades do mercado

eNext Dashboard

eNext Dashboard

SLI Systems

SLI Systems

Calendário

 
JUL 25