Google dá Dicas para Otimização de Imagens: confira o que fazer!

Atenção ao tamanho das imagens, ao formato, a configurações de compressão e outras aplicadas ao site são algumas das orientações dadas pelo próprio Google nas dicas de otimização de imagens. Entenda melhor cada uma delas.

Na segunda semana de julho, o Google atualizou suas diretrizes de boas práticas de otimização de imagens. No mesmo período, lançou um vídeo com dicas básicas para SEOs seguirem, seja em fotos de produtos em um e-commerce, banners, ou imagens adicionadas a conteúdos de blogs.

É incontestável que imagens são essenciais para qualquer site: saber otimizar as fotos de produto é parte indispensável de uma estratégia de SEO para e-commerce, e bons conteúdos informativos utilizam recursos visuais para auxiliar o usuário no consumo da informação. 

Só que muitas imagens podem trazer alguns problemas para o site, deixando-o mais pesado, com o carregamento lento, ou mesmo confuso ao usuário caso as fotos não façam muito sentido com o conteúdo. As boas práticas do Google estão aí para garantir que cada recurso visual melhore a experiência do seu usuário. 

Para ajudar, compilamos as alterações feitas em 4 dicas do Google para Otimização de imagens. Vamos lá?

Confira também: Guia fundamental de SEO On-Page: 6 passos para gerar resultados sólidos

Dica 1. Atenção ao formato da imagem

Atualmente, existem mais de 10 formatos de imagem que podem ser usados. Alguns dos que mais encontramos na WEB são:

Formato	Significado da Sigla	Explicação
JPEG	Joint Photographic Experts Group	Formato mais utilizado na web e um dos mais comuns na maioria das câmeras. Tem boa compactação.
PNG	Portable Network Graphics	O PNG nasceu para substituir o GIF, e é muito utilizado por garantir imagens de alta qualidade. No entanto, as imagens acabam tendo um peso maior como consequência.
TIFF	Tagged Image File Format	Utilizado em impressão industrial e também é comum em câmeras.
GIF	Graphics Interchange Format	Formato comumente utilizado para imagens animadas.
BMP	Windows Bitmap	Muito usado pelo Windows e possibilita imagens de maior tamanho.
SVG	Scalable Vector Graphics	Imagem vetorial. É muito comum em logos dos sites, ou logotipos de marcas em recursos de branding.
WebP	Web Picture format	Foi criado pelo Google em 2010 e é considerado, pela empresa do gigante de buscas, como um formato de última geração. Permite imagens de alta qualidade, similar ao PNG, mas em tamanho menor, portanto mais otimizadas.

Uma dica fundamental de otimização de imagens é utilizar o formato mais responsivo e de última geração. No caso específico de posicionamento no Google, utilize imagens WebP – .webp – que mantém a alta qualidade e um tamanho bem menor, reduzindo o peso no carregamento do site.

O formato também pode ajudar a conquistar alguns elementos visuais da SERP que dependem de imagens otimizadas. 

Para ilustrar melhor, veja o que cada formato permite:

	JPG	PNG	WebP
Transparência	Não	Sim	Sim
Animações	Não	Não	Sim
Compressão	Com perdas de qualidade (lossy)	Sem perdas de qualidade (lossless)	Pode ser com ou sem perdas (lossy e lossless)

Como você pode ver, o WebP é quem tem mais opções de funcionalidade de uma imagem, com a possibilidade de compressão sem perdas na qualidade. Mas, na dúvida, você pode utilizar um site ou aplicativo, como o Squoosh, para ver como ficará a imagem antes e depois da mudança para determinado formato.

Dica 2. Verifique as configurações de compressão

Arquivos de imagens da web são dados. Muitos dados que trazem em si o tamanho, peso e outras informações sobre os pixels, trazendo a representação visual à qual temos acesso. Imagens muito grandes, com dimensões amplas, ou com alta qualidade, tendem a ter maior peso e, portanto, exigir mais do desempenho do site. 

As configurações de compressão são o que ajudam a reduzir o impacto da imagem no seu site, diminuindo seu peso, preferencialmente sem perder a qualidade.

Você pode fazer os ajustes de compressão de imagens manualmente antes de fazer o upload em um site, mas, caso tenha um e-commerce com milhares de imagens, sabemos que isso fica inviável. Nesse caso, verifique as configurações de compressão que melhor reduzam o tamanho em bytes da imagem sem comprometer a qualidade. 

Dica 3. Utilize imagens responsivas

Temos que lembrar que os usuários acessam sites de diferentes dispositivos. Um potencial comprador pode acessar sua loja virtual a partir do celular, do computador, de um tablet, e o tamanho da tela impacta diretamente na experiência visual que ele terá com fotos dos produtos ou vídeos de utilização.

Garanta que as imagens são responsivas para se adaptar a diferentes telas, sem perder qualidade ao serem visualizadas em qualquer dispositivo.

Existem algumas formas de fazer isso. Você pode usar o elemento <picture>:

<picture>
<source type=”image/svg+xml” srcset=”image.svg”>
<source type=”image/webp” srcset=”image.webp”>
<img src=”pyramid.png” alt=”imagem do produto X”>
</picture>

Dica 4. Aplique lazy-loading

Por fim, aplique o comando de lazy-loading. É só adicionar loading=”lazy” dentro do elemento <img src=>. Por exemplo:

<img src=”imagem.png” loading=”lazy” alt=”texto alternativo” width=”200” height=”200”>

Lazy loading é recomendado para imagens que não precisam carregar imediatamente, como aquelas que ficam depois da primeira dobra. Se o usuário não precisa ter contato imediato, o carregamento da imagem pode ser adiado de forma que agilize o carregamento da página em si, melhorando a experiência do visitante do seu site.

Lembre-se de só utilizar lazy loading para imagens que não precisam ser visíveis imediatamente, ou a experiência do usuário no seu site será comprometida.

Essas quatro dicas foram resumidas de um tutorial trazido pelo próprio gigante de buscas, e são apenas o básico da otimização de imagens, que envolve muitas outras técnicas para melhorar a performance delas em seu site. Você pode ver o vídeo em inglês abaixo:

Começou por aqui, já aplicou tudo, e quer ver como continuar? Veja um guia de SEO para otimizar as imagens do seu site.