Tamanhos de Imagem no Shopify

Use 2048 por 2048 pixels como seu master do Shopify e mantenha cada arquivo entregue abaixo de 500 KB. O Shopify permite imagens de até 20 MB e 4472 pixels quadrados, mas esses números descrevem o que a plataforma tolera, e não o que uma vitrine rápida precisa.

O valor de 20 MB é o número que a maioria dos guias cita, e é o número errado para se basear no design. O que o Shopify permite e o que o Shopify recompensa são coisas diferentes. Uma página de produto com 8 imagens de 3 MB cada é uma página de 24 MB, e os compradores em dispositivos móveis vão embora antes de o carregamento terminar.

Tamanhos de imagem do Shopify por posicionamento

As imagens dos produtos devem ser quadradas com 2048 pixels, enquanto banners, blocos de coleção e logotipos precisam, cada um, de suas próprias dimensões. Usar um único tamanho em todos os lugares gera banners esticados e imagens de coleção cortadas.

Os temas cortam as imagens de maneira diferente, e um banner que parece correto na visualização de desktop frequentemente é cortado ao meio em um celular. Mantenha a parte importante de um banner nos 60 por cento centrais para que nenhum tema o corte.

Por que 500 KB é o número que importa

O peso da página determina a velocidade de carregamento de uma vitrine, e as imagens representam a maior parte desse peso em uma página de produto típica. Uma página com menos de 2 MB no total carrega confortavelmente em dados móveis, enquanto uma página de 24 MB não.

Os compradores em celulares representam a maior parte do tráfego para a maioria das lojas, e as conexões móveis variam muito mais do que a banda larga de um escritório. Cada segundo de tempo de carregamento custa conversões, o que torna o peso da imagem uma questão de receita, e não apenas técnica. Reduzir 8 imagens de produtos de 3 MB para 300 KB remove 21 MB da página e não altera nada que o comprador possa ver.

O Shopify comprime as imagens para você

O Shopify serve variantes redimensionadas por meio de sua rede de distribuição de conteúdo (CDN) e converte automaticamente para WebP em navegadores compatíveis. A plataforma faz um trabalho razoável e funciona a partir de qualquer arquivo que você enviar.

Esse último ponto é a limitação. O Shopify gera variantes menores a partir do seu original, de modo que um envio de 5 MB mal compactado produz variantes maiores do que um envio de 400 KB bem preparado produziria. Compactar antes do envio também reduz o seu próprio uso de armazenamento e torna as importações em lote muito mais rápidas, já que uma importação de 500 produtos move 200 MB em vez de 2,5 GB.

Como preparar imagens para o Shopify

Para produzir uma página de produto rápida, siga estes 6 passos.

1. Exporte um master quadrado de 2048 por 2048 pixels do seu editor de fotos.
2. Redimensione qualquer banner ou imagem de estilo de vida para a largura real de exibição, duplicada para telas de alta densidade.
3. Converta fotografias para WebP, ou mantenha em JPG se o seu fluxo de trabalho depender disso, já que o Shopify converte de qualquer maneira.
4. Comprima para um tamanho ideal, usando 300 KB para fotografias de produtos e 400 KB para banners.
5. Nomeie os arquivos pelo código do produto e pela visualização para que uma importação de CSV em lote mapeie as imagens para os produtos certos.
6. Faça o upload e verifique a página do produto em um celular, em vez de apenas na visualização de desktop.

WebP no Shopify

O Shopify oferece suporte nativo ao WebP há anos e converte automaticamente arquivos JPG e PNG enviados para navegadores compatíveis. Enviar WebP diretamente é aceito e oferece controle sobre a compressão, em vez de deixá-la a cargo da plataforma.

O WebP alcança a mesma qualidade visual que o JPG com tamanhos de arquivo 25 a 35 por cento menores, o que vale a pena em uma página com 8 fotografias. O único caso a evitar é o envio de WebP quando o arquivo for baixado posteriormente por um fornecedor ou enviado para uma gráfica, já que esses destinos ainda esperam JPG.

Corrigindo uma página de produto lenta

Comece com a maior imagem da página, pois o maior arquivo individual geralmente é responsável pela maior parte do atraso. Em uma vitrine do Shopify, isso normalmente é o banner da página inicial ou a primeira fotografia do produto.

• Redimensione antes de comprimir. Um banner de 4000 pixels em um espaço de 1920 pixels desperdiça 75 por cento dos seus dados.
• Reduza o número de imagens acima da dobra. Uma galeria de 12 imagens carregando de uma só vez atrasa todo o resto.
• Verifique se o carregamento preguiçoso (lazy loading) está ativado para imagens abaixo da dobra, o que a maioria dos temas modernos faz por padrão.
• Substitua arquivos GIF animados por vídeo, já que um GIF curto frequentemente pesa mais do que todo o resto da página.
• Audite os aplicativos. Widgets de avaliações, pop-ups e selos de segurança frequentemente carregam suas próprias imagens e scripts.

Texto alternativo (alt text) e nomes de arquivos de imagem

Escreva um texto alternativo descrevendo o produto para compradores que usam leitores de tela, e nomeie os arquivos com base no produto, em vez do nome gerado pela câmera. Um arquivo chamado IMG_4821.jpg não diz nada aos mecanismos de busca e aos compradores.

Use um padrão como camisa-de-linho-azul-marinho-frente.jpg, que permanece legível em uma importação em lote, organiza-se de forma previsível em uma pasta e descreve a imagem nos resultados de busca. O texto alternativo deve dizer o que a fotografia mostra, incluindo cor, material e ângulo, sem repetir o título do produto palavra por palavra. Ambos os campos levam segundos por produto e melhoram a exibição de uma loja na busca por imagens.

Testando as alterações antes de implementá-las

Processe 5 produtos primeiro, publique-os e verifique as páginas em um celular real antes de rodar o catálogo completo. Um erro de configuração aplicado a 500 produtos custa muito mais tempo para desfazer do que para prevenir.

Verifique 3 coisas nos produtos de teste. Confirme se as imagens parecem nítidas no zoom máximo, já que os compradores usam muito o zoom em roupas e joias. Confirme se a grade da coleção mostra cortes consistentes. Confirme se a página carrega rapidamente em dados móveis, em vez de apenas na banda larga do escritório. Só então aplique as mesmas configurações a todo o resto.

Aplicativos de imagem versus fazer antes do upload

Os aplicativos de compressão cobram mensalmente para resolver um problema que você pode resolver de uma vez antes de fazer o upload. Os aplicativos são úteis quando uma loja recebe constantemente novas imagens de várias pessoas e ninguém controla o que é enviado.

Uma loja com um catálogo estável e uma única pessoa gerenciando as imagens não precisa de uma taxa recorrente. Compactar a biblioteca uma vez e compactar as novas fotografias conforme elas chegam alcança o mesmo resultado. Reconsidere quando o catálogo crescer além do que você pode processar manualmente, ou quando vários funcionários enviarem imagens sem seguir uma especificação.

Erros comuns de imagem no Shopify

Fazer o upload direto da câmera é o erro mais caro, porque uma fotografia de 24 megapixels carrega 10 vezes mais dados do que uma vitrine pode exibir. A plataforma aceita o arquivo, e a página paga o preço.

Dois outros erros aparecem regularmente. Misturar formatos de imagem em uma coleção produz uma grade irregular, já que os temas cortam para o formato quadrado e uma fotografia em modo retrato perde o topo e a base. Usar PNG para fotografias de produtos infla o tamanho dos arquivos de 3 a 5 vezes sem nenhum benefício visível, porque o PNG armazena cada pixel exatamente e uma fotografia não tem áreas planas para aproveitar.

Mantendo um catálogo consistente

Processe todo o catálogo em um único lote para que cada fotografia de produto compartilhe as mesmas dimensões, compressão e enquadramento. Os compradores que comparam produtos percebem a inconsistência, mesmo quando não sabem identificá-la.

A consistência também ajuda a grade da coleção, onde imagens com formatos e brilhos correspondentes parecem uma página planejada, e não uma colagem de elementos. Defina as dimensões e a meta de tamanho uma vez e, em seguida, aplique-as a cada arquivo, em vez de ajustar cada produto individualmente.

Processando um catálogo em uma única etapa

Envie até 500 imagens de uma só vez, ou arraste um arquivo ZIP diretamente do seu fotógrafo, e cada arquivo retornará redimensionado e compactado sob a mesma especificação. Um catálogo que levaria uma tarde inteira em um software de desktop é concluído em poucos minutos.

Tudo roda dentro do seu navegador no seu próprio processador, de modo que produtos não lançados, fotos de campanhas sazonais e fotografias de fornecedores nunca chegam a um servidor. Para uma loja que prepara um lançamento sob embargo, manter os arquivos locais é a diferença entre um anúncio controlado e um vazamento, e não custa nada a mais.