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.
