Otimizar imagens para blogs: dicas infalíveis e boas práticas

22.01.2018

Otimizar imagens para blogs: dicas infalíveis e boas práticas

3 dicas para criar um padrão e otimizar as imagens do seu site

Seja um site institucional ou e-commerce, é bem provável que você irá se sentir confuso no momento de escolher as fotos adequadas.
Qual o melhor formato? E o tamanho? Paisagem ou retrato? Como otimizar imagens? 

Bom, talvez você fique preocupado (com toda razão), ou então você irá cometer o erro que mais da metade dos sites cometem: utilizará imagens pesadas que demoram para carregar ou ainda, imagens pequenas demais, que causam distorção e poluição visual. Esses são apenas os problemas que o usuário nota ao acessar o site, sem considerar impacto destas ações no todo poderoso, onipresente, maior e mais conhecido buscador da Internet: o Google.

Pode parecer esquisito, mas as imagens do seu site importam muito, ainda mais para os buscadores como o Google e você já vai entender o porquê.
Mas antes, vamos começar com dois tópicos básicos para que suas imagens mantenham um padrão: Formato e Dimensão.

Dica 1

Formato das imagens

Para simplificar, vamos apontar os principais formatos que nós indicamos que você use:

GIF: é bem prático para a web, pois salva imagens em formato pequeno mantendo fidelidade na imagem. É o formato mais utilizado para pequenas animações.  

PNG: assim como o GIF, ele também mantém fidelidade da imagem, mas quando comparado ele apresenta superioridade ao GIF, por preservar mais detalhes. É o mais indicado para vetores, e por permitir transparência, também é o indicado para fotos de produtos.

JPG (ou JPEG): indicado para fotografias, é o mais popular da web. Porém é preciso cuidado ao utilizar esse formato pois quando comprimido em excesso pode causar perda de qualidade nas imagens.

Nossa recomendação:
JPEG para fotos, PNG para vetores e imagens de produtos, GIF para animações.

Dica 2

Dimensão das imagens

A fim de evitar qualquer tipo de distorção ou demora no carregamento da imagem, lembre-se:

  • Para blogs, notícias, eventos etc, a largura máxima não deve ultrapassar 1200px
  • Usar sempre resolução 72dpi
  • Salve para web com 70% de qualidade
  • Usar preferencialmente imagens em formato paisagem (horizontais)
  • O “peso” máximo deve ser de até 150kb por imagem 

Dica: Usando o compressor TinyPNG (funciona para PNG e JPEG) você consegue deixar a imagem bem levinha. 🙂

Outras dicas:

  • Usar sempre letras minúsculas no nome do arquivo
  • Trocar espaços por hífens (-)
  • Não utilizar acentos nem caracteres especiais como ç
  • Usar sempre nomes descritivos (lembre-se o google precisa ler sua imagem)

Como fazer:

Para te mostrar passo-a-passo o processo de otimização de uma imagem, vamos pegar de exemplo a foto mais curtida no instagram em 2017, o nascimento da Alana Martina, filha do craque Cristiano Ronaldo.

Coloque a foto no editor de imagens da sua preferência, nós utilizamos o Adobe Photoshop.
No caso do Photoshop, com o comando Ctrl + Alt + I você modifica a dimensão da imagem e também a resolução desejada.
🚨 Mas atenção, nunca aumente o tamanho original da imagem.

Como otimizar imagens e ajustar tamanho da imagem no photoshop?

Para salvar para web use Ctrl + Alt + Shift +  S  e irá aparecer a seguinte tela:

Como otimizar imagens e salvar para web?

Depois disso, é só salvar a imagem, mas claro, antes de finalizar por completo lembre de ajustar o nome do arquivo.

como otimizar imagem para blog e salvar imagem no photoshop

 

 

Dica 3

SEO para imagens

Trabalhar com SEO nada mais é que trabalhar com a otimização para mecanismos de busca e no caso das imagens isso não poderia ser diferente.

Para que as imagens do seu site sejam encontradas pelo Google, você deve adequar alguns itens de SEO.

Atributo title:  funciona como o  título da sua imagem, como uma legenda. Você pode usar inclusive o mesmo nome dado ao arquivo da imagem.

Exemplo: nascimento-filha-cristiano-ronaldo.jpg

Atributo alt: ele é uma ALTernativa ao atritubo title. Serve para passar informações adicionais, alternativas, sobre a imagem em questão. Além disso, o atributo alt também é utilizado quando ocorre algum tipo de problema na imagem e ela não pode ser exibida, é o texto contido no atributo alt que irá aparecer.

Exemplo: Nascimento da filha de Cristiano Ronaldo é a foto mais curtida no instagram em 2017.

Ok, agora que você sabe o que é o atributo title e alt você deve estar pensando: “Mas como eu incluo esses atributos nas imagens do meu site?”
No caso dos sites em WordPress (como todos os blogs desenvolvidos aqui na Alpina) no momento em que você adicionar a imagem irá aparecer as opções para que o “título” e o “texto alternativo” seja incluso. 😍

Como otimizar imagens e incluir atributo ALT e o atributo TITLE nas imagens?

Bom, agora que você já sabe como otimizar imagens melhorando o desempenho do seu site, que tal fazer uma análise geral dele? Se você ficou interessado, é só acessar um outro post aqui do blog que fala de 5 Ferramentas para avaliar o desempenho do seu site. 😉

Ah, e não esquece de baixar nosso eBook: Mitos do Marketing Digital.  

Baixar eBook: Mitos do Marketing Digital