BLOG

Otimizar as imagens de um site é uma tarefa essencial para quem quer proporcionar experiências mais fluidas e agradáveis para os visitantes. Com apenas alguns ajustes, é possível modificar por completo tudo o que é entregue ao usuário e melhorar a performance do site.

Ao focar em práticas de SEO para e-commerce, muitos se concentram estritamente nas técnicas voltadas para os conteúdos escritos, seja das páginas de produto, categoria ou mesmo de blog. Mas para ter os melhores resultados, é importante olhar para os materiais visuais e tudo isso começa ao otimizar as imagens do seu site.

Seja ao definir o formato adequado para o propósito daquela imagem, seja ao fazer uma descrição do que é aquele material. Existem algumas diretrizes fundamentais para garantir que o seu site esteja com todos os conteúdos visuais também otimizados.

O que fazer, na prática, para garantir que as imagens não sejam um problema para o desempenho do seu site? Mais do que isso, o que fazer para que essas mesmas imagens potencializem os seus resultados? Entenda.

O que é otimização de imagem?

A otimização de imagem é o processo de ajustar imagens digitais para melhor desempenho e visibilidade em sites e mecanismos de busca. Um trabalho que envolve várias etapas, sempre garantindo a melhor qualidade visual possível.

Além do que é visto pelo usuário, é importante olhar para outros elementos, como o texto alternativo — ou ALT text — que descreve aquela imagem para tornar mais simples o processo de compreensão dos bots dos mecanismos de busca. Pensando em SEO, esses cuidados podem ser diferenciais para a sua página.

Outro processo que faz parte da otimização de imagens é a escolha do formato mais adequado para aquele arquivo. O recomendado é adotar formatos de última geração, como .WEBP ou, quando não for possível, formatos mais leves, como o .JPG.

O fundamental, portanto, é entender que a otimização de imagens é um trabalho essencial para as empresas que querem uma melhor performance das suas páginas, independentemente do segmento de atuação. Ajustes simples como esses podem fazer uma enorme diferença na experiência dos usuários.

Qual a importância da otimização de imagens?

Redução do tempo de carregamento da página

O grande diferencial que imagens otimizadas proporcionam é a redução do tempo de carregamento de uma página. Quando não está otimizada, ela tende a demorar muito mais para aparecer, o que muitas vezes resulta em frustração dos usuários e, no pior dos cenários, abandono do site.

Um e-commerce, por exemplo, pode sofrer com a simples demora no carregamento de uma foto do produto anunciado — em muitos casos, as pessoas compram com os olhos. Ao tomar todos os cuidados, você não precisa mais se preocupar com isso, já que as páginas vão carregar rapidamente e a experiência do usuário vai ser positiva.

Diminuição do consumo de largura de banda

Outro problema de imagens não otimizadas é que elas podem consumir uma grande quantidade de largura de banda, principalmente para quem está no site via dispositivos móveis. Para o usuário, portanto, isso pode significar custos adicionais e uma experiência frustrante.

Com a otimização das imagens, o consumo de dados é muito menor, permitindo que os visitantes não precisam gastar tanto da sua banda larga e, ainda mais, importante, que eles tenham uma navegação fluida e rápida.

Melhoria no desempenho orgânico de um e-commerce

Imagens otimizadas são excelentes para os usuários e, por consequência, impactam nos resultados de uma página nos mecanismos de busca. 

Afinal, uma página que carrega mais rapidamente tende a ter uma taxa de rejeição menor, uma experiência mais positiva e as informações necessárias para que o bot faça sua indexação. Tudo isso impacta diretamente em um melhor posicionamento nas SERPs, por exemplo.

Além disso, a otimização das imagens e aplicação de recursos adequados, como dados estruturados, pode ajudar a conquistar rich snippets variados na página de resultados.

Compatibilidade com dispositivos móveis

Em um cenário em que cada vez mais pessoas utilizam dispositivos móveis, você não pode considerar a versão principal do seu site como desktop. E uma das áreas que mais são impactadas quando isso acontece é o tempo de carregamento de uma imagem em um celular ou tablet.

A partir do momento que as imagens são otimizadas, elas aparecem sem distorções e se ajustam perfeitamente às telas menores. Na prática, você garante que o usuário tenha sempre a melhor navegabilidade, independentemente do dispositivo utilizado.

Melhoria na experiência do usuário

Todos os tópicos acima contribuem diretamente para a melhoria da experiência do usuário. Afinal, imagens não otimizadas podem levar a uma experiência ruim, com páginas lentas, tempos de carregamento demorados e problemas de visualização. Para um e-commerce, isso representa menos vendas.

Quando você investe nessas otimizações, toda a experiência todo usuário fica mais agradável: carregamento rápido de páginas e visualizações simples das imagens, garantindo uma navegação mais fluida, o que impacta, por exemplo, na taxa de retenção, no engajamento e nas conversões.

Quais as diretrizes do Google para otimização de imagens?

O Google facilita o trabalho de quem quer otimizar as imagens do seu site e centraliza as principais informações em suas diretrizes. Que tal conhecê-las?

Nomes de arquivo descritivos

Ao nomear seus arquivos de imagem, utilize nomes descritivos que sejam relevantes para o conteúdo da imagem. Evite nomes genéricos, como “imagem1.jpg” ou códigos aleatórios. Use palavras-chave relevantes para ajudar os mecanismos de pesquisa a entenderem o conteúdo da imagem.

Texto alternativo (ALT text) relevante

O texto alternativo é uma descrição textual que precisa estar presente em todas as suas imagens, e deve ser descritivo e relevante. Ele serve não só para que os bots “leiam” a imagem, mas também para possibilitar a leitura por ferramentas de acessibilidade. 

Para isso, descreva corretamente a imagem e, sem forçar, utilize palavras-chave relacionadas ao conteúdo, mas evite repetir os mesmos termos pensando em um melhor rankeamento. Mantenha o foco no usuário.

Tamanho de arquivo otimizado

Também é necessário otimizar o tamanho das imagens, ou seja, comprimir esses conteúdos, mas sem que isso represente uma queda de qualidade. Afinal, o visual ainda é parte fundamental da experiência do usuário, certo?

Tente mantê-las com tamanho inferior a 100kb sempre que possível. Ferramentas como o Squoosh podem ajudar nessa tarefa.

Formatos de arquivo apropriados

Escolha o formato de arquivo adequado para suas imagens. O .WEBP é o formato de última geração mais recomendado, mas caso não seja possível, o JPEG é uma boa opção alternativa para fotografias e imagens com muitas cores.

Prefira o PNG apenas para gráficos e ícones. Além disso, evite o uso de formatos obsoletos, como GIF, para imagens com muitas cores, pois eles podem resultar em arquivos grandes.

Dimensionamento apropriado

Outra diretriz do Google é dimensionar as suas imagens para o tamanho correto antes de carregá-las no seu site. Isso evita que o site precise gastar muito da sua conexão para carregar uma simples imagem que, na verdade, poderia ser muito menor.

10 boas práticas de SEO para imagens

Além de seguir as diretrizes do Google, outras práticas podem ajudar ao otimizar imagens, que tal conferir essas dicas?

1. Evite o uso excessivo de imagens

Especialmente para um e-commerce, o uso de imagens é fundamental para a estética e para o convencimento do consumidor em potencial, certo? Mas é muito importante não exagerar na quantidade: encontre um equilíbrio que permita contar com imagens para exibir os produtos em vários ângulos e situações, mas não de forma excessiva.

A exibição de muitas imagens em uma única página pode afetar negativamente o tempo de carregamento, o que pode levar à diminuição do desempenho do site. Utilize imagens quando necessário para enriquecer o conteúdo e tornar a página atraente, mas não coloque imagens apenas para preencher espaços.

2. Use imagens responsivas

Lembra como falamos da importância de pensar na experiência dos usuários de dispositivos móveis? Uma dica aqui é adicionar imagens responsivas, ou seja, que se adaptem automaticamente para a tela em que o usuário está visualizando o site.

Para fazer isso, você pode utilizar o código HTML responsivo ou CSS para assegurar que as imagens estejam todas dimensionadas e adaptáveis. Assim, você evita maiores problemas para quem estiver visitando o seu site, por exemplo, via celular.

3. Aproveite o lazy loading

O lazy loading é uma técnica que atrasa o carregamento de imagens que estão na área não visível do navegador, só iniciando o seu carregando após o usuário realizar o scroll. Especialmente na navegabilidade nos dispositivos móveis, essa estratégia pode ser muito útil.

A técnica melhora o tempo de carregamento inicial da página, deixando ela mais rápida e responsiva. Na prática, o lazy loading ajuda reduzir a quantidade de dados que precisam ser carregados inicialmente, resultando em uma experiência de usuário ágil.

4. Mantenha uma organização adequada no armazenamento de imagens

A otimização de imagens também implica na sua organização. Uma dica aqui é criar uma estrutura de diretórios lógica e consistente para armazenar todas as imagens do seu site.

5. Forneça legendas quando apropriado

Outra prática que pode ser muito importante é adicionar legendas às suas imagens, especialmente quando você estiver detalhando alguma funcionalidade dos seus produtos.

Essa é uma estratégia voltada para melhorar a experiência do usuário, mas também para garantir a melhor indexação. Afinal, a legenda complementa o que está na descrição da imagem e fornece mais dados para avaliar a relevância daquele conteúdo.

6. Verifique se as imagens estão indexadas

Uma parte mais técnica, porém muito importante, é se certificar de que as imagens do seu site estão sendo indexadas corretamente pelos bots. 

Para fazer isso, você pode utilizar o recurso “Inspeção de URL” do Google Search Console para verificar se as imagens estão sendo rastreadas e indexadas corretamente. 

7. Monitore o desempenho das imagens

Adicione uma rotina de monitoramento de desempenho das imagens do seu site. Atente-se ao tempo de carregamento das páginas e outras métricas de performance que podem indicar problemas atrelados a imagens mal otimizadas.

Ferramentas de otimização de imagens

Você pode tornar mais prático todo o processo de otimização de imagens com algumas ferramentas e plugins. Algumas muito usadas são: 

• Google PageSpeed Insights: o Google PageSpeed Insights é uma ferramenta gratuita que analisa o desempenho do seu site, o que inclui a performance e otimização das imagens. 
• Yoast SEO: plugin muito comum no WordPress, o Yoast SEO ajuda a indicar quais são os itens que podem ser aprimorados nas suas imagens. Desde a definição do ALT text até mesmo outras dicas para melhorar o desempenho do seu site.
• Squoosh: site gratuito para redução de imagens e mudança do formato para versões mais recomendadas, como JPG e WEBP;
• TinyPNG: outro site, também gratuito, que permite reduzir o tamanho das imagens.

Com pequenos ajustes e mudanças, é possível melhorar a performance das imagens no seu site de forma a atender às diretrizes do Google. Além de melhorar a performance na SERP, você garante melhor experiência ao seu potencial cliente.