Como otimizar imagens para o seu site: 4 regras de ouro!

Uma imagem diz mais que mil palavras. Essa frase não é dita à toa, pois a imagem pode ser o primeiro item do seu site a falar e se conectar com o seu leitor. Não há dúvidas de que o uso de imagens em um site é um grande chamariz para atrair leitores à sua mensagem. Porém, mesmo que haja a possibilidade de apenas inseri-las, saiba que alguns cuidados são necessários ao otimizar imagens para o seu site.

As imagens são constantemente os itens que ocupam maior espaço de disco em uma hospedagem e por esse motivo elas têm papel fundamental no tempo de carregamento de página, por exemplo. Tanto para você quanto para a pessoa que acessa seu site, otimizar imagens é extremamente necessário. Ao fazer isso, menor será o uso do seu espaço em disco na hospedagem e mais rápido o site carregará para o seu leitor, graças à menor quantidade de dados que será baixada.

Para você que está se perguntando como otimizar imagens de forma correta em seu site, eu trago 4 regras de ouro que o ajudarão nessa empreitada. 🙂

Escolha a extensão certa para as suas imagens

Caso você não saiba, a extensão do seu arquivo tem grande influência no tamanho dele. Existem muitos tipos de extensões, mas para o seu site há três fundamentais (e mais utilizados pela internet em geral). São eles: o JPEG (ou JPG), o GIF e o PNG. E a maior diferença entre eles? O tamanho vs. a qualidade da imagem. Por isso, cada um é ideal para um conjunto de situações.

JPEG

O JPEG (Joint Pictures Expert Group) suporta milhões de cores e é um formato muito utilizado para fotografias. Ele possui diversos níveis de compressão para torná-lo menor, mas a cada modificação, pior é a qualidade do arquivo. Frequentemente usado em imagens enviadas por e-mail, o JPEG também é muito utilizado em sites, em que o tamanho da imagem é mais importante que sua qualidade. Ainda assim, um JPEG de 40% a 60% de qualidade comparado com sua imagem original (desde que a imagem original tenha boa qualidade) pode ser utilizado sem perdas muito perceptíveis. É importante lembrar que esse tipo de extensão possibilita uma redução maior em fotografias e uma redução menor (e maior perda de qualidade) em imagens como vetores e ilustrações.

GIF

O GIF (Graphics Interchange Format) é extremamente conhecido por criar sequência de imagens, como se fosse um vídeo. E apesar de sua compressão ser boa, suas cores são muito mais restritas (apenas 256 cores), então o GIF é aconselhado para ícones ou marcas, além de imagens em tons de cinza ou preto e branco.

PNG

O PNG (Portable Network Graphics) também suporta milhões de cores e até pode ser utilizado para fotografias, mas sua compressão é muito menor, o que acaba deixando o arquivo maior do que em um JPEG. Complementando, enquanto o JPEG sofre perda a cada edição na imagem, o PNG continua com sua qualidade intacta a cada edição. Por isso, além de ser mais indicado para vetores, fotografias com tipografia e ilustrações, o PNG também é indicado em situações onde é preciso editar a imagem sem perda de qualidade. Além da grande qualidade do PNG, ele tem o diferencial da possibilidade de utilizar transparência.

Resumo

De forma resumida, o JPEG terá melhores resultados em fotografias sem edição ou onde o tamanho importa mais que a qualidade, o GIF em imagens em tons de cinza, preto e branco e com menos de 256 cores e o PNG em imagens contendo transparências, vetores, tipografia e ilustrações. Saber onde cada tipo de extensão funciona melhor é importante para otimizar imagens para o seu site com efetividade.

Comprima as imagens antes de publicá-las em seu site

Mesmo com um tamanho diferenciado para cada tipo de formato, você ainda pode diminuir suas imagens caso elas sejam JPEG ou PNG, o que é essencial quando o assunto é otimizar imagens. Mas primeiro vamos entender o porquê de utilizar a compressão de imagem.

Como dito anteriormente, ao contratar uma hospedagem, você recebe um espaço em disco para ser utilizado. Sendo assim, as imagens do site ocuparão uma boa parte do espaço. Fora isso, cada pessoa que acessa seu site precisa baixar todos os dados inseridos na página acessada, e dependendo do tamanho do conteúdo e da largura de banda do usuário, o tempo para baixar pode ser maior ou menor. Além da usabilidade do usuário ser afetada, caso seus leitores saiam rapidamente de seu site ao notarem a lentidão, você pode ter um ranqueamento menor no Google, já que velocidade é um dos fatores que ele leva em consideração ao determinar os resultados de uma busca. Um site leve é um dos motivos para ser querido pelo Google. 🙂

E como funciona essa compressão? Uma imagem é composta por milhares de pixels e dentre esses milhares de pixels, muitos são repetidos. A compressão nada mais é que transformar esses muitos pixels repetidos em um só e assim diminuir o tamanho do seu arquivo. Há várias ferramentas que possibilitam a compressão de uma imagem (como o Photoshop), mas como muitas são pagas e não são utilizadas apenas para essa finalidade, alguns sites de compressão de imagem, como o TinyPNG/JPEG, podem ser uma boa alternativa.

Nomeie as suas imagens corretamente

O Google – ainda – não criou nenhuma ferramenta que “lê” imagens. Mas ao buscar, por exemplo, a frase: “boneca de vestido rosa”, você encontra resultados satisfatórios de acordo com a sua busca. E sabe por que? Porque o Google lê o título da imagem. Por isso, ao publicá-la em seu site, procure não utilizar nomes comuns como vetor.png e sempre coloque hífen ao indicar mais de uma palavra, como por exemplo: como-otimizar-imagens-para-o-seu-site. Além disso, não se esqueça de não utilizar acentos e caracteres especiais.

Outra forma de otimizar imagens para buscas é utilizar o “Alt Text”, que nada mais é que um texto alternativo para a sua imagem. Diferente do nome da imagem que deve dizer do que se trata, porém sem muitas palavras e com hífens, o texto alternativo não tem essa restrição. O ideal é que seja como uma descrição, pois ele também será utilizado por deficientes visuais e aparecerá quando houver algum problema de carregamento. Um exemplo de texto alternativo seria: “paisagem com duas montanhas cobertas de neve e um balão no canto direito”.

A ferramenta de busca do Google leva em consideração, diretamente, o título e o texto alternativo da sua imagem. Há ainda outra maneira indireta de ranqueá-la, que é através da legenda. O Kissmetrics, uma ferramenta de métricas para acompanhar a interação do usuário com seu site, fez em 2012 uma pesquisa e constatou que as pessoas leem 300% mais vezes as legendas das imagens do que o texto completo da página em que elas estão. Sendo assim, elas ajudam a manter o usuário em sua página, diminuindo o abandono do seu site.

Tenha cuidado com as dimensões das imagens

Um site esteticamente agradável atrai muito mais visitantes do que um site precário visualmente. Pode parecer estranho, mas a dimensão das imagens conta muito para a estética do seu site. E não apenas isso: tecnicamente ela também é muito importante. Por exemplo, em um espaço do seu site em que a largura seja de 600px, uma imagem com largura de 800px é desnecessária. Apesar da imagem ser redimensionada para caber em 600px, haverá uma utilização desnecessária do seu espaço em disco na hospedagem. Além disso, poderá causar lentidão no seu site.

Você pode estar pensando: “Mas minha imagem é redimensionada automaticamente quando a carrego em meu site”. Veja bem, mesmo que seu site seja responsivo (o que é o ideal), a ferramenta que está utilizando apenas deixa a imagem do tamanho certo para ser exibida ao usuário. No espaço de armazenamento do seu site, no entanto, ela continua com o tamanho original.

Há outras maneiras de utilizar corretamente a dimensão de imagens, como retirar bordas em branco. E não deixe de utilizar sempre uma altura e largura definidas de acordo com o seu template.

Conclusão

Não é nenhum bicho de sete cabeças otimizar imagens para o seu site. É possível ver que essas dicas vão influenciar tanto o lado da otimização do seu site, quanto o de usabilidade por parte do usuário. Os dois lados saem ganhando! 🙂

Não esqueça de que além de tecnicamente, esteticamente essas regras são muito valiosas. As suas imagens são um dos primeiros atrativos que o usuário nota ao entrar em seu site, por isso não deixe de dar uma atenção especial para elas.

Aproveite e veja outras dicas para otimizar seu site, mantenha-se atualizado sobre as práticas de SEO e lembre-se: ter imagens ótimas e profissionais é só uma parte do trabalho. Alinhe seu conteúdo com suas imagens e esteja certo de que seu usuário encontrará o que busca!

Ficou alguma dúvida? Quer falar como as imagens funcionam em seu site? Não deixe de comentar. 🙂

Publicação: 30/05/2017 (atualizado em 20/04/2018)

Tags: Tutoriais