# Medidas recomendadas para capas, banners e avatars

> Documentação para vendedores da Unefesta.
> Versão HTML: https://www.unefesta.com.br/documentacao-vendedor/gerais/medidas-recomendadas-para-capas-banners-e-avatars

Referência das dimensões de imagens usadas na Unefesta.

---

## Resumo rápido

| Tipo | Dimensões | Proporção | Onde aparece |
|------|-----------|-----------|--------------|
| **Banner da loja** | 1920 × 640 px | 3:1 | Topo da vitrine, listagem de lojas, painel do vendedor |
| **Logo / avatar da loja** | 512 × 512 px | 1:1 | Sobre o banner (canto inferior esquerdo), cards e cabeçalhos |
| **Capa do anúncio** | 1280 × 960 px | 4:3 | Card do catálogo e página do anúncio |
| **Capa do produto/serviço** | 800 × 800 px | 1:1 | Opção (variante) dentro do anúncio |

---

## Loja

### Banner da loja

- **Medida ideal:** 1920 × 640 px (proporção **3:1**)
- **Uso:** capa larga no topo da vitrine
- **Formatos:** JPG, PNG ou WebP
- **Peso sugerido:** até ~500 KB

O banner é recortado automaticamente para caber em cada tela. A altura visível varia:

| Contexto | Altura aproximada |
|----------|-------------------|
| Listagem de lojas | até 192 px |
| Vitrine pública | 160–256 px |
| Painel do vendedor | 96 px |

#### Margem de segurança (sangria)

Deixe cerca de **10%** livre em cada borda para o conteúdo não ser cortado:

| | Medida |
|---|---|
| Margem | ~10% em cada lado |
| Horizontal | ~192 px de cada lado |
| Vertical | ~64 px em cima e embaixo |
| Zona segura (centro) | ~1536 × 512 px |

**Dicas:**

- Mantenha texto e elementos importantes no **centro** da imagem (zona segura).
- Evite detalhes no **canto inferior esquerdo** — o avatar da loja sobrepõe essa área.

### Logo / avatar da loja

- **Medida ideal:** 512 × 512 px (proporção **1:1**)
- **Uso:** identidade visual da loja
- **Formatos:** PNG (com transparência) ou JPG
- **Peso sugerido:** até ~200 KB

**Dicas:**

- Centralize o símbolo — a imagem aparece em formato circular na vitrine.
- Use PNG com fundo transparente quando o logo não for quadrado.

---

## Anúncios

### Capa do anúncio

- **Medida ideal:** 1280 × 960 px (proporção **4:3**)
- **Uso:** imagem principal do anúncio no catálogo e na página de detalhes
- **Formatos:** JPG, PNG ou WebP
- **Peso sugerido:** até ~400 KB

Nos cards do catálogo, a capa é exibida em tamanho menor (~256 × 192 px). Envie em alta resolução para manter nitidez. A imagem também é recortada com `object-cover` conforme o layout.

#### Margem de segurança (sangria)

Deixe cerca de **10%** livre em cada borda:

| | Medida |
|---|---|
| Margem | ~10% em cada lado |
| Horizontal | ~128 px de cada lado |
| Vertical | ~96 px em cima e embaixo |
| Zona segura (centro) | ~1024 × 768 px |

**Dicas:**

- Mantenha o conteúdo importante no **centro** da imagem.
- Evite texto ou logos colados nas bordas — podem ser cortados nos cards.

### Capa do produto/serviço (variante)

- **Medida ideal:** 800 × 800 px (proporção **1:1**)
- **Uso:** imagem de cada opção dentro do anúncio (cor, tamanho, pacote, etc.)
- **Formatos:** JPG, PNG ou WebP
- **Peso sugerido:** até ~300 KB

Itens adicionais usam **apenas uma capa** (sem galeria), escolhida da galeria da loja.

---

## Boas práticas

- Use as **proporções recomendadas** para evitar cortes estranhos.
- Deixe **margem de segurança (~10%)** nas bordas do banner e da capa do anúncio (veja as tabelas acima).
- Não é necessário enviar versões separadas para mobile e desktop — uma imagem nas dimensões acima é suficiente.

---

## Onde configurar

| Imagem | Onde enviar |
|--------|-------------|
| Banner e avatar | Painel do vendedor → Loja |
| Capa do anúncio | Cadastro/edição do anúncio |
| Capa da variante | Cadastro/edição do produto ou serviço |