Como Otimizar Imagens do seu Site para Ganhar Ranqueamento

Atualmente, 33% dos resultados de busca do Google exibem imagens em destaque logo no início da página.

E esse é apenas um dos motivos pelos quais você deveria se preocupar em otimizar as imagens do seu site. 

As imagens podem afetar diversos aspectos de um site, como a velocidade de carregamento, a experiência do usuário, a experiência mobile, a acessibilidade e o ranqueamento no Google.

Quer entender mais sobre o poder da otimização de imagens?

Confira o post que preparamos!  

O que é otimização de imagens para web?

As imagens utilizadas na internet precisam contar com algumas características para ter carregamento rápido e para serem entendidas pelas plataformas de busca, como o Google, como amigáveis. 

Portanto, otimizar imagens para a web pode ter vários significados, como:

• Comprimir o seu tamanho para um que seja adequado, mantendo a qualidade;

• Garantir a responsividade (carregamento e formatos adequados também para os dispositivos móveis, como celulares e tablets);

• Incluir texto alternativo para possibilitar a leitura das imagens pelos robôs das plataformas já citadas.

4 Motivos para otimizar as imagens do seu site

Pode parecer uma ação simples — e realmente é! — mas imagens adequadas trazem diversos benefícios para seu site, sua marca e seus visitantes.

Confira 4 motivos para otimizar imagens no seu site:

1. Aumenta a velocidade de carregamento

Segundo o HTTP Archive, as imagens representam em média 21% do peso total de uma página.

Logo, ao reduzir esse tamanho, reduzimos também o tempo que a página leva para ser completamente carregada. 

De acordo com Matheus Angeli, web designer da Leadster:

“2 ou 3 segundos a mais no carregamento são suficientes para perder uma conversão ou prejudicar a experiência do site.”

De nada vale seu site ter um conteúdo e visual excelente, se o usuário não consegue visualizá-lo ou se ele leva muito tempo para aparecer completamente.

2. Fornece uma experiência mobile completa

Imagine que as imagens do seu site sejam pensadas apenas para o acesso através de um computador.

O que acontece quando um visitante o acessa através de um celular ou tablet?

Ou ainda com visualização em um monitor de um tamanho diferente?

As imagens podem não ser exibidas corretamente.

Isso atrapalha a experiência, que é diferente dependendo da origem do acesso.

Por isso, otimizar as imagens e deixá-las responsivas também garante a experiência que você pensou ao desenvolver o site em todos os dispositivos. 

  Você também pode se interessar: O que é UX e UI e Como as Áreas se Complementam

3. Melhora os resultados de SEO

A velocidade do site conta muitos pontos no ranqueamento das páginas nas buscas orgânicas realizadas em plataformas como o Google.

Então, ao tornar o carregamento do seu site mais rápido, você também ganha pontos de SEO. 

Hoje, cerca de 33% das páginas de resultados de busca do Google mostram imagens, sem ser necessário entrar na aba “imagens”.

(Fonte: MOZ)

Além disso, uma imagem que conta com texto alternativo se torna legível pelos mecanismos de busca, que podem passar a exibi-la nas procuras.

Confira algumas dicas do nosso designer web sobre esse ponto:

O atributo “alt” foi criado para que, quando o sistema não consegue carregar uma imagem, seja exibido um texto no seu lugar. Hoje ele não tem muita utilidade prática nesse sentido, já que os sistemas, servidores e conexão à internet evoluíram muito. Então ele acaba sendo utilizado como um canal para falar para o bot do Google o que contém aquela imagem.

Matheus Angeli, Web Designer

Além disso, o uso do texto alternativo nas imagens contribui para que a internet seja mais acessível às pessoas cegas, com baixa visão – ou que fazem uso de leitores digitais.

4. Acorda com o Core Web Vitals

O Core Web Vitals é um conjunto de métricas e orientações relacionadas à experiência do usuário.

Ele é levado em consideração em todas as ferramentas e plataformas do Google e foca em três parâmetros:

• Loading (carregamento);

• Interactivity (interatividade);

• e Visual Stability (estabilidade visual).

Imagens otimizadas atendem a estes critérios. 

Qual o melhor formato de imagem para internet?

Existem alguns fatores que impactam na otimização de imagens.

Um deles é o formato de arquivo escolhido e carregado nas páginas.

Para internet, devemos dar preferência para três tipos de arquivo:

• PGN: de melhor qualidade que JPEG, apresenta menos perda, com tamanho de arquivo que pode ser maior. Atente-se a esse fator na hora de subir as imagens em PNG;

• SVG: formato de imagem vetorial e baseado em XML, é um formato indexado pelo Google, o que melhora os resultados de SEO. Além disso, um arquivo em SVG tem tamanho menor do que o PNG;

• WEBP: com alta profundidade de cor, esse é um formato interessante também por oferecer alta taxa de compactação. Como desvantagem o arquivo WEBP pode não ser suportado em todos os navegadores.

  Acesse também: 7 Dicas para Turbinar suas Campanhas de Mídia Paga com CRO

Como converter o formato de uma imagem

Se você tem uma imagem em um formato e quer transformá-la em outro mais adequado para web, saiba que isso é possível!

Você pode explorar ferramentas como o Photoshop e o Adobe Spark ou alguns sites como Convertio ou CloudConvert, para mudar os formatos. 

Como otimizar e deixar uma imagem mais leve sem perder a qualidade?

Por mais que uma imagem otimizada seja importante para o rankeamento do site, esse ajuste deve ser feito da forma correta, para que você não acabe com uma imagem leve, mas com qualidade muito baixa.

Uma situação assim pode acabar com a experiência do usuário. 

Existem algumas formas de deixar a imagem com o tamanho ideal sem perder a qualidade.

Apresentamos algumas aqui:

Como otimizar uma imagem no Photoshop?

Uma das formas mais simples e profissionais de otimizar a imagem é utilizar um software específico de edição de imagens.

Recomendamos, caso você escolha essa opção, o Adobe Photoshop. 

Para reduzir o tamanho para utilização em sites e blogs, basta abrir a imagem original no programa e selecionar a opção “Salvar para Web”(Save for Web) no menu “Arquivo” (File).

O software oferecerá alguns formatos e opções de qualidade, já ideais para o uso na internet.

Além disso, ainda é possível visualizar como a imagem ficará antes de salvá-la.

O processo é bastante simples e o Photoshop tem muitas outras funcionalidades que podem ser exploradas.

Contudo, é preciso um pouco de conhecimento técnico para utilizar outras funções e o software é pago depois de um período de teste de 7 dias.

O designer Matheus também deu uma dica valiosa sobre o uso dessa ferramenta:

O Photoshop não é a ferramenta mais eficiente para otimizar imagens para web, mas uma coisa que indico é se preocupar em criar as imagens já no tamanho correto em que serão usadas, para evitar perda de qualidade ao fazer upscale ou downscale.

Como otimizar imagem online?

Outra opção, para quem não quer depender de um software mais técnico, é utilizar ferramentas online pensadas para essa finalidade.

Seja qual for a escolhida, você precisará fazer o upload da imagem para o site da ferramenta, escolher entre as possibilidades oferecidas de formato, tamanho e qualidade da imagem e então aguardar a conversão para baixar a imagem otimizada.  

Compressores de imagem online

Selecionamos algumas indicações, caso você opte pelos compressores de imagem online:

• TinyPNG: na versão gratuita comprime até 20 imagens, nos formatos WebP, PNG e JPEG, com tamanho máximo de 5MB;

• I Love Img: com a vantagem de selecionar as imagens direto do Google Drive ou DropBox, você pode utilizar essa opção para comprimir arquivos JPG, PNG, SVG ou GIF;

• Optimizilla: também com limite de 20 imagens por vez, trabalha com os formatos JPEG, GIF e PNG.

Como otimizar imagem no WordPress

Por último, mas não menos eficaz, está a opção de otimizar as imagens utilizando plugins para WordPress.

Caso seu site tenha essa plataforma como base, você pode instalar ferramentas que vão comprimir as imagens a um tamanho adequado de forma automatizada, poupando muito tempo e trabalho manual.

Plugins para otimizar imagens

Alguns dos plugins para WordPress mais indicados para esse caso são:

• TinyPNG: o compressor de imagens online que citamos no tópico anterior também possui uma versão para sites feitos em WordPress. O plugin otimiza automaticamente todas as imagens carregadas no site, e ainda integra com os populares serviços de compressão online TinyJPG e TinyPNG.

• Imagify: comprime as imagens sem perda de qualidade e quando instalado ajusta as imagens já existentes no site, deixando-o com carregamento mais rápido. Você pode optar por três tipos de compressão das imagens e o plugin está disponível em versões gratuita e paga. É preciso atentar que, caso desinstalado, ele restaura automaticamente as imagens da galeria para o tamanho original;

• Smush: também com diferentes versões (paga e gratuita), este plugin consegue reduzir o tamanho de até 50 imagens por vez e auxilia na identificação de imagens que estão muito pesadas para a aplicação;

• Optimole: além de compactar as imagens para WordPress, este plugin se destaca pois acelera a velocidade do site, por ser todo em nuvem e por identificar a velocidade de conexão do visitante e adaptar a qualidade da imagem para cada contexto.

Gostou de saber mais sobre como otimizar imagens e a diferença que essa simples ação faz na velocidade e experiência do seu site?

Se sim, compartilhe este post com aquele colega que também vai aproveitar a leitura!