12 dicas de otimização de imagem para acelerar seu comércio eletrônico (SEO + desempenho)

Quer saber por que e como otimizar imagens para seu site de comércio eletrônico? O objetivo final da otimização de imagem é criar o menor tamanho de arquivo sem comprometer a qualidade da imagem. Você deseja mostrar imagens de alta qualidade sem afetar o desempenho do seu site.

Estudos têm mostrado consistentemente que a velocidade rápida da página resultará em uma melhor posição no Google e uma taxa de conversão mais alta. Como resultado, você deseja que suas imagens sejam otimizadas e não muito grandes para os visitantes.

As imagens são essenciais para uma loja online; a maioria de suas vendas depende de imagens de produtos. Os clientes sempre querem verificar os detalhes dos produtos (como cores ou materiais) antes de fazer qualquer compra.

Você sabia? De acordo com Salsify, 73% dos compradores precisam ver pelo menos três imagens para tomar uma decisão de compra.

Agora, se você olhar para o nosso exemplo abaixo, qual produto você compraria para sua próxima festa de verão? A resposta é A, certo?

As imagens são essenciais para aumentar as conversões, mas imagens não otimizadas fazem com que seu site de comércio eletrônico fique lento (afastando clientes em potencial da sua loja). Para evitar esses problemas de desempenho, estamos compartilhando nossas melhores dicas para otimizar imagens, aumentar a velocidade de sua loja virtual e melhorar sua classificação no Google.

12 dicas de SEO e desempenho para otimizar suas imagens de comércio eletrônico

Aqui estão 12 dicas de SEO e desempenho que você pode aplicar para otimizar suas imagens de comércio eletrônico, acelerar sua loja de comércio eletrônico e classificar melhor no Google:

1. Dimensione corretamente suas imagens
2. Compactar imagens
3. Escolha o formato de arquivo correto
4. Usar cache do navegador
5. Pré-carregue imagens para exibi-las mais rapidamente e aumentar seu LCP
6. Use o atributo Fetchpriority
7. Inclua atributos de tamanho de largura e altura para evitar movimentos repentinos de layout (CLS)
8. Usar uma CDN de imagem
9. Ativar carregamento lento
10. Use imagens responsivas
11. Otimize os nomes dos arquivos de imagem e inclua um texto alternativo otimizado para SEO
12. Criar um Sitemap de imagem

Vamos mergulhar em cada uma das técnicas de otimização de imagem que impulsionarão o SEO e o desempenho do seu site de comércio eletrônico.

1. Dimensione corretamente suas imagens

O melhor tamanho para imagens de comércio eletrônico é tentar manter o tamanho do arquivo de imagem abaixo de 70-80 KB. A dimensão real depende de qual CMS ou varejista eletrônico você está usando.

• Imagens WooCommerce: 600 x 600 (mínimo)

• Imagens da Amazon: 1000 x 1000 px (mínimo)
• Imagens da Shopify: 800 x 800 px (mínimo para obter a funcionalidade de zoom)

2. Comprimir Imagens

Comprimir imagens significa reduzir o tamanho da imagem sem perder qualidade. Existem dois tipos de compressão: com perdas vs. sem perdas.

• Sem perdas – uma pequena redução no tamanho do arquivo sem alteração na qualidade.
• Com perdas – uma redução mais significativa no tamanho do arquivo, mas pode afetar a qualidade. Existem vários níveis na compressão “com perdas”: alguns nem são visíveis ao olho humano, e alguns são mais agressivos e impactam na qualidade.

3. Escolha o formato de arquivo correto

O Google PageSpeed ​​Insights recomenda o uso de um formato de última geração como o WebP para otimizar suas imagens. Ao veicular suas imagens ao WebP em seu site de comércio eletrônico, você economizará no tamanho do arquivo de imagem, conforme mostrado na figura abaixo:

4. Use o cache do navegador

Um dos métodos de otimização mais eficazes é o cache de imagens. Com um plugin do WordPress como o WP Rocket, você pode armazenar os arquivos de imagem no cache do navegador de um usuário ou em um servidor proxy para acesso mais rápido e fácil no futuro.

5. Pré-carregue imagens para exibi-las mais rapidamente e aumentar seu LCP

Pré-carregar a maior imagem acima da dobra aprimorará o Largest Contentful Paint (LCP), um Core Web Vital. Como? O pré-carregamento da imagem LCP pode exibir sua imagem principal ou banner do site muito mais cedo no carregamento da página, resultando em uma experiência positiva do usuário.

Como o próprio nome sugere, o pré-carregamento permite priorizar o carregamento de um elemento da página. Novamente, o WP Rocket pode ajudá-lo a pré-carregar imagens, fontes e links:

Se preferir, você também pode aplicar essa tag de pré-carregamento manualmente em suas imagens:

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. Use o atributo Fetchpriority

Outra dica para otimizar imagens e obter um LCP melhor é informar ao navegador qual imagem ele deve buscar primeiro usando o atributo fetchpriority .

Sua imagem LCP deve ter fetchpriority=”high” para priorizar o download, enquanto as imagens de rodapé devem ter fetchpriority=”low”, pois não são imediatamente necessárias. O Google pesquisou seu próprio mecanismo de busca de lutas e descobriu que 99% do conteúdo acima da dobra foi exibido em menos de 2 segundos graças às dicas de prioridade:

7. Inclua atributos de tamanho de largura e altura para evitar movimentos repentinos de layout (CLS)

Se o PageSpeed ​​Insights detectar que algum conteúdo se move repentinamente, isso afetará a experiência do usuário e a velocidade geral de um site. Mudança de layout cumulativa (CLS) é outro Core Web Vitals que mede se ocorrem mudanças repentinas de layout durante o tempo de carregamento. Se você reservar o espaço da imagem adicionando os atributos de altura e largura às suas imagens, o Google Page Insights lhe dará uma boa nota CLS.

A largura e a altura da imagem não são especificadas: mudança repentina de layout após o carregamento da imagem = CLS inválido	Largura e Altura são especificadas: Sem mudança de layout = Bom CLS

8. Use um CDN de imagem

As CDNs de imagens (redes de entrega de conteúdo) estão entre as melhores ferramentas disponíveis no mercado para otimização de imagens. De acordo com o web.dev, isso pode resultar em economia de 40 a 80% no tamanho do arquivo de imagem. ​​Todas as imagens carregadas de uma CDN serão veiculadas por meio do URL da imagem que indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso é útil para criar variações de uma imagem para diferentes cenários:

Configurar um CDN a partir do zero pode parecer complicado. Se você preferir uma instalação automática, experimente o RocketCDN.

9. Ative o carregamento lento

O carregamento lento é outra estratégia para otimizar as imagens de uma loja online. Ele visa identificar recursos como não bloqueantes e carregá-los apenas quando necessário. Resumindo, ele carrega imagens apenas quando seu visitante rola para aquele conteúdo.

Se você não se sentir confortável em aplicar manualmente o script de carregamento lento, você pode usar um plugin como o WP Rocket para ajudá-lo.

10. Use imagens responsivas

Otimizar suas imagens para mobile é outra forma de aumentar a experiência do usuário e a velocidade de carregamento da sua loja. Imagens responsivas são um conjunto de técnicas utilizadas para carregar a imagem certa de acordo com o dispositivo utilizado pelo usuário: desktop, tablet ou celular. É calculado com base na resolução do dispositivo, orientação, tamanho da tela, layout da página e conexão de rede.

Os atributos srcset e tamanhos podem ajudá-lo a tornar suas imagens responsivas e obter um melhor desempenho e uma ótima experiência do usuário. Funciona assim:

• srcset = descreve a largura real dos arquivos de origem
• tamanhos = informa ao navegador a largura que a imagem deve ser exibida na tela.

Dev.to escreveu um excelente artigo detalhado sobre como usar ambos para suas imagens responsivas. Recomendamos que você leia o guia completo.

11. Otimize os nomes dos arquivos de imagem e inclua um texto alternativo amigável para SEO

A otimização da imagem não para na qualidade do próprio arquivo. Também se expande para o nome dado ao arquivo e o texto alternativo. Sempre escolha um nome relevante e específico para sua imagem com um texto alternativo claro. Isso ajudará suas imagens a serem classificadas no Google, descrevendo sobre o que é a imagem.

12. Crie um Sitemap de imagem

Adicionar imagens a um mapa do site está ajudando o Google a descobrir imagens que podem não ser encontradas de outra forma (como imagens carregadas com JavaScript). Dá um pequeno impulso de SEO para sua loja online. Aqui estão as tags de sitemap necessárias do Google para encontrar suas imagens:

Agora que você conhece nossas melhores dicas de otimização para agilizar sua loja virtual, existem algumas ferramentas que podem te ajudar a implementá-las. Por exemplo, você pode usar o plug-in Imagify para abordar a maioria dos pontos de otimização em apenas alguns cliques. Vamos passar por cima de cada um deles.

Otimizando imagens de comércio eletrônico com o Imagify

O plugin Imagify pode ajudá-lo a lidar com a maioria das dicas de otimização que fizemos na seção anterior para acelerar sua loja online. Depois de instalar o plugin gratuito no WordPress, você desbloqueará vários recursos que ajudam a acelerar seu site e aumentar a visibilidade no Google. Vamos explorar os melhores recursos do Imagify!

Graças ao Imagify, você pode otimizar imagens das seguintes maneiras:

• Compacte e otimize suas imagens usando três níveis de compactação: normal, agressivo e ultra. A qualidade da sua imagem permanecerá quase inalterada, mas o tamanho do arquivo será muito mais leve.

• Comprima e redimensione várias imagens ao mesmo tempo:

• Otimização da biblioteca do WordPress – você também pode realizar a otimização em imagens selecionadas, assim como em nosso exemplo abaixo. Imagify economizou 94% do tamanho do meu arquivo!

• Converta suas imagens para WebP em um clique:

• Redimensione automaticamente suas maiores imagens:

E por último, mas não menos importante, o Imagify otimiza suas imagens para atender às recomendações do Google no PageSpeed ​​Insights, como “servir imagens em formatos de última geração” (graças ao recurso de conversão WebP), “codificar imagens com eficiência” e “imagens de tamanho adequado”.

Problemas de PSI sem Imagify	Auditoria aprovada com Imagify

Por fim, o preço do Imagify é simples: você recebe 200 MB de dados gratuitos todos os meses e, se precisar de recursos ilimitados, custa apenas US$ 9,99!

Empacotando

As imagens afetam muito a percepção e as vendas do seu produto. Otimizá-los com um plug-in como o Imagify aumentará o desempenho da sua loja online e aumentará seus rankings de otimização de mecanismos de pesquisa (SEO). Os resultados são economias de carga significativas, uma experiência de usuário aprimorada e uma melhor posição no Google. Experimente o Imagify gratuitamente e conte-nos como está indo a compactação de imagens da sua loja online!