Tanto as imagens, quanto figuras e fotos podem se tornar arquivos, que é o conjunto de informações armazenadas e que são compatíveis com o mundo digital. São muito utilizadas na web, sendo que o que varia é apenas sua extensão. Apesar da grande maioria de pessoas não saber, ao realizar a otimizacao de sites, é muito importante que se realize também a otimizacao SEO de imagens, figuras e fotos, fazendo alterações em seu código, nome, entre outras coisas, para que elas fiquem mais visíveis aos motores de busca. A otimizacao de imagens compreende pequenos detalhes, desde alterar o nome da imagem até incluir tags (alt, title, longdesc) e links.

O que e uma Imagem?

Do grego imago, a definição de imagem vem sendo discutida desde a época pós-socrática dos filósofos na Grécia Antiga. Platão, em sua teria idealista, considerava a imagem como a idéia do objeto ou coisa que se via, sendo ela uma projeção da mente. Atualmente, se tem uma definição de imagem como a representação visual ou mental de coisas, pessoas, animais e objetos. O senso comum considera uma imagem seja um desenho, uma pintura, uma gravura ou qualquer outra expressão de idéia.

O que e uma Figura?

Uma figura é uma imagem que, para criá-la, foram utilizados recursos como desenhos técnicos, tabelas, representações gráficas ou esquemas. É algo um pouco mais ligado ao design e a qualificadora de uma imagem. É sinônimo de gravura e de imagem, muito utilizada na web.

O que e uma Fotografia?

Basicamente, fotografia é uma imagem obtida por meio de exposição luminosa numa câmera fotográfica ou semelhante, sendo ela muito utilizada no meio virtual.

Extensoes de Arquivos de Imagem

Não só a otimizacao SEO de imagens é muito importante quando se está fazendo a otimizacao de sites, mas também a escolha da extensão da imagem se torna relevante. Como dissemos anteriormente, os arquivos na internet podem ter diferentes extensões. As extensões de arquivos são como a identificação da imagem, para que possa ter um formato padrão quando desejamos armazená-la, executá-la, transferi-la, fazer sua impressão, etc.

Sabemos que a má escolha da extensão de imagens na otimizacao de sites pode fazer toda a diferença, pois o uso correto das extensões de imagem podem deixar mais rápido o carregamento de uma página em até 60%.

Tipos de Extensoes de Arquivo de Imagem mais utilizadas na Otimizacao de Sites

Depois de várias tentativas frustradas de utilizar-se de outras extensões, devido ao lento carregamento da página ou sua baixa qualidade, definimos que na otimizacao de sites é preferível que se use as extensões em .jpg e .gif. Vamos te explicar o por quê:

Extensão: .jpg / .jpeg / .jpe / .jfif

Nome: Joint Photographic Experts Group

Essa extensão é a mais recomendada para fotos e transferências de imagens para web, sendo a mais utilizada na otimizacao de sites atualmente por suportar até 16.777.216 cores distintas e proporcionar boa definição a imagem, sem deixá-la pesada. Além disso, a compressão da imagem/foto em .jpg é muito boa. Mesmo com sua compressão a imagem não perde tanta qualidade, pois com a compactação em .jpg o que se perde são as partes menos significativas da imagem, não sendo esta mudança perceptível ao olho humano. Apesar disto, nós, da Otimiza Brasil, ao realizamos a otimizacao de sites, preferimos salvar a imagem no modo otimizado ao invés de comprimi-la.

Extensão: .gif

Nome: Graphics Interchange Format

Essa extensão de imagem na otimizacao de sites é recomendada para arte linear, botões, logotipos, desenhos, animações, imagens com áreas transparentes, etc. devido a sua facilidade de exibir imagem de documento HTML na web. Exibe também elementos gráficos, bem como imagens de cores indexadas. Além disso, caso seja necessário, a extensão .gif tem seu tempo de compactação diminuído quando em comparação com as outras. O diferencial desta extensão é que ela suporta transparência, porém, não é recomendada no uso de arquivos de fotos pois, por utilizar no máximo 256 cores, prejudica a qualidade da foto.

Por que nao utilizar a extensao .PNG na Otimizacao de Sites?

Por mais que a extensão .png seja uma mistura das melhores características da .jpg e .gif, sua utilização não é recomendada na otimizacao de sites. Além de pesar muito na página, fazendo com que o carregamento dela se torne moroso, a extensão .png é incompatível com alguns navegadores. Temos como exemplo o Internet Explorer 6.0  que por não suportar os efeitos de transparência png, exibe campos azulados.

Mesmo as imagens mais simples, que não exigem tanta quantidade de cores, ficam mais pesadas em .png do que quando nas extensões .gif e .jpg.

Por a otimizacao de sites trabalhar com imagens mais simples, nós, da Otimiza Brasil, preferimos utilizar somente as extensões em .jpg e .gif, dependendo da imagem, para que a página tenha imagens de boa qualidade e com carregamento rápido, pontos positivos para otimizacao de sites.

Otimizacao de Imagens em .JPG

Por utilizarmos programas de alta tecnologia, dispomos de alguns recursos que podem otimizar ainda mais uma imagem ou foto em .JPG.

Arestas Nítidas ou Sharpen Color Edges: este é o recurso mais utilizado por nós na otimizacao de imagens, pois diminui o foco do contorno das imagens, baixando ainda mais o tamanho delas, sem fazer com que a imagem perca a qualidade, ou seja, economizamos uma boa quantidade de Kb, mantendo a qualidade original da imagem;

Progressão ou Progressive Browser Display: muito utilizado em banners, headers e plano de fundo (background), ao ativarmos esse recurso, os atributos da imagem em JPGE permitem que um buffer seja criado na imagem. Ou seja, a imagem será exibida inicialmente em baixa qualidade, e, progressivamente, durante o carregamento dela, a qualidade irá se aprimorando até seu download completo. Esse recurso é muito útil principalmente para usuários que têm conexão lenta;

Opacidade ou Matte: permite que alterações sejam feitas no fundo da imagem como manter a transparência, por exemplo;

A única desvantagem da imagem em JPG é que ela não permite alterações em sua palheta de cores.

Otimizacao de Imagens em GIF

Da mesma forma que existem recursos para otimizar uma imagem em JPGE, dispomos também de recursos que otimizam as imagens em GIF:

Palheta de Cores ou Palette: a extensão de imagem GIF permite que façamos alterações em sua palheta de cores, podendo assim diminuir o tamanho da imagem;

Perda de Qualidade ou Loss: ao realizarmos alterações na imagem GIF, podemos ativar o recurso loss para o grau zero, que mantém a qualidade da foto intacta;

Lista de Número de Cores ou Number of Colors List: as cores desta extensão estão limitadas a 256 padrão, porém, podemos diminuir a quantidade de cores, seguindo apenas os tons escolhidos para diminuir o tamanho da imagem;

Opacidade ou Matte: permite que alterações sejam feitas no fundo da imagem como manter a transparência, por exemplo;

Remover Cores Inúteis ou Remove Unused Colors: opção que permite a remoção de cores que não estão sendo utilizadas na imagem, como, por exemplo, tons muito parecidos;

Interlaced Browser Display: tem a mesma função do Progressive Browser Display;

Formato Adaptive ou Exact: quando temos imagens simples e sem efeito degradê, inserindo sempre o número de cores correto, utilizamos o formato adaptive e quando a imagem está em degradê a opção a ser utilizada é a exact.

Pesquisando Imagens – Figuras – Fotos Digitais

Quando vamos realizar a otimizacao de sites, logo pensamos em otimizacao de textos. Entretanto, grande parte dos usuários da internet buscam figuras, imagens e fotos relacionadas a um determinado tema ou palavra que desejam, todos os dias a fim de incrementar sua pesquisa.

Da mesma forma que acontece na pesquisa por textos e palavras, levando em conta o grande numero de informações que o Google recebe, na busca por imagens, figuras ou fotos, o Google procura oferecer aos usuários os resultados mais relevantes, úteis e único que encontra.

Desta maneira, a otimização SEO de imagens, figuras e fotos se torna um fator de suma importância para que um site seja encontrado e tenha seu conteudo destacado na internet pelos motores de busca.

Identificando Imagens – Figuras – Fotos

A mudança e incorporação de atributos "alt" em HTML serão fundamentais para a otimização das imagens, figuras e fotos.

Será trabalhado o texto alternativo, "alt", em que dizemos ao Google e outros mecanismos de busca qual o nome da figura e qual o texto que deve ser relacionado a ela. De preferência, o texto deve ser único, explicativo e ter relação com as meta tags do título, descrição e/ou palavras-chaves da página onde a imagem se encontra.

Isso ajuda a reforçar a relevância das palavras contidas nas meta tags.

Tags essenciais para a Otimizacao de Imagens

Muito importante para otimizacao de sites, a otimizacao de imagens possui alguns atributos (tags) essenciais para que os resultados sejam positivos na busca em mecanismos de pesquisa da internet. São eles: alt, title e longdesc.

<alt>

O atributo alt, que vem de alternative, é essencial para otimizacao de imagens. Ele permite que se ponha um texto alternativo à imagem, como uma frase resumida que deverá servir como descrição dos conteúdos de um arquivo de imagem. Esse texto alternativo ajuda o Googlebot na leitura das imagens contidas em páginas da internet, sendo também atributo essencial para boa otimizacao de sites, principalmente no rankeamento, bem como a informação que servirá como determinante nas pesquisas. A principal função desta tag é permitir que se escreva algo alternativo que represente ou descreva a imagem, porém, uma descrição breve que envolva no máximo 5 palavras. Justamente por esse texto representar uma imagem, ou dizer o que significa aquela imagem, que ele deve ser breve e coeso. Tenha sempre em mente que o preenchimento exagerado da tag alt com palavras-chave (keyword stuffing) pode fazer com que o Google considere sua página um spam.

É importante lembrar que na otimizacao de imagens, quando formos mexer com a tag alt, devemos evitar o uso de stop words (de, para, com, etc.), por ficarmos limitados a um número baixo de palavras. Por exemplo: ao invés de escrever ‘Vendo Filhotes de Spitz com Pedigree’ é preferível que se escreva ‘Vendo Filhotes Spitz Pedrigree’. Apesar de parecer algo incompleto para nós, o Googlebot vai entender a descrição perfeitamente, pois a frase estará otimizada sem as stop words.
Quando a imagem em questão está sendo utilizada como link, a tag alt também serve como texto âncora dela.

Além disso, o atributo alt será exibido sempre em algumas situações:

- quando por algum motivo o browser não carregar a imagem, por exemplo, conexão lenta, erro na tag source ou no caso do usuário estar utilizando um leitor de tela;

- enquanto a imagem está sendo carregada;

- quando a imagem não está mais disponível.

Nessas três situações então, o texto alternativo é mostrado aos usuários.

A tag alt somada a tag title permite que os bots entendam melhor o significado da imagem e se ela está bem relacionada com o assunto do tema em questão da página, pois o contexto da página deve estar coerente com o da imagem. Pois, por exemplo, a foto de um cachorro brincando na praia dentro de um site que fala sobre chocolates pode deixar o Google muito confuso, devido a imagem estar fora do contexto que o texto descreve. Esta tag é muito útil para os usuários com conexão lenta ou pessoas que se utilizem de leitor de tela e é compatível com todos os navegadores.

Como adicionar o Atributo <alt> na Imagem:

Ao inserir uma imagem numa página, o formato original da tag dela vai se formar sempre assim: <img src="rio-tejo.jpg"> .

Dessa forma que se encontra, você pode notar que o atributo alt não está ativado. Portanto, a imagem está pouco otimizada e não fornece quase nenhuma descrição de conteúdo da imagem para os bots, sendo então pouco provável que ela apareça como resultado nas pesquisas realizadas nos mecanismos de busca da internet. Você pode incluir o atributo alt na imagem simplesmente digitando-o junto com a descrição: <img src="rio-tejo.jpg" alt="Rio Tejo"/> .

Agora, a imagem com o atributo alt ficou mais bem otimizada. Porém, caso queira melhorá-la ainda mais, seja mais específico, lembrando sempre que a descrição deve ser breve: <img src="rio-tejo.jpg" alt="Rio Tejo Portugal Verão 2010”/> .

<title>

Como seu nome mesmo diz, este atributo padrão da imagem permite que se defina um título ao arquivo ou link. A tag title é um complemento da imagem e propõe uma informação adicional à ela. Não é obrigatória ou essencial como a tag alt, porém, é de suma importância completá-la quando se deseja otimizacao de sites e otimizacao de imagens em documentos HTML.

Além de ser importante para otimizacao, o atributo title tem outras relevantes funções:

- define o texto na barra de ferramentas (toolbar) do navegador;

- dá o título da página quando esta é adicionada aos favoritos;

- exibe o título da página nos resultados dos mecanismos de busca.

Ao ativar este atributo, ele gera o que chamamos de hint ou tooltip, contendo o texto que foi escrito. Hint ou Tooltip é aquela pequena caixa (popup), geralmente de fundo cor amarelo, que aparece ao passarmos ou deixarmos o mouse em cima da imagem, contendo alguma descrição da dela. Esta tag geralmente é usada para auxiliar o Googlebot a reconhecer imagens e links.

Ao contrário do texto da tag alt, o texto inserido no atributo title não tem um limite de palavras e podemos completá-lo com quanta palavras quisermos, apesar de que a dica é lembrar sempre de passar um texto útil, coeso e relevante para a página, sem ser excessivo nas palavras.

De utilidade incontestável, a tag title ainda é flexível pois é suportada pela maioria dos navegadores, são eles: Internet Explorer, Firefox, Opera, Google Chrome e Safari.

Como adicionar o Atributo <title> na Imagem:

Depois de ter otimizado sua imagem adicionando o atributo <alt>, você pode prosseguir, melhorando ainda mais ao colocar a tag <title>:
<img src="rio-tejo.jpg" alt="Rio Tejo Portugal Verão 2010” title=”Foto do rio Tejo em Portugal em pleno verão de 2010, época em que se encontrava repleto de peixes”/>.
Como podemos ver, agora a imagem tem descrição completa e informação suficiente para que os mecanismos de busca entendam do que se trata. É assim que uma imagem se torna bem otimizada, ficando mais visível e compreensível aos buscadores.

<longdesc>

Por fim, apesar de pouco utilizado, o último recurso de otimizar imagens por atributos, <longdesc>, é utilizado quando os atributos alt e title não foram suficientes para se descrever a imagem. Longdesc vem de long description, que significa descrição longa. Este atributo fornece ao usuário um espaço para que seja inserido um link para uma URL diversa daquela, ou seja, cria-se um link visível a todos que irá direcionar a uma URL com uma descrição maior. Por ser uma nova URL, poderá ser feita uma descrição completa, com quantas palavras o usuário desejar. O atributo longdesc não é muito utilizado por ser suportado por pouquíssimos browsers.

Como adicionar o Atributo <longdesc> na Imagem:

Para continuar com o exemplo que demos, basta redigir na mesma tag da imagem o atributo longdesc:
<img src="rio-tejo.jpg" alt="Rio Tejo Portugal Verão 2010” title=”Foto do rio Tejo em Portugal em pleno verão de 2010, época em que se encontrava repleto de peixes” longdesc=”www.descricaocompleta.com” />.

Outros meios de Otimizacao de Imagens:

Além do uso de tags, existem outros meios para se otimizar uma imagem, temos alguns:

Dar nome ao arquivo de imagem: geralmente, os arquivos de imagem, principalmente fotos, são transferidos com nomes genéricos como “foto001.jpg” ou “DSC0049.jpg”. Esses nomes genéricos deverão ser evitados, pois, com eles, os spiders não entenderão do que se trata a imagem. A imagem deverá ter nome específico. O primeiro passo para começar a otimizacao de imagens com nome genérico é mudar o nome deste arquivo de imagem que vai ser utilizado. Além disso, quando for necessário utilizar mais de uma palavra para o nome da foto, é preciso que as palavras fiquem separadas por hífen e não por underlines, como a maioria pensa. O hífen proporciona separação exata para que letras não se misturem, deixando o nome da imagem sem sentido ou, até, com sentido diverso daquele esperado;

Qualidade, resolução e extensão: na otimizacao de imagens é muito importante que se atenha a pequenos detalhes como a qualidade, resolução e extensão (formato) da imagem. Deve-se escolher extensões padrão e que proporcionem a melhor qualidade e resolução possível a imagem, sem que ela fique muito pesada. Imagens pesadas tornam uma página lenta e velocidade de carregamento vagarosa. Todas essas três características da imagem devem ser conciliadas de uma forma que não atrapalhe na otimizacao de sites e na otimizacao de imagens;

Evite cópias: o mais indicado é ter fotos exclusivas e próprias para sua página, mas caso copie alguma imagem de um outro site, você deverá mudar os atributos dessa imagem para que o Google não puna sua página por conteúdo duplicado (duplicated content);

Forneça um contexto compatível com sua imagem: a imagem inserida geralmente é associada ao significado do texto que está em sua volta. Por isso, dentre outros fatores como a organização, que a imagem deve ficar posicionada conforme o contexto, ou seja, o texto deve ter palavras-chave que combinem com aquelas inseridas no alt e title da imagem que se posiciona perto dele.

Podemos concluir então que a otimizacao de imagens que envolve também a otimizacao de sites é algo muito complexo e detalhado. Portanto, entre em contato com quem realmente entende do assunto. Nós, da Otimiza Brasil estamos a sua disposição para tirar qualquer dúvida sobre otimizacao de sites e otimizacao de imagens!

Como funciona a Busca do Google por imagens, figuras e fotos?

O Google imagens é um serviço de busca prestado pelo Google que por sua vez, busca diversas imagens, figuras e fotos na internet.

Google não interpreta o que está contido nas imagens, figuras e fotos, mas lê o que está contido nos atributos presente nas figuras, que deve ser adequadamente preenchido no momento de se escrever ou otimizar o site.