Dimensão de imagem
O que você vai aprender
- Qual tamanho enviar pra cada opção de "Proporção"
- Como funciona a Largura no desktop e no celular, separadamente
- Por que imagem pesada prejudica a loja, não só o visual
Pra que serve
Vários blocks e sections do tema (Imagem, 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, Retrato, Quadrado, 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 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).
Largura no desktop e no celular
Diferente de outros temas, aqui a largura da imagem é configurada separadamente pro desktop e pro celular:
| Configuração | Pra que serve |
|---|---|
| Largura no desktop | Ajustar (do tamanho do conteúdo), Preencher (ocupa todo o espaço disponível) ou Personalizada (define um percentual de 0 a 100%). |
| Largura personalizada | Só aparece quando Largura no desktop é "Personalizada", define o percentual exato. |
| Largura no celular | Mesmas opções, aplicadas só na visualização mobile. Dá pra ter uma imagem cheia no desktop e menor no celular, ou o contrário. |
| Largura personalizada para celular | Só aparece quando Largura no celular é "Personalizada". |
| Altura | Ajustar ou Preencher. Só aparece quando Proporção é "Automático". |
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, 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.
- Ao usar Largura personalizada, teste em desktop e celular separadamente, o percentual ideal quase nunca é o mesmo nos dois.