Otimizar imagens de produto no WooCommerce significa comprimir, converter para WebP e ajustar alt e sitemap antes de publicar. Segundo a web.dev (2024), o LCP deve ficar abaixo de 2,5 s. Cada foto pesada acima de 1 MB empurra o LCP do mobile para mais de 4 s. Otimize na ordem certa e a loja carrega rápido sem perder qualidade visual.

Otimizar as imagens de produto é a forma mais rápida de acelerar uma loja WooCommerce que carrega devagar no celular. A foto do produto costuma ser o maior elemento da página e define o LCP, a métrica de Core Web Vitals que o Google mede no mobile. Uma imagem de produto em PNG de 1,5 MB sem compressão pode sozinha estourar o orçamento de carregamento da página inteira. Este tutorial faz parte dos conteúdos de WooCommerce da FULL e mostra como comprimir, converter para WebP, definir o alt e expor as imagens de produto no sitemap XML, na ordem que evita reprocessar a biblioteca toda. O foco é resultado mensurável em velocidade e em ranqueamento de busca visual.

Diagnóstico rápido: Por que as imagens de produto pesam tanto

As imagens de produto representam a maior fatia do peso de uma página de loja: a galeria soma mais de 70% dos bytes do primeiro carregamento em boa parte das lojas WooCommerce. Um arquivo de 1,5 MB em PNG leva o tempo de pintura para além de 4 s em conexão 4G.

O diagnóstico mostra que o problema raramente é o servidor: é o peso do arquivo e a falta de metadados, e resolver isso é mais barato que migrar de hospedagem. Uma loja com 40 fotos de produto não otimizadas carrega vários megabytes por página, enquanto a mesma loja em WebP entrega o catálogo em uma fração disso. A galeria de produto é o ponto certo para começar, porque é nela que o ganho de velocidade aparece primeiro e sem mexer no plano de hospedagem.

Passo a passo: Como otimizar imagens de produto no WooCommerce

Otimizar imagens de produto no WooCommerce segue cinco passos em ordem fixa, porque inverter a sequência força a regeneração de milhares de thumbnails. Em loja com mais de 1.000 SKUs, comprimir depois de ligar o WebP on-the-fly reprocessa a biblioteca inteira e gera pico de CPU em horário de pico. A regra é preparar o arquivo, depois automatizar, e só então indexar.

Legenda: a mesma foto de produto em WebP pode pesar menos da metade do PNG original sem perda visível.

Passo 1: Dimensione a imagem antes de subir

Redimensione cada foto para o tamanho real de exibição antes do upload: uma imagem de produto exibida a 600 px não precisa de um arquivo de 3.000 px de largura. O WooCommerce gera várias miniaturas automaticamente, então subir um original gigante multiplica o desperdício de disco. Use uma largura de origem entre 1.200 px e 1.600 px, suficiente para zoom sem exagero. Ferramentas como o Squoosh, do Google, fazem o corte e a prévia do peso final antes de publicar. Veja como redimensionar imagens sem perder qualidade antes de automatizar.

Passo 2: Comprima e converta para WebP

Comprima cada arquivo e gere a versão WebP, formato que entrega o mesmo visual com 25% a 35% menos bytes que o JPEG, segundo a documentação do WebP do Google. Plugins como ShortPixel e Imagify comprimem em massa e criam o WebP servido por negociação de conteúdo. Defina compressão “lossy” inteligente, que reduz peso sem artefatos visíveis em fotos de produto. Para escolher o formato certo por tipo de imagem, consulte qual tipo de arquivo de imagem usar no WordPress.

Passo 3: Ative o lazy-loading correto

Ative o lazy-loading para que as imagens de produto abaixo da dobra só carreguem quando o usuário rola a página, o que reduz o número de requisições no primeiro paint em lojas com galerias longas. O WordPress aplica loading="lazy" nativo desde a versão 5.5, mas a foto destacada acima da dobra deve ficar de fora do lazy para não atrasar o LCP. Configure a exceção da primeira imagem no plugin de performance. O tutorial de lazy load em imagens e vídeos detalha a exclusão da imagem LCP.

Passo 4: Preencha o alt de cada imagem de produto

Preencha o atributo alt de toda imagem de produto com a descrição real do item, porque o Google usa esse texto para indexar a foto na busca visual e leitores de tela o usam na acessibilidade. Um alt como “tênis de corrida masculino azul cano baixo” rende mais que “IMG_4821”. O alt da imagem de produto serve a SEO e a acessibilidade ao mesmo tempo, mas o título da imagem não substitui o alt. A diferença entre os dois está em alt text versus título da imagem, e o conceito de alt text vale revisar.

Passo 5: Exponha as imagens no sitemap do Rank Math

Ative o sitemap de imagem no Rank Math PRO para que cada imagem de produto entre no índice e apareça no Google Imagens, fonte de tráfego que muitas lojas ignoram. Sem o sitemap de imagem, o Google pode levar semanas para descobrir a foto. No Rank Math, em Sitemap Settings, ligue “Include Images” e o plugin agrega as imagens de produto ao XML automaticamente. O passo completo está em como configurar SEO para imagens com Rank Math.

Como medir o ganho de velocidade depois de otimizar

Medir o antes e depois é o que prova que a otimização das imagens de produto funcionou: rode o PageSpeed Insights na URL do produto e compare o LCP. Em testes na base FULL, converter a galeria para WebP tende a derrubar o LCP de cerca de 4 s para a faixa de 2,5 s no mobile.

Esse limite de 2,5 s é o que o Google considera bom no Core Web Vitals, então é a meta a perseguir. Acompanhe também os Core Web Vitals no WordPress dentro do Search Console, que reportam o campo real de usuários, não só o laboratório do PageSpeed. A métrica que mais importa para loja é o LCP da página de produto, porque é ela que recebe o tráfego de compra e converte. Repita a medição uma semana depois para confirmar que o campo real acompanhou o laboratório.

Quanto isso custa e onde a FULL entra

Comprimir imagens de produto manualmente é grátis, mas automatizar com Rank Math PRO em catálogo grande é o que escala sem trabalho repetido. No plano PRO da FULL, por R$849 ao ano, você ativa o Rank Math PRO e os demais plugins do bundle com um clique.

Quando você gerencia 10 lojas, esse plano PRO dá cerca de R$85 por site, contra US$59 por licença avulsa de cada plugin. A gente vê no suporte da FULL que a maior parte das lojas lentas sofre por imagem mal otimizada, não por servidor fraco. Compare os planos da FULL antes de comprar plugin avulso, porque o bundle por R$85 por site sai mais barato que licenciar Rank Math, compressor e cache separados. A FULL é complementar à sua hospedagem: entra na camada de plugins e otimização, não substitui o host.

Erros comuns ao otimizar imagens de produto

Os erros mais comuns aparecem cedo e custam reprocessamento: o principal é ligar a compressão WebP on-the-fly antes de regenerar thumbnails, o que em loja com mais de 1.000 SKUs reprocessa a biblioteca inteira e gera pico de CPU em horário de pico.

Outro deslize frequente é comprimir demais, com qualidade abaixo de 60%, e deixar a foto do produto com artefatos visíveis que reduzem a conversão na página. Há ainda quem aplique lazy-loading na imagem destacada acima da dobra e, sem querer, piore o LCP que queria corrigir. Um quarto erro é esquecer a largura e altura no HTML, o que dispara CLS. Quem gerencia várias lojas encontra mais armadilhas em como gerenciar uma loja WooCommerce. A ordem dos cinco passos existe justamente para evitar esses casos antes que cheguem ao cliente.

Perguntas frequentes sobre imagens de produto no WooCommerce

Próximos passos para acelerar sua loja

Otimizar imagens de produto é a primeira otimização de performance que toda loja WooCommerce deveria fazer, porque entrega o maior ganho de LCP pelo menor esforço. Siga a ordem dos cinco passos, meça o antes e depois no PageSpeed Insights e exponha as fotos no sitemap de imagem para capturar o tráfego de busca visual. Depois de resolver a imagem, ataque cache e fontes, na sequência de prioridade. Para continuar aprendendo, o FULL Academy reúne os tutoriais, guias e reviews de WordPress e WooCommerce em um só lugar.