Como otimizar imagens web para o Google?

Otimizar Imagens Web para o Google

Compartilhe:

Facebook
Pinterest
Conteúdo

Otimizar imagens web pode melhorar o posicionamento no Google.

Neste contexto, otimização de imagens significa atender os critérios necessários recomendados pelo Google.

Mas, os benefícios vão muito além…

É claro que, a qualidade das imagens que você adiciona em suas páginas é indispensável para os seus clientes e para o design do site.

Porém, existem aspectos técnicos, que devemos cumprir para o melhor desempenho do nosso negócio online.

Todavia, não se trata apenas de atender as recomendações do Google. Essas melhorias melhoram também a experiência dos seus clientes, quando acessam o seu website ou e-commerce.

Vou explicar passo a passo, de maneira fácil e completa, tudo o que você precisa saber para otimizar as imagens do seu site ou loja virtual e assim atender esses critérios para sair na frente dos seus concorrentes.

Neste artigo você encontrará desde os princípios básicos (para iniciantes), como princípios mais avançados (para quem já possui conhecimento).

Este tema é muito importante para nós da Agência UX Web, pois nosso objetivo é desenvolver projetos focados na experiência dos usuários.

O que é otimizar imagens?

Primeiramente, é importante dizer que não é muito simples definir o que é “otimizar imagens”.

Porém, penso que esta definição possa ajudar por enquanto:

Otimizar imagens é configurá-las de tal maneira que atenda as recomendações do Google e ainda melhore a experiência dos usuários.

Existem dois aspectos sobre otimizar imagens com técnicas e propósitos diferentes, mas ambos os aspectos levam o mesmo nome.

Vamos entender melhor considerando o que explicarei a seguir.

Otimizar Imagens

Otimizar imagens melhora a velocidade

De um lado, nenhum usuário gosta de acessar um site lento, que demora muito para carregar.

Por outro lado, a velocidade do site é um dos fatores de ranqueamento nas pesquisas do Google: o Core Web Vitals.

Assim, isso significa que melhorar a velocidade de carregamento do seu site ou loja, pode melhorar a visibilidade do seu negócio online nas pesquisas do Google.

Contudo, as imagens são um dos principais motivos de carregamento lento das páginas.

Por isso, otimizar imagens melhora a avaliação pelo Google e melhora também a experiência dos usuários.

Otimização de imagens ajuda o Google entender o conteúdo

Primeiramente, é importante entender que o Google acessa de tempo em tempo, cada página de lojas virtuais e websites para entender qual o tema de cada uma delas.

Ele busca por conteúdo (principalmente textos e imagens) que revelem do que se trata a página.

Porém, se estes conteúdos estiverem desorganizados ou sem as devidas “marcações” que indicam o assunto da página, não será possível o Google entender qual é o tema de cada uma delas.

Esta técnica de estruturar e marcar todo o conteúdo das páginas é chamada de SEO On-Page. São otimizações da página para que os mecanismos de busca (por exemplo, o Google), consigam interpretar o conteúdo.

Assim, para não fugir do tema, falarei apenas de otimizações das imagens.

Otimização On-Page (de um modo mais amplo) envolve diversas outras técnicas, otimizar imagens, é uma parte. Mas, uma parte importante que pode trazer muitos benefícios.

Conceitos fundamentais de otimização de imagens para Web

Os principais erros ao otimizar imagens têm a sua origem na falta de entendimento ou atenção às características básicas sobre as imagens.

De dessa forma, entender o básico, já é um grande avanço em relação à otimizar imagens para a Web.

Mas, se você já possui este conhecimento pode pular esta parte.

Dimensões das imagens

Entender este ponto melhora muito a otimização de imagens no site.

As imagens possuem largura e altura, nesse sentido, é o tamanho da imagem.

As dimensões de uma imagem nada mais são que a sua largura e altura medidas em pixels (px).

Em imagem web usamos pixels para dimensões, e não centímetros.

Por exemplo, uma de imagem com dimensões de 800px por 500px, tem 800px de largura (horizontal) e 500px de altura (vertical).

Formato das imagens para Web

Em primeiro lugar, vale lembrar que existem muitos formatos de imagens.

Mas, para web, os formatos mais comuns são: PNG, JPG e GIF.

Todo arquivo, seja qual for, possui extensão, que é a sigla que aparece depois do nome do arquivo. Por exemplo, minhaimagem.JPG, minhaimagem.PNG

Os formatos das imagens podem ser visualizados, encontrando a sigla após o nome do arquivo.

Existem também formatos mais modernos de imagem Web, como por exemplo, o formato WEBP. Que é mais recomendado para sites e e-commerce, mas depende de sua plataforma conseguir disponibilizar este formato.

Ou seja, a plataforma precisa ser compatível com este formato. O WordPress e o WooCommerce, por exemplo, são totalmente compatíveis com formato WEBP.

Logo mais, falarei com mais detalhes sobre este formato de imagens.

“Peso” das imagens

É o tamanho do arquivo de imagem.

Algumas vezes o peso é chamado de “tamanho” da imagem, porém, não confunda com dimensão.

Eu prefiro chamar de “peso” em minhas explicações, pois “tamanho” pode haver confusão com dimensão.

As medidas mais utilizadas em web para o peso das imagens é: KB (Kilo bytes) ou MB (Mega Bytes).  Por exemplo, 1000 KB é igual a 1 MB.

Na verdade, este é o verdadeiro ponto crítico pois, para a velocidade de carregamento da página, o peso da imagem é o grande vilão.

Como dimensão, formato e peso afetam a otimização de imagem?

Acima de tudo, otimizar imagens para melhorar a velocidade de carregamento é disponibilizá-las em seu site ou loja online com o menor peso possível.

Sobretudo, é importante entender que a dimensão e o formato afetam o peso das imagens.

Imagens com dimensões maiores são mais “pesadas”. Temos que considerar o seguinte: quando diminuímos as dimensões das imagens, o seu peso diminui, mesmo mantendo a qualidade (resolução) da imagem.

Alguns formatos geram imagens mais “pesadas” que outros formatos. O curioso é que usar imagem mais pesada, não significa que você está conseguindo mais qualidade.

Acompanhe as dicas fundamentais para otimizar os aspectos principais.

Exemplo sobre como a dimensão da imagem afeta o peso

Considera a primeira imagem que possui 800px por 450px.

Ela tem original 104 KB de peso.

Otimização de Imagens Dimensões e Peso

Por fim, a segunda imagem tem dimensão de 300px por 169px e apenas 15,8 KB.

Ou seja, um peso mais de 6 vezes menor.

Dicas importantes para otimizar imagens para Web

Essas dicas de otimização de imagens são básicas, porém, é impressionante como a grande maioria dos sites descuida de questões tão básicas.

Frequentemente, encontro na internet sites e lojas virtuais que não aplicam otimização básica, causando uma lentidão no carregamento, principalmente para mobile (celulares).

Posso dizer até mais: se todas as imagens da web fossem otimizadas haveria uma economia espantosa na utilização dos pacotes de dados no celular.

Por isso, vale a pena, abordar esses itens. 

Somente a aplicação desses itens já melhora significativamente a velocidade de carregamento de uma página.

Escolha o formato JPG para a maioria dos casos

Em primeiro lugar, o formato JPG é muito mais leve que o formato PNG.

Mas, por incrível que pareça, 80% das pessoas usam imagens em PNG nos seus sites de modo totalmente desnecessário.

Assim, gera um site extremamente lento, devido o peso descomunal dessas imagens.

Por outro lado, o uso de PNG não deve ser descartado em alguns casos.

Utilize PNG, somente se você precisa de imagens sem fundo (vazadas) como em logos, por exemplo. Este formato permite gerar imagens sem fundo, que podem ser úteis em algumas situações.

Dessa forma, se você deseja uma otimização de imagens eficiente, use JPG na grande maioria dos casos.

Com ferramentas grátis, como o Canva ou Befunk, você consegue carregar uma imagem PNG e converter em JPG com muita facilidade.

Use dimensões apropriadas

Não use dimensões além do que é possível visualizar.

Talvez não seja fácil entender isso, mas pense o seguinte:

As dimensões de uma imagem em HD, são de 1920 pixels por 1080 pixels.

Uma imagem com essas dimensões, ocuparia a tela inteira de um computador.

Alguns banners grandes podem precisar ocupar toda a largura da tela, talvez possa ser utilizada uma imagem com 1920 pixels de largura, mas com certeza, este banner não teria 1080 pixels de altura.

Talvez um banner de largura completa possa ter 500 pixels de altura, ou seja, 1920 pixels por 500 pixels.

Outras imagens do site talvez, nem precisem ter mais que 800 pixels de largura. Talvez, nem mesmo, mais que 500 pixels.

Então, a questão aqui é não carregar imagens com dimensões maiores do que são realmente visualizadas.

Apesar disso, não raramente, encontro sites ou lojas com imagens de 2000 pixels por 2000 pixels, em uma parte do site que só visualizamos no máximo 500 pixels.

Este é um ponto importante para otimizar imagens, pois com as dimensões adequadas, há uma economia enorme no peso delas.

Além disso, é uma recomendação do Google Lighthouse:

“O ideal é que sua página nunca exiba imagens maiores do que a versão renderizada na tela do usuário. Qualquer coisa maior, apenas resulta em bytes perdidos e retarda o tempo de carregamento da página”.

Redimensione a imagem e faça teste de visualização

Eventualmente, pode não ser fácil saber quais as dimensões adequadas para cada parte do seu site, mas diminua as dimensões e carregue em seu site para testar.

Por outro lado, essas “dimensões adequadas” podem depender da plataforma que você utiliza.

Ou, no caso do WordPress, pode depender do tema utilizado.

Assim, seguem algumas dicas para encontrar as dimensões adequadas:

  • Se você começou o seu site ou sua loja com um modelo disponibilizado pela plataforma, acesse novamente este modelo e tente descobrir qual as dimensões das imagens;
  • Da mesma forma, se você usa o WordPress, acesse o modelo do seu tema para encontrar as dimensões das imagens.

Não esqueça de testar com dimensões diferentes, começando com dimensões menores.

Por exemplo, se você precisa que ocupe a largura inteira da tela e ficou pequena, vá aumentando gradualmente a largura.

Para dimensionar as suas imagens, você pode utilizar também o Canva ou Befunk.

Qualidade das imagens versus otimização das imagens

Se, por um lado, devemos carregar no site ou loja virtual, imagens com o menor peso possível em KB.

Por outro lado, precisamos nos preocupar com a qualidade delas.

As dicas básicas que dei acima, não alteram a qualidade das imagens. E ainda assim, proporcionam melhorias significativas.

Essas dicas básicas sempre devem ser aplicadas em quaisquer circunstâncias.

Mas, podemos ir além no processo de otimização e conseguir resultado ainda melhores, com imagens super leves.

Todavia, a partir deste ponto, o processo de otimizar imagens, implica em perda de qualidade das mesmas.

Dessa forma, temos o que chamamos de um trade off: a melhoria de um aspecto (otimização), significa a piora de outro aspecto (qualidade), e vice versa.

O equilíbrio entre otimização e qualidade

Em primeiro lugar, observe as imagens abaixo; ambas com as mesmas dimensões.

Compare a qualidade (resolução de cada uma delas).

A primeira tem um peso de 45 KB.

Otimização de Imagem

Por outro lado, a próxima tem um peso de 141 KB.

Otimizar Imagens

Como você pôde perceber, imagens com melhor qualidade são mais pesadas que imagens mais otimizadas.

Além disso, há um outro detalhe:

Talvez a diferença de qualidade entre as duas imagens seja tão sutil, que mal é possível perceber. 

Assim, o grande segredo é encontrar o equilíbrio entre essas duas coisas.

Não existe o que podemos chamar de imagem otimizada em sentido absoluto, existem graus de qualidade de imagens, consequentemente, existem graus de otimização.

Todavia, dependendo do grau de otimização das imagens, a perda de qualidade pode ser imperceptível.

Mas, como conseguir o equilíbrio adequado? Valem algumas observações sobre isso:

  • Imagens de produtos em e-commerce, precisam ter qualidade maior do que imagens ilustrativas em um site;
  • Verifique se, para você, a qualidade está satisfatória;
  • Tente entender se para os seus clientes a qualidade é suficiente;
  • Ou seja, é um processo visual de teste e ajustes;

Como ajustar a qualidade das imagens?

Vamos dar mais um passo para otimizar as imagens, contudo, não descuide da otimização básica que expliquei acima.

Uma imagem com as mesmas dimensões e mesmo formato, podem ter pesos (em KB) diferentes, dependendo da qualidade delas.

Porém, se você já está usando uma imagem com baixa qualidade, diminuir a qualidade pode gerar um resultado final muito ruim.

Portanto, o ideal é sempre utilizar uma imagem original com qualidade satisfatória.

Existem formas de reduzir a qualidade de uma imagem e vou explicar duas formas que serão acessíveis a todos.

Otimização da qualidade da imagem com Photoshop

O Photoshop é uma ferramenta paga, e por isso, a sua ampla utilização pelas pessoas é mais limitada.

O recurso para redução da qualidade encontra-se na seguinte parte:

Acesse o menu arquivo, depois escolha a opção exportar para web.

Após isso, abrirá um painel para você definir as configurações de exportação. Uma dessas opções, é o nível de qualidade para exportação em JPG.

Para muitos casos, talvez a maioria deles, “60” de qualidade funciona bem, pois reduz o peso da imagem com qualidade suficiente para a maior parte das aplicações.

Porém, é importante testar!

Se perder qualidade na imagem, procure aumentar para 70 e assim até encontrar a qualidade e peso (em KB) ideal para o seu site.

Opção grátis para otimizar as imagens

Uma opção gratuita para fazer a redução de qualidade e, consequentemente a sua otimização, é utilizar a ferramenta Befunk.

Ela funciona de modo muito parecido com o Photoshop.

Quando você salva em formato JPG, a ferramenta Befunk apresenta o nível de qualidade que você deseja exportar a imagem.

Dicas sobre como otimizar imagens de produtos em e-commerce

As imagens de produtos são um caso a parte.

Se você possui um e-commerce, a otimização de imagens torna-se um fator crucial.

As imagens ocupam uma posição central para impulsionar as vendas da loja.

De um lado, os clientes esperam por imagens de excelente qualidade, para conseguirem visualizar perfeitamente os detalhes dos produtos que estão prestes a comprar.

Porém, imagem de qualidade excelente, em geral, são mais pesadas. Mais qualidade, necessariamente, implica mais peso.

De um lado, você precisa de imagens com dimensões suficientes, para que os clientes consigam visualizar os detalhes do produto utilizando o zoom da imagem.

Não há um tamanho padrão recomendado, mas pela minha experiência, não será necessário uma imagem com mais 1000 pixels, (ou talvez até 800 pixels), para a visualização correta do zoom.

Todavia, consulte o suporte técnico da sua plataforma de e-commerce ou do seu tema, sobre quais as dimensões recomendadas.

Use estas mesmas dimensões em todas as suas imagens dos produtos.

WEBP: um formato de imagem de última geração

Ainda que o JPG seja o formato mais leve e preferível para utilizar em sites e e-commerce. É um formato, digamos, um pouco ultrapassado.

O ideal é utilizar um formato de última geração, tal como recomenda o Google.

Dentre as opções disponíveis neste formato, o WEBP tornou-se o mais utilizado.

Portanto, utilizar WEBP, é o cenário mais perfeito para otimizar imagens, pois é um formato mais leve que os formatos tradicionais.

Porém, para utilizar este formato, a plataforma que você utilizou na criação do seu site ou loja, precisa ser compatível.

Se este for o caso, algumas plataformas convertem automaticamente as suas imagens em JPG para WEBP.

Mesmo se sua plataforma disponibilizar o formato WEBP, não deixe de seguir as dicas acima, pois somente este formato não otimizará suas imagens.

Para usuários de WordPress e WooCommerce vou indicar um plugin que otimiza as imagens e ainda disponibiliza em WEBP.

Como otimizar imagens online?

Primeiramente, vou reforçar um ponto:

Todas as dicas de otimização que descrevi acima, são absolutamente indispensáveis para otimizar imagens.

Ferramentas de otimização que indicarei abaixo, são um complemento para o processo indicado acima.

Nesta parte vou indicar uma ferramenta grátis que melhora ainda mais a otimização das imagens do seu site, com nível de qualidade realmente excepcional.

Porém, de nada vale, se não seguir as dicas sobre dimensões e formatos.

A ferramenta não faz milagre! Se a entrada é ruim, a saída também será.

Ah, se você usa WordPress, consulte também o próximo tópico.

Imagify

Para mim, é a melhor ferramenta de otimização de imagens do mercado.

É uma ferramenta que disponibiliza gratuitamente 20 MB de otimização de imagens e é bastante fácil de utilizar.

O Imagify faz a compressão das imagens e, na maioria dos casos, reduz o peso de maneira expressiva.

Criando uma conta na Imagify

Acesse o Imagify e crie uma conta grátis.

Não esqueça de acessar o seu e-mail e clicar no link enviado para validar a sua conta.

Acesse a sua conta na plataforma e assim que o login for realizado, você será direcionado para o painel principal.

Nível de compressão

O Imagify oferece três níveis de compressão para otimizar imagens.

É importante relembrar que o processo de compressão pode provocar perdas na qualidade. 

Da mesma forma, que o processo de escolha da qualidade de imagens em JPG, que mencionei acima.

Compressão normal

A compressão normal reduz um pouco o peso das imagens, sem nenhuma perda de qualidade.

É indicada se você não quer perda de qualidade visível, mas não haverá muitos ganhos em diminuição de peso.

Compressão agressiva

Por outro lado, a compressão agressiva oferece redução mais significativa do peso das imagens, com perda de qualidade praticamente imperceptível.

Eu penso que esta opção é o melhor equilíbrio para otimizar imagens na maioria dos casos.

Compressão ultra

Existem ainda, a compressão ultra que reduz expressivamente o peso das imagens, mas pode prejudicar a qualidade.

Vale a pena experimentar. Se ficarem satisfatórias, talvez possa proporcionar grandes ganhos.

Carregamento das imagens para otimizar

Após escolher o nível de compressão das imagens, você pode escolher entre subir as suas imagens na plataforma, ou inserir a URL (o endereço da página do seu site), das imagens que deseja otimizar.

A plataforma indica o peso inicial e o peso da imagem já otimizada.

Faça download das imagens otimizadas e carregue em seu site.

Plugin para otimizar imagem no WordPress

Os plugins WordPress para otimização de imagens facilitam bastante o trabalho.

O processo que expliquei para otimizar imagens torna-se praticamente automático.

Existem diversas opções de plugins para compressão de imagens no diretório WordPress.

Os mais populares (instalações ativas) são o Smush e o EWWW Image Optimizer. Ambos com aproximadamente 1 milhão de instalações ativas.

Todavia, eu continuo indicando o plugin Imagify.

Por que o Imagify é o melhor plugin Wordpress para otimizar imagens?

Em primeira lugar, quero ressaltar que a minha preferência pelo Imagify é pessoal.

Tendo em vista que muitas pessoas utilizam o Smush e o EWWW, devemos considerar que eles têm as suas vantagens.

Mas, eu acho o Imagify o melhor plugin para otimizar imagens pelos seguintes motivos:

Sua interface é bastante amigável e de fácil utilização.

Com o plano gratuito, você tem acesso a todos os recursos, inclusive disponibilização de imagens em formato WEBP. 

Por exemplo, o Smush não tem este recurso no plano grátis. Já o EWWW, não gera WEBP para imagens já existentes no site.

O Imagify trabalha com 100% de compatibilidade com o plugin WP Rocket.

É muito mais simples gerenciar as imagens otimizadas com o Imagify.

Na versão gratuita do Imagify podemos escolher níveis de compressão conforme a necessidade.

Como otimizar imagens para o Google entender o conteúdo?

O outro aspecto da otimização de imagens, é deixá-las de modo adequado para o Google entender o conteúdo da sua página.

Assim, esta parte da otimização de imagens pode melhorar o seu posicionamento nas pesquisas deste buscador indispensável.

Além disso, aumenta a visibilidade das imagens do seu site no Google Imagens.

As imagens devem refletir as palavras-chave da sua página

Primeiramente, é importante dizer que cada página do nosso site ou nossa loja online, tem uma ou mais palavras-chave que as represente.

Se um dos produtos da minha loja online é um tênis Nike. A palavra-chave principal da página do produto é “tênis Nike”.

Podendo haver palavras-chave secundárias, por exemplo: “tênis Nike masculino” “tênis Nike feminino” “tênis Nike branco”, conforme as características reais do produto que você esteja vendendo.

Da mesma forma, um site de um restaurante no bairro de Moema em São Paulo, tem palavras-chave como “restaurante”, “restaurante em Moema”, “Restaurante em São Paulo” etc.

Existem diversos critérios que precisam ser aplicados na otimização On-Page para que o Google entenda perfeitamente o assunto de cada página.

Porém, em relação às imagens, existem dois fatores principais que devemos aplicar para refletir as palavras-chave nas imagens.

Otimize o nome do arquivo de imagem

Isso significa que antes de você carregar uma imagem em seu site ou e-commerce, você deve ajustar o nome do arquivo conforme a palavra-chave da página em que a imagem será adicionada.

Ou seja, o nome do arquivo deve conter as palavras-chave da sua página!

Por exemplo, vamos voltar para uma página de produto: Tênis Nike!

Vamos imaginar que é um tênis Nike masculino.

Dessa forma, o nome do arquivo de imagem poderia ser “Tênis Nike Masculino”.

E poderia conter imagens com palavras-chave secundárias deste produto.

Mas, existe uma forma correta para escrever o nome do arquivo.

Regras

  • Em primeiro lugar, não utilize acentos no nome do arquivo de imagens;
  • Também, separe cada palavra por hífen (-);
  • E procure utilizar somente letras minúsculas;

Como escrever corretamente o nome do arquivo?

Vamos dar alguns exemplos:

Como Otimizar Imagens

Não esqueça do atributo ALT

O atributo ALT é uma tag HTML que adiciona mais informações sobre o conteúdo das imagens.

O Google também utiliza esta tag para entender o assunto da imagem e da página, na qual ela está inserida.

Praticamente todas as plataformas de criação de sites ou lojas online, disponibilizam algo que chamamos atributo ALT da imagem.

Quando você carrega uma imagem, já deve ter percebido que aparece um espaço chamado “ALT TEXT” ou “TEXTO ALTERNATIVO”. 

Procure por este espaço quando carregar uma imagem.

O que devemos inserir neste espaço?

Devemos inserir justamente, as palavras-chave do nome do arquivo, mas não precisa ser exatamente igual.

Mas, aqui você pode inserir com uma escrita normal. sem as regras que valem para o nome do arquivo.

Neste espaço, você pode usar acentos, espaço entre palavras, letras maiúsculas e minúsculas.

Ou seja, uma escrita normal.

Conclusão

Como você pôde ver, o processo de otimização de imagens não é tão simples.

Precisamos aplicar diversas técnicas.

Mas, posso garantir que, junto com o Lazy Load de imagens, os benefícios serão excelentes para o seu site ou loja online.

Por fim, com a prática, se tornará um processo automático.

Artigos relacionados:

No Blog da Agência Ux Web você encontrará conteúdo indispensável para o crescimento do seu negócio online.

REDES SOCIAIS

CATEGORIAS DO BLOG