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:

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:

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 :

Dica 4. Aplique lazy-loading

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

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.