Dimensão de imagem
O que você vai aprender
- Qual tamanho enviar pra cada opção de "Proporção"
- Por que imagem pesada prejudica a loja, não só o visual
Pra que serve
Vários blocks e sections do tema (Imagem, Slider de comparação, Card de produto, Card da coleção, Hero, e outros) têm uma configuração de Proporção, com sempre as mesmas 4 opções: Automático, Quadrado, Retrato, Paisagem. Em vez de repetir a mesma explicação em cada página, ela fica centralizada aqui.
Qual tamanho enviar
| Proporção | Formato final | Dimensão sugerida |
|---|---|---|
| Automático | Usa a proporção real da imagem enviada, sem cortar | Envie já no formato que quer exibir |
| Quadrado | 1:1 | 1200 × 1200 px |
| Retrato | 4:5 | 1200 × 1500 px |
| Paisagem | 16:9 | 1600 × 900 px |
💡 O tema recorta (
object-fit: cover) a imagem pra caber na proporção escolhida, ele não distorce, mas também não mostra a imagem inteira se a proporção enviada for muito diferente da configurada. Enviar já próximo da proporção certa evita cortes inesperados (ex: rosto ou logo cortado na lateral).
Imagem pesada afeta a velocidade da loja
⚠️ Isso não é só sobre qualidade visual: imagens pesadas deixam a loja mais lenta, o que afeta a experiência de compra, o SEO (a Shopify e o Google penalizam sites lentos) e a taxa de conversão. Uma foto de 8MB direto da câmera, mesmo redimensionada visualmente pelo navegador, ainda precisa ser baixada por inteiro pelo celular do cliente.
Antes de enviar qualquer imagem:
- Comprima antes de enviar. Ferramentas como Squoosh (opens in a new tab), TinyPNG ou o próprio editor de imagem exportando em qualidade 70-80% já reduzem bastante o tamanho sem perda visível.
- Não envie em resolução muito maior que o necessário. Uma imagem de fundo de section não precisa de 6000px de largura, algo entre 1600 e 2500px já cobre até telas grandes.
- Prefira JPEG pra fotos e PNG só quando precisar de transparência (ex: logo). A Shopify já converte e otimiza automaticamente em vários formatos, mas o arquivo original ainda importa.
Boas práticas
- Mantenha um padrão de proporção entre imagens do mesmo tipo (ex: todos os cards de coleção na mesma proporção), evita uma grade com alturas desiguais.