Como otimizar imagens para o seu blog

As imagens são elementos importantes para as postagens do seu blog: quando usadas de forma correta, elas tornam os textos mais agradáveis para ler e permitem melhor entendimento do que você está mostrando. Mas, há a situação inversa: se utilizadas da maneira errada, elas atrapalham a leitura e tornam sua página lenta para carregar. Veja neste artigo dicas para otimizar as imagens que você utilizará em seu blog.

Introdução

A famosa frase “uma imagem vale mais do que mil palavras” também se aplica aos blogs. Em quase todos os nichos, uma imagem consegue mostrar ao leitor exatamente o que você precisa transmitir. Eu mesmo faço grande uso das imagens nos tutoriais do Gerenciando Blog, pois elas facilitam em muito a sua compreensão.
No entanto, há alguns aspectos importantes que você deve levar em consideração ao usar imagens em seu blog. São esses aspectos que você verá nos próximos itens deste artigo.

1. Não abuse das imagens, esquecendo-se do texto

Fora alguns casos bastante específicos, as imagens devem ser um complemento ao texto. Por isso, se você quer ficar bem posicionado nos resultados do Google, é importante que suas postagens possuam texto – que é o que o Google indexa e usa para mostrar os resultados.
Por isso, tente evitar artigos que tenham apenas fotos. Sempre que possível, adicione textos complementares, contando aquilo que a foto não conseguiu mostrar.

2. Tenha cuidado com os direitos autorais

No artigo Que tipo de plagiador você é?, eu falei brevemente sobre o uso de imagens em seus artigos. Se você copia fotos e imagens de outros blogs sem autorização, pode cometer infração de direitos autorais. As formas mais seguras para você evitar isso é produzir você mesmo suas fotos e imagens, ou solicitar autorização ao seu autor.
Quando você não respeita isso, pode ter seu blog denunciado, ver seus artigos removidos e, em último caso, até seu blog cancelado. Pode também sofrer dificuldades com programas de afiliados (como o Google AdSense) e até sofrer processos judiciais. Pense bem se vale a pena correr o risco.

3. Não faça o “hot link”

Quando você utilizar imagens de outros sites e blogs, evite utilizar a URL daquele blog para publicar a imagem em seu artigo. Ao fazer isso, você está fazendo uso do “hot link”. O problema é que isso causa o uso da “banda” daquele blog ao exibir as imagens para o seu, podendo prejudicar o autor original
Você também pode ser prejudicado. Se o autor remover a imagem do ar, seu artigo não a mostrará mais corretamente. Também é possível que o autor faça a proteção contra o uso de “hot link”, que pode levá-lo a mostrar uma imagem diferente em seu blog, denunciando essa infração.
Por isso, se você tem autorização para usar a imagem do outro blog, copie-a para seu computador e faça o uso dessa imagem em seus artigos. Dessa forma, a imagem será armazenada em sua conta ao postar o artigo, sem correr esses riscos.

4. Proteja suas imagens com marcas d’água

Você também pode ser vítima de “hot link” ou do uso não autorizado de suas imagens. Como o Blogger não permite a proteção contra “hot links”, uma forma eficiente para se proteger é colocando marcas d’água com o nome ou endereço do seu blog nas imagens.
Dessa forma, se um “espertinho” copiar suas imagens, ficará claro aos visitantes dele que a imagem é sua. Veja no artigo Como Colocar Marcas d’Água em suas Imagens como fazer o uso das marcas d’água.

5. Use arquivos com nomes compreensíveis e significativos

O nome do arquivo de imagem tem importância para o Google quando alguém utiliza o Google Imagens. Quando alguém procura por uma cornucópia na busca de imagens, o primeiro arquivo mostrado tem o nome cornucopia.jpg. Você não sabia o que era uma cornucópia? Nem eu! 🙂
Por isso, quando preparar os arquivos que você utilizará em seu blog, salve-os em seu computador com um nome que mostre o que ele é. Por exemplo: se você vai postar a imagem de um gato brincando com um novelo de lã, dê ao arquivo o nome gato-brincando-com-novelo-de-la.jpg, em vez de BSC0989870.jpg.
Algumas dicas para dar o melhor nome ao arquivo:
  • Use apenas letras minúsculas no nome do arquivo.
  • Separe as palavras com hifens.
  • Não utilize letras acentuadas nem cedilhas e outros caracteres especiais.

6. Redimensione a imagem para o tamanho que você a exibirá em seu artigo

As imagens são, de forma geral, os elementos que têm mais chances de tornar um uma postagem lenta para ser carregada. Por isso, é necessário cuidado especial para que o tamanho de seus arquivos não seja maior do que o necessário.
O primeiro ponto diz respeito às dimensões da imagem. Uso como exemplo oGerenciando Blog: minha área de postagem tem a largura de 580 pixels. Por isso, esse é o tamanho máximo que uma imagem pode ser exibida. Vamos supor que eu tenha uma imagem com largura de 1.024 pixels e queira colocá-la em um artigo meu. Haveria duas formas para mostrar essa imagem no tamanho correto:
  • A errada: manter o arquivo com a largura original e, ao colocar a imagem em meu artigo, definir sua largura para o tamanho correto. Isso é errado porque, ao carregar o blog, o navegador primeiro carregaria a imagem em tamanho original (que ocupa maior espaço e leva mais tempo) para só depois redimensioná-la.
  • A correta: antes de colocá-la no artigo, redimensioná-la em um editor de imagens para que ela fique com o tamanho exato em que será mostrado. Se você não sabe como fazer isso, sugiro a leitura do artigo Como Editar Imagens para seu Blog.

7. Utilize o formato que cria o arquivo com menor tamanho

Há diversos tipos diferentes de arquivos de imagens, de acordo com sua “extensão” (as 3 últimas letras de seu nome). Há os BMP, GIF, JPG e PNG, por exemplo, que normalmente são mais utilizados na internet. Há muita diferença entre eles, especialmente quando ao tamanho do arquivo gerado.
Praticamente todos os editores de imagens permite você utilizar a opção “Salvar como” para escolher o formato em que você o salvará. De forma geral, seguem algumas orientações seu uso:
  • BMPNunca, mas nunca mesmo, use esses arquivos em suas postagens. Eles são os que geram os maiores arquivos.
  • GIF – Em linhas gerais, só faz sentido utilizar esse tipo para GIFs animados. Para imagens estáticas (paradas), eles são pouco utilizados.
  • JPG – São arquivos que costumam ter bom uso para fotos, por apresentarem boa qualidade e pequeno tamanho. Além disso, eles permitem gerar arquivos ainda menores ao definir sua compactação (próximo item).
  • PNG – Também geram arquivos de boa qualidade e tamanho de arquivo, especialmente para ilustrações. Têm a vantagem ainda de permitir fundos transparentes.
Como uma regra geral: para fotos, prefira JPG e para ilustrações prefira os PNG. Mas, a melhor forma de saber o formato correto é salvar a mesma imagem como JPG e PNG e comparar a qualidade da imagem e o tamanho do arquivo.
Se desejar, você pode ter mais detalhes sobre os tipos de arquivos no artigo Entenda os formatos dos arquivos de imagem.

8. Utilize a compactação dos arquivos de imagem

Tanto o formato JPG quanto o PNG (que, como eu disse no item anterior, são os mais adequados para usar em suas postagens) permitem a definição de algumas propriedades para gerar arquivos menores.
Mas, não há mágica: os arquivos só ficam menores porque a qualidade da imagem também fica menor. Cabe a você definir qual é a qualidade aceitável para suas imagens.
Utilizando o Paint.net (um ótimo editor grátis de imagens) como exemplo, a qualidade é definida ao salvar uma imagem. Veja abaixo as telas que mostram como definir a qualidade de uma imagem JPG e PNG. Em vermelho, está destacado o controle onde é feita a definição da qualidade. Em azul, o tamanho que o arquivo terá.
PNG
Definir qualidade de imagem PNG no Paint.net
JPG
Definir qualidade de imagem JPG no Paint.net
Você também pode utilizar ferramentas online para fazer esse trabalho para você. Basta você enviar as imagens para um serviço, e ele fará a compactação. É importante analisar as imagens compactadas antes de publicá-las, para confirmar se continuam com qualidade aceitável. Abaixo estão dois serviços que fazem isso:

9. Preencha as propriedades ALT e TITLE

É muito importante preencher as propriedades ALT e TITLE das imagens que você utiliza em seu blog. São duas propriedades onde você deve descrever o que a imagem representa, e que têm finalidades diferentes:
  • TITLE (“Título”) – Serve para que seja exibido um texto sobre a imagem quando um usuário parar o cursor do mouse sobre ela.
  • ALT (“Alternativo”) – É importante para o Google e utilizada como um dos fatores para mostrar a imagem nos resultados da busca por imagens.
Você pode utilizar o mesmo valor nos dois campos, ou fazê-los diferentes um do outro, à sua escolha. O importante é que estejam preenchidos. Voltando ao exemplo do item 5, as propriedades ALT e TITLE daquela imagem poderiam ficar como “Gato brincando com um novelo de lã”.
A forma de preencher o ALT e TITLE variam de acordo com a plataforma onde você está escrevendo seu artigo:
  • No Windows Live Writer, clique sobre a imagem e escolha a opção “Texto Alt” na barra de ferramentas. Será aberta uma caixa como a abaixo:
    Definir ALT e TITLE no Windos Live Wrirter
  • No Blogger, clique sobre a imagem e escolha a opção “Propriedades”, abaixo da image. A tela para preencher as propriedades será como a abaixo:Definir ALT e TITLE no Blogger

Conclusão

Estas 9 dicas podem fazer muita diferença para seu blog. Se você segui-las, conseguirá fazer melhor uso das imagens em seu blog, sem torná-lo pesado para carregar e com boas chances de ficar bem posicionado no Google.
No início, pode ser que você precise recorrer a este artigo para lembrar-se de todos os itens ao fazer uma nova postagem. Mas, com o tempo, eles também farão parte do processo normal para você elaborar cada nova postagem sua.
Gostou das dicas? Quer complementar com algo que você faz e não foi mencionado? Deixe um comentário!
E sinta-se à vontade para compartilhar o artigo em suas redes sociais e indicar aos seus amigos.
http://www.gerenciandoblog.com.br/2013/07/como-otimizar-imagens-para-o-seu-blog.html

Deixe um comentário