Índice de Conteúdo

Porque devo otimizar minhas imagens?

Talvez você já saiba a necessidade disso e só queira um método atualizado e funcional. Mas caso ainda não saiba nada sobre o assunto, e ficou boiando… Otimizar minhas imagens? Anh? Oo

Bom, explico:

As imagens que pegamos da internet ou mesmo aqueles fotos tiradas com smartphone contém uma série de informações que não são visíveis a nós. E nem adianta colar a cara na tela agora. Essas informações são chamadas de matadados, são códigos que ficam armazenados no arquivo e que apresentam a imagem para compreensão semântica dos mecanismos de busca, já que computadores não são capazes de interpretar a imagem pura.

Portanto, é essencial otimizar suas imagens para que possa através das mesmas, aumentar sua relevância em determinado assunto, além de poder contar com o trafego extra de um google imagem por exemplo.

Pontos mais importantes

Quando pensamos em otimização de imagens, há diversas possibilidades do que fazer, algumas são bem simples e outras são profissionais. No entanto, todas tem o mesmo propósito e devemos nos ater a essa linha, segue abaixo as principais dicas para otimizar suas imagens que não necessitam de grande conhecimento ou softwares poderosos:

Qualidade da imagem

Aqui estou falando de qualidade visual mesmo. Não podemos esquecer que as imagens te destacam em determinadas páginas, atrai olhares, atenção e gera sentimento.

Mas porque isso é importante se falei anteriormente que os computadores não são capazes de tal interpretação?

Bom, os computadores não. No entanto, eles são capazes de mapear o comportamento humano, e quanto mais pessoas forem atraídas por sua imagem, mais cliques terá, mais compartilhamento, mais usuários interessados em seu conteúdo e consequentemente maior relevância para os mecanismos de busca.

A dica aqui é

Sempre produzir conteúdo pensando na experiência do usuário.

Não estou dizendo para esquecer as técnicas de SEO, preste atenção nelas, mas não escreva para o google.

Se colocar no lugar do usuário pode ajudar em várias ocasiões.

Pergunte-se:

  • Essa imagem é atraente e desperta sua curiosidade?
  • Tem ligação com o tema trabalhado? A imagem tem que expressar relevância. Não vá colocar uma imagem nada a ver com o que está falando no texto só porque ela é bonita, ninguém gosta de ser enganado ou decepcionado. Você acabará penalizado de forma indireta.

Quanto menor melhor

Quanto menor o tamanho da imagem, melhor será do ponto de vista do SEO. Essa afirmação parece contraditória, afinal associamos a maior imagem à maior qualidade.

Mas a qualidade como falado acima, não se deve apenas a resolução, dpi, espectro de cores, etc; e sim ao aspecto psicológico. Note que não perguntei lá se um fotógrafo profissional utilizaria, mas se ela desperta seu interesse.

Na internet, o grande foco é velocidade. E pra quem já teve o desprazer de abrir toda a estrutura de um site e ficar esperando meia vida para o carregamento da imagem, sabe do que estou falando.

Precisamos ficar atento ao tamanho do arquivo para não utilizar tanto a bandwidth de sua hospedagem e para que não afete o tempo de carregamento do site.

Ok, mas o que posso fazer?

Salvar imagem

Dica para salvar sua imagem de forma eficiente

A começar no momento de salvar a imagem, há alguns programas como Corel Draw e Photoshop que tem a opção de Salvar para Web… ou em inglês Save for Web & devices… Se o seu programa tem essa opção utilize, é melhor do que o conhecido salvar como porque automaticamente ele retira informações metadadas desnecessárias de sua imagem e reduz a qualidade de uma forma que não haja perda perceptível, comprimindo consideravelmente o tamanho do arquivo.

Caso não possua um software com essa função, não se preocupe, há diversas outras maneiras de fazer a mesma coisa.

Há uma grande variedade de programas gratuitos que ao salvar ele apresentará uma tela com algumas opções, dentre elas provavelmente você deve encontrar a opção qualidade da imagem, não tenha medo em reduzi-la, faça testes. Você vai notar que as vezes, o pouco que reduz, não é possível de notar e já diminui bastante o tamanho. Em geral, até cerca de 80% da qualidade original de uma imagem de alta resolução é possível reduzir sem grandes mudanças visuais, mas vai depender do reder de cada programa.

Embaçado

Outra opção bacana é embaçar (ou blur) um pouco a imagem, cerca de 5% é suficiente. Se o programa de edição for mais completo e você entende bem do assunto é possível embaçar um pouco mais, apenas no fundo da imagem, atraindo o olhar para determinado ponto estratégico, focando a parte mais importante da mensagem.

Essa opção é legal para que não tenha problemas com indexação em alguns mecanismos. Que podem reconhecer símbolos como mensagens implícitas nas imagens.

Excluir dados

Mesmo em programas leves, por vezes temos a opção de excluir (ou de manter) arquivos EXIF, esses são os dados e referências de histórico dessas fotos que podem ser retirados para te economizar um pouquinho de espaço.

Se você é um fotógrafo profissional, leia atentamente a dica para fotógrafos no final do post.

Criando conteúdo relevante na imagem

Agora que você já aprendeu a salvar sua imagem de forma adequada, é preciso saber como inserir conteúdo relevante na mesma.

Inserir dados em imagens para otimizar postagens do seu blog

Siga esse breve passo-a-passo:

  1. Vá até o arquivo salvo da imagem, eu espero!
  2. Clique com o botão direito do mousse
  3. Entre em Propriedades
  4. Na aba Geral. Defina um nome melhor do que DS2000907 para sua imagem
  5. Clique sobre a aba Detalhes
  6. Na parte Descrição você pode definir valor para título, descrição e marca
  7. 5 estrelas pra sentir gratificado pelo esforço até agora
  8. Aplicar. Ok

Editar detalhes de metadados em imagens para otimização da postagem

Agora sim você pode upar sua imagem com confiança!

Mas ainda não acabou. Tenho mais dicas.

Dicas extra:

Onde hospedar

A dica aqui é sempre armazenar suas imagens na mesma hospedagem de seu site. Aqui há quem diga o contrário alegando ser mais rápido carregar arquivos de outras fontes e não correr o risco de sobrecarregar seu servidor.

Mas com as imagens otimizadas, não terá grande problema de tamanho, e bem configurada tampouco terá problema de solicitações simultâneas no servidor. Além do mais, haverá um ganho implícito de ter algo de qualidade referenciando seu site. Por isso eu prefiro manter minhas mídias upadas com minha url personalizada.

Tags Title e ALT

Sei que você já escreveu nas propriedades da imagem antes de upar, mas é sempre bom reforçar o conteúdo da imagem e de seu texto através das tags title e alt no momento de incorporar ela em seu site ou post.

A dica aqui é dar uma descrição curta e objetiva.

Atenção especial é com atributo ALT, pois caso haja conexões impossibilitadas de visualizar sua imagem, essa descrição será apresentada como alternativa à navegação.

Imagens no SITEMAP

Muita gente acaba deixando as imagens fora do sitemap do site, ou por opção própria ou devido a configuração default dos plugins e outros que realizam de forma automática.

Inclua as imagens de forma adequada segundo os critérios da google ou libere essa função para melhorar a experiência do usuário e facilitar a indexação de sua página na google imagem. Terá bons frutos daí.

Formatos

A essa altura do campeonato acho que nem precisa mais de grandes detalhes, mas utilize formatos populares para imagens. Cada qual em sua devida função:
GIF para pequenos logos, botões e outras funções gráficas miniaturas que não dependem de grande qualidade ou gama de cores.
JPEG para fotografias.
PNG para elementos gráficos, em especial os que necessitarem de fundo transparente.

Tamanho aparente da postagem

Se você vai postar em uma plataforma que realiza adaptações automáticas ou recorte na imagem, isso é menos preocupante. Mas nunca vai te fazer mal, então inclua no checklist:
Salve e upe a imagem do tamanho exato que pretende apresenta-la. É desnecessário e não recomendado colocar uma imagem muito maior do que o espaço para mostrá-la, ainda que tenha a mesma proporção.

Exemplo: Utilizar uma imagem de 1200×800 para uma publicidade no menu de seu blog com 300×200 de espaço.

E mesmo que a imagem já esteja no tamanho exato, determine o mesmo no atributo que utilizar para postar.

Não deixe espaços em branco

Sempre evite aqueles recortes e colagens de imagem onde o conteúdo foco esteja flutuando no vazio do centro haja um espaço sem nada só pra imagem caber ali. É de mal gosto e tira credibilidade.

Procure imagens adequadas ou crie com qualidade.

Plataformas para otimizar minhas imagens

programas que facilitam a vida. Mas podem ser demasiado caros, ou apresentarem bugs e qualidade baixa.

Então segue minha recomendação de boas alternativas caso não tenha possibilidade financeira ou conhecimento para os softwares mais elaborados.

PhotoScape – Programa gratuito para edição de imagens, parece esses app de smartphone, tudo bem intuitivo com bastante opção interessante e ótima qualidade. Há algumas limatações, mas vale conferir!

Caesium – Compressor poderoso de imagens. Gratuito, funciona para múltiplas imagens e formatos.

Smuth.it – Compressor dinâmico e intuitivo – Possui também o plugin para wordpress.

EWWW Image Optimazer – Um dos plugins mais utilizados para otimizar imagens de forma automática no wordpress, utiliza uma coletânea de formas de compressão.

Kraken – Compressor online, muito eficaz – Freemium

Yoast SEO – Pluging poderoso que merece um post dedicado, ajuda bastante no SEO on page de modo geral, incluindo inserção de tags nas imagens.

Dicas para fotógrafos e para uso de fotos profissionais

Deletar os metadados de suas imagens envolve em excluir dados importantes de suas fotos como: onde, quando, com que câmera, lente, abertura… Dentre essas, o autor (ou seja, os direitos autorais). Portante procure como bloquear essas funções e cuidado onde publica.

Para os outros, é importante estar ciente dessas informações também, pois você pode tomar um processo por violação de direitos autorais sem querer querendo.

Em breve volto aqui para recomendar fontes de imagens excelentes, pagos e gratuitos para que ambas as partes fiquem satisfeitos. =)

DPI não diminui arquivo

A sigla DPI (Dots per inch ou na tradução para o português, pontos por polegada) se refere a qualidade da imagem quando pensamos no papel, na internet e no computador de forma geral (salvo exceções que utilizam programas específicos para parte gráfica) não se trabalha com polegadas e sim com pixel, então tanto faz o dpi de sua imagem, ele não representa algo relevante quando buscamos otimizar uma imagem. Alterar o DPI não fará diferença alguma no tamanho final do arquivo.

Por hora é só, o que acharam? Comente abaixo se você já utilizava algumas dessas técnicas.

Qualquer dúvida é só perguntar também!