Resposta rápida: O SEO de imagens no Shopify é principalmente um problema de velocidade, não de palavras-chave. As fotos de produtos são o maior elemento na página e geralmente o elemento de Maior Pintura de Conteúdo (LCP), então o tamanho do arquivo da imagem, as dimensões em pixels e a prioridade de carregamento afetam mais o ranking do que os nomes dos arquivos. Carregue com 2048 px na borda mais longa, mantenha a primeira imagem abaixo de cerca de 200 KB, defina largura e altura, carregue lentamente apenas abaixo da dobra, e deixe a CDN do Shopify servir as variantes WebP redimensionadas. Este guia cobre tamanhos, tamanhos de arquivo, resolução, redimensionamento e formatos; para texto alternativo veja texto alternativo de imagem de produto, para a pré-visualização de compartilhamento veja imagens de compartilhamento social.

Shopify serve imagens através de sua própria CDN e gera variantes responsivas automaticamente, o que significa que muitos conselhos genéricos de SEO de imagens não se aplicam aqui. O que resta é uma lista curta, e a maior parte é sobre peso e dimensões.

Por que as imagens dominam os Core Web Vitals do Shopify

Em uma página de produto típica, a imagem principal é o elemento LCP — o maior elemento na janela de visualização, e o elemento que o Google mede. Se leva 3,5 segundos para pintar, a página falha no LCP, não importa quão rápido o resto do tema seja.

Duas coisas a tornam lenta: o arquivo é maior do que o espaço em que é renderizado, e não é priorizado. Uma imagem de 2400 px exibida a 800 px desperdiça três quartos dos bytes. O filtro image_url do Shopify com um parâmetro de largura corrige isso, e a maioria dos temas modernos já o usa — mas imagens inseridas em campos de texto rico, corpos de blogs e seções personalizadas geralmente o ignoram completamente.

Tamanho da imagem, tamanho do arquivo e resolução são três coisas diferentes

A maioria dos conselhos sobre imagens falha porque mistura esses conceitos.

  • Tamanho da imagem são as dimensões em pixels — 2048 × 2048. Decide quão nítida a imagem pode ser e quão grande pode ser exibida.
  • Tamanho do arquivo são bytes no disco — 180 KB. Decide quanto tempo a imagem leva para ser baixada. Depende de dimensões, formato, compressão e quanto detalhe a foto contém.
  • Resolução (DPI) é uma instrução de impressão. Os navegadores a ignoram. Uma imagem de 1600 px a 72 DPI e a mesma imagem a 300 DPI são a mesma imagem na web; a regra "salvar a 72 DPI para web" não muda nada além dos metadados.

A variável que importa junto com os pixels é a relação de pixels do dispositivo. Um telefone com uma tela 2× precisa de aproximadamente o dobro da largura CSS em pixels reais para parecer nítido: um cartão de produto de 400 px de largura quer uma imagem de 800 px nesse dispositivo e uma imagem de 400 px em um monitor 1×. É para isso que servem srcset e sizes — o tema lista as variantes que o Shopify pode gerar e o navegador escolhe a que se encaixa. Temas construídos no filtro image_tag do Shopify emitem isso automaticamente; uma tag img escrita à mão em uma seção personalizada obtém um tamanho para todos.

Metas de tamanho de arquivo de imagem por localização

Uma única regra "mantenha as imagens abaixo de 100 KB" está errada em ambas as direções — muito frouxa para miniaturas, muito apertada para um banner de largura total. Trabalhe por localização:

Localização Largura típica de exibição Meta de tamanho de arquivo Porquê
Hero da página inicial / banner de largura total 1600–2000 px ≤ 200 KB (WebP), ≤ 300 KB (JPEG) Quase sempre o elemento LCP na página inicial
Primeira imagem do produto (líder da galeria) 800–1200 px ≤ 200 KB Elemento LCP na página do produto
Imagens adicionais da galeria 800–1200 px ≤ 100–150 KB Carregadas na interação ou lentamente
Cartões da grade de coleção 300–500 px ≤ 50 KB Dezenas por página; a soma é o que prejudica
Imagens inline de blogs 700–900 px ≤ 100 KB Geralmente ignoram a lógica de variantes do tema
Logos, ícones, emblemas ≤ 300 px ≤ 10 KB, SVG onde possível Repetidos em todas as páginas

Estas são metas de trabalho, não leis: um close-up detalhado de tecido precisará de mais bytes do que um produto em um fundo branco nas mesmas dimensões. O teste que importa é se a primeira imagem na página passa no orçamento de LCP.

Formatos: JPEG, PNG, WebP e o que o Shopify faz por você

  • JPEG para fotografias. A qualidade de exportação 75–82 é a faixa onde uma foto de produto para de mudar visivelmente, mas o arquivo continua encolhendo.
  • PNG apenas para gráficos planos que precisam de transparência — logos, emblemas, ilustrações com bordas duras. Uma fotografia em PNG é rotineiramente cinco vezes o tamanho do mesmo JPEG.
  • WebP é menor que ambos para a mesma qualidade visual, e a CDN do Shopify serve WebP automaticamente para navegadores que o aceitam. Converter antes do upload, portanto, não ganha nada na loja; o que ajuda é que um aplicativo que substitui um original superdimensionado por uma versão WebP encolhe todas as variantes que o Shopify gera a partir dele.
  • SVG para logos e ícones: independente de resolução e geralmente alguns kilobytes.

Redimensionando imagens para Shopify: onde fazer

Existem três lugares para redimensionar, e eles não são intercambiáveis.

Antes do upload (preferido para novas imagens). Redimensione para 2048 px na borda mais longa, depois comprima. Qualquer editor de imagem ou um compressor web gratuito faz isso, e significa que o original que o Shopify mantém já é enxuto. Exporte em lote uma sessão inteira no mesmo tamanho e proporção para que a grade da coleção permaneça uniforme.

Dentro do Shopify, pelo tema. As variantes do Shopify são a camada de entrega: o tema solicita uma largura e a CDN retorna esse tamanho. Isso é automático e correto, mas apenas reduz dimensões — um original pesado e ruidoso ainda produz variantes mais pesadas do que um limpo produziria.

Por um aplicativo que reescreve o original. Esta é a única rota que corrige imagens já no catálogo sem re-upload. O Autopilot da RankEngine tem uma regra de Compressão Automática de Imagens que converte imagens de produtos superdimensionadas para WebP e substitui o original através da API Admin (productCreateMedia, depois productDeleteMedia), e seu log de atividades registra cada conversão com o tamanho antes e depois — veja Configurando regras do Autopilot. Recarregar manualmente tem um custo que a rota do aplicativo evita: muda o URL da imagem, o que quebra links e referências em cache ao arquivo antigo.

O equilíbrio entre desempenho e qualidade, honestamente

Guias de compressão tendem a prometer nenhuma perda visível. A versão honesta: há uma perda, e a questão é se um comprador pode vê-la no tamanho em que a imagem é exibida. Verifique o resultado na página real do produto a 100%, em um telefone, não na pré-visualização ampliada do editor. Bandas em um gradiente suave, halos em bordas duras e textura de tecido embaçada são os três sinais; se você os vir, aumente a qualidade em cinco pontos e exporte novamente. O ganho de 82 para 60 é pequeno em bytes e grande em artefatos, por isso a faixa útil é estreita.

O que realmente fazer

Carregue com 2048 px na borda mais longa. O Shopify gera variantes menores a partir do original, então carregar maior desperdiça armazenamento sem melhorar nada. Carregar menor significa que a visualização de zoom fica suave.

Deixe o Shopify servir WebP. Ele faz isso automaticamente com base no cabeçalho Accept do navegador. Converter manualmente antes do upload não ganha nada e custa o fallback JPEG.

Defina atributos de largura e altura. Dimensões ausentes causam deslocamento de layout à medida que a imagem carrega, o que é uma penalidade direta de CLS. Temas que usam image_tag obtêm isso gratuitamente; tags img escritas à mão em uma seção personalizada geralmente não.

Carregue lentamente tudo abaixo da dobra — e nada acima dela. Um atributo lazy na imagem hero atrasa o elemento LCP e piora a pontuação. A primeira imagem deve ter uma alta prioridade de busca.

Posição da imagem Estratégia de carregamento Razão
Acima da dobra (hero / elemento LCP) fetchpriority="high", sem carregamento lento Carregamento lento move o maior elemento visível de pintura para mais tarde e piora a pontuação
Acima da dobra (outras imagens) Eager (o padrão) Imagens visíveis não devem ser adiadas
Abaixo da dobra loading="lazy" Imagens fora da tela são adiadas, reduzindo o peso inicial da página e liberando largura de banda para o elemento LCP

Comprimir antes do upload se a fonte for um arquivo de câmera. O processamento do Shopify não é agressivo. Um JPEG de DSLR de 6 MB torna-se uma variante de 900 KB; a mesma imagem passada por um compressor primeiro torna-se 200 KB sem diferença visível.

Nomes de arquivos e texto alternativo: a versão honesta

Nomes de arquivos são um sinal fraco. Renomear IMG_4821.jpg para cachecol-azul-merino.jpg vale a pena quando você está carregando de qualquer forma, e não vale um projeto de re-upload em massa — re-upload quebra URLs de imagens existentes e quaisquer links para elas.

O texto alternativo importa mais, principalmente para acessibilidade e Google Images, e é coberto adequadamente em texto alternativo de imagem de produto. O gerador de texto alternativo gratuito escreve um de cada vez no navegador.

A única coisa que vale a pena medir

Passe uma página de produto pelo PageSpeed Insights e olhe apenas para dois números: o elemento LCP (ele nomeará a imagem) e seu tamanho. Se o elemento LCP for uma imagem com mais de 200 KB, esse é o projeto inteiro.

Todo o resto — nomes de arquivos, sitemaps, dados EXIF — é erro de arredondamento ao lado da imagem que leva dois segundos para pintar.

Fazendo isso em todo um catálogo

A versão por página disso é direta. A versão do catálogo não é: em 800 produtos, as imagens superdimensionadas são um subconjunto, geralmente as mais antigas ou um lote importado de um feed de fornecedor.

O relatório de velocidade da RankEngine informa o LCP por URL com a imagem ofensiva nomeada, e suas ferramentas de imagem sinalizam arquivos superdimensionados e dimensões ausentes em todo o catálogo, em vez de por página; as regras de compressão e texto alternativo então as corrigem na execução diária do Autopilot dentro do limite de correção por loja, com cada alteração verificada contra a loja e reversível a partir do log.

Lista de verificação para seu próximo lote de imagens

  1. Mesma proporção para cada imagem na coleção.
  2. 2048 px na borda mais longa, exportado em qualidade JPEG 75–82 (ou WebP).
  3. Primeira imagem na página abaixo de 200 KB; miniaturas de grade abaixo de 50 KB.
  4. Nome de arquivo descritivo se você estiver carregando de qualquer forma; nunca um re-upload apenas para renomear.
  5. Texto alternativo escrito para o produto, não para a palavra-chave.
  6. Após a publicação: PageSpeed Insights em uma página de produto — confirme o elemento LCP e seu tamanho.

Relacionado