Como Fazer Otimização de Imagens

Como Fazer Otimização de Imagens

33 Comentários »

Os robôs do Google leem basicamente linguagem HTML e esse é o motivo pelo qual você deve manter o código do seu site em ordem, além de utilizá-lo corretamente. Passando as informações com mais relevância, além de facilitar a leitura do Google, também faz com que seu site tenha maior probabilidade de conseguir um bom ranqueamento.

Quando falamos em imagens para a Web, temos que ter em mente que esses mesmos robôs não leem figuras, já que para isso é necessário uma alta complexidade de processamento de dados e seria inviável para o Google ler todas as imagens que ele encontra por ai. Então, me pergunte como o Google sabe do que se tratam certas imagens?

Há dois atributos principais para o HTML que auxilia o Google nessa tarefa: o Title e o ALT. Eles são cruciais para o seu ranqueamento no Google Imagens. E por que ser visto nas buscas por imagens é importante?

Imagens primeiros lugares googleImagens nos primeiros lugares do Google

Quando a busca é feita por termos bem visuais como, por exemplo, artistas, lugares, carros e tudo aquilo que tem uma imagem associada de forma rápida, o Google tende a mostrar algumas amostras de imagens antes de alguns resultados na página de web, até mesmo em 1º lugar.

Aprenda mais como otimizar suas imagens e outros aspectos de SEO no nosso curso presencial.

Dando nome ao seu arquivo

É importante que os arquivos no seu computador não tenham nomes genéricos como “imagem.jpg” ou os padrões das máquinas digitais como “DSC001” e “IMAGE0001”.

Imagens nomes padrõesImagens com nomes padrões

Ao adicionar uma imagem ao seu site, a sua plataforma criará um link para ela que receberá parte do nome do arquivo original, portanto, encare como uma otimização de URL. Portanto, utilize keywords (sem acentos) e palavras que ajudem a entender do que se trata aquela figura. Se forem mais de uma palavra, utilize-hífen ao invés_de_ underline.

Nome otimizado imagemNome de imagem otimizado

Tag ALT

A função principal desta tag é fornecer uma descrição alternativa para a imagem. Como é a parte que será lida pelo Google, ele saberá do que se trata a imagem e sua relação com a página em que foi anexada.

Exemplo atributo alt

Como usar atributo altComo usar atributo alt


Pode funcionar também para questões de acessibilidade web como texto âncora quando a imagem é usada como link e, além disso, por programas como o Jaws, que auxiliam na navegação de deficientes visuais lendo o conteúdo da página. Indica, inclusive, o que é imagem ou link, nesse caso usando a tag ALT das imagens.

Por ser um texto alternativo que serve para representar uma imagem e não uma descrição, sendo, portanto, um equivalente em texto da imagem, é importante que se tenha frases curtas relacionadas ao local da imagem. Subtraia as “stop words” (para, de, com) e dê preferencia às suas palavras palavras-chave.

Para inserir o ALT nas imagens, abra o editor HTML e adicione alt=”texto com a keyword” apos a tag title da imagem. Em blogs, ao adicionar uma imagem, a própria plataforma te dá os campos em que colocará o alt e o title.

Tag Title

O complemento do ALT é o Title. Através dele podemos usar quantos caracteres forem necessários para descrever a imagem – porém não é bom escrever textos longos. O Title faz o que diz: é o título daquela foto, uma descrição mais detalhada, diferente do title que é um texto alternativo à imagem (ou a própria imagem em texto). Use-o de preferencia com palavras-chave, mas não exagere.

É o title também que gera o tooltip, ou aquela caixinha que aparece quando você pousa o mouse em cima de uma imagem.

Exemplo title otimizadoExemplo de Title otimizado

Utilizando as tags ALT e Title de forma correta ao publicar imagens em uma página o código ficará desta maneira: <img src=“URL COM NOME DO ARQUIVO DA FOTO NO FIM” title=“NOME DA FOTO DETALHADA” alt=“DESCRIÇÃO”>. Mas há ainda outros fatores que podem ser otimizados.

Qualidade e formato das imagens

Dê preferencia aos formatos padrões como jpg, gif, bmp e png e lembre-se: a qualidade de uma imagem pode mudar a velocidade de carregamento. Portanto, quanto maior o arquivo e/ou sua qualidade, mais lento será o carregamento e isso pode fazer com que o usuário perca a paciência ou não retornar ao site caso aconteça muitas vezes.

Entretanto, não adianta colocar imagens pequenas e de baixa qualidade. Pense no que o seu usuário vai pensar e tente achar um meio termo entre qualidade, tamanho e velocidade.

Conteúdo e Imagem

E por último, inserir as imagens relacionadas ao conteúdo acima ou abaixo do texto é um importante fator para aumentar a relevância imagem-conteúdo. Portanto, relacionar imagens com o conteúdo que está sendo explicitado é mais que importante. Ou seja, colocar num texto sobre café a foto de uma churrascaria não é uma boa estratégia.

Enfim, otimizar as suas imagens é definitivamente uma boa estratégias para atrair mais visitantes para o seu site, pois pode ser uma ótima porta de entrada. O Google cada dia mais presta atenção nesse segmento e a importância das imagens só tende a crescer.

E você, quais outras técnicas de otimização de imagens conhece? E para vídeos e música?

 

33 comentários para “Como Fazer Otimização de Imagens

  1. Além dos atributos ALT e TITLE,em um video sobre otimização de imagens, o próprio Matt Cutts da Google explica a importância de manter blocos de texto relacionados à imagem próximos dela, já que os robôs também acabam relacionando esse texto às imagens. No entanto, sempre fico em dúvida se dá no mesmo simplesmente colocar o texto aleatoriamente próximo às imagens, ou se seria melhor (ou talvez pior) utilizar o recurso “legenda” para inserção desses textos.

  2. Quando falamos em otimizar o tamanho das imagens, dependendo do software que vc usa existe grandes diferenças. Fiz um teste com uma imagem e no picpick a imagem ficou com 62k enquanto salvo no photoshop, nas mesmas condições de temperatura e pressão a imagem ficou com 18k. Dá trabalho, gasta tempo mas gera resultados!-)

  3. Muito massa essa ferramenta. Acabei de utiliza-la pela primeira vez. O resulto foi bom para alguns aspectos e ruim para outros, como no caso da otimizaçao de imagens, que sempre deixe em segundo plano. Com essa ferramenta pode-se disciplinar melhor o trabalho e acompanhar os resultados.
    Seria bem legal adicionar alguns elementos nessa análise como os links que estão apontando para o site.
    Obrigado por disponibilizar a ferramenta e parabéns pelo trabalho.
    Daniel

  4. Muito bom essa explicação sobre a otimização de imagens, eu nem sabia que tinha uma localização adequada quanto a tag Title e a tag ALT. Sempre ficava na dúvida se tinha alguma importância, quem deveria vir primeiro rs. Acho que pequenos detalhes, somados ao todo, fazem uma boa diferença na otimização de qualquer conteúdo.

    Obrigada por compartilhar informações tão relevantes! Estão me ajudando e muito a melhorar o meu blog! ;)

  5. Eu estou chocado com a qualidade do site de vocês, Vocês fornecem informações gratuitas que os gurus da internet cobrariam milhares de reais por elas. Parabéns pelo trabalho de vocês.

  6. Excelente artigo. Elucida vários pontos fundamentais para otimização de imagens, além de dar dicas de como fazer. Texto didático e cirativo.
    parabéns!

  7. Otimização de imagem é show…vale lembrar que existem ferramentas online como tinypng, minijpg e minimg com ótimo desempenho. Entre elas, o minimg.net geralmente consegue a melhor taxa de compactação, com a vantagem de otimizar imagens jpg e png ao mesmo tempo e opção de conversão do jpg em progressivo.

  8. Estou seguindo essas técnicas.

    Mas tenho ainda algumas dúvidas quanto à localização das imagens sem a tag alt.

    Também se há necessidade de usar URL nas imagens ou deixá-las sem a URL.

  9. Excelente artigo. Tenho utilizado várias dicas dos artigos publicados pelo SeoMaster e tenho obtido uma gradual melhora no posicionamento do Google. Parabéns!

  10. Ótimas dicas, parabéns.
    Só gostaria de saber uma coisa, se tenho várias fotos do mesmo assunto para postar no site, teria problemas eu incluir em todas as palavras chaves no nome e no alt da imagem ou seria melhor escolher apenas algumas para fazer isso?
    Grato,

  11. Essas técnicas de SEO são realmente muito importantes para posicionar o blog nas primeiras posições no Google!
    Parabéns…

  12. Ótima abordagem, artigo muito esclarecedor e com dicas muito importantes para posicionamento nos motores de busca, e ainda cria uma possibilidade de ser encontrado por uma imagem, aumentando assim o tráfego de seu blog! Abraço

    1. Olá @Joelson,

      Se a sua plataforma permite alterações do tipo, provavelmente existe um campo em cada imagem escrito (atributo alt ou alt).
      Caso não permita, sugiro que entre contato diretamente com o desenvolvedor para eles ajustarem diretamente no código fonte.

  13. Consegui 97% com Avaliação Geral: BOM. Para 100% só está faltando “Uso da palavra-chave no nome (src) da imagem”. Diz que a palavra-chave não foi encontrada. Exatamente qual imagem esse item analisa?

  14. Um tempo atrás eu li artigos sobre otimização de imagens e acreditei que se resumia apenas em colocar o ALT, mas tem também a parte da compressão das mesmas, e isso veio ao meu conhecimento ao ler este artigo, muito esclarecedor, e muito obrigado por compartilhar conhecimento e informação.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

SP São Paulo (11) 2640-7284 Rua Manuel da Nóbrega, 456 conj. 65 - Paraíso - São Paulo - SP
RJ Rio de Janeiro (21) 4126-1965 Tv. Domingos Candido Peixoto, 501 / casa 1 - Icaraí - Niterói - RJ