Especificações de imagem para a página Home
Este guia mostra, seção por seção, os tamanhos, proporções e formatos corretos para criar as imagens da home do e-commerce. Siga os passos na ordem — no final há um checklist para conferir antes de exportar.
Mapa da home
A home é composta pelas seções abaixo, na ordem em que aparecem na página. Cada uma tem um formato de imagem específico — clique para ir direto à especificação.
Header & mega menu
Ao abrir o menu, dois cards com imagem aparecem à direita (ex.: “Cuidados com a sua wetsuit”, “Garantia O'Neill”). São imagens pequenas — capriche na nitidez e no enquadramento.
Card de menu — quadrado
| Tamanho recomendado | 700 × 700 px |
| Proporção | 1:1 (quadrada) |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 80 KB |
| Exemplo real | Menu_Wetsuits_HyperSeries_6.jpg — 700×700 |
Card de menu — vertical
| Tamanho recomendado | 375 × 500 px |
| Proporção | 3:4 (vertical) |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 80 KB |
| Exemplo real | Menu-Wetsuit-guide_2.webp — 375×500 |
Fazer
- Centralizar o assunto — o card pode ser levemente cortado
- Usar imagem nítida mesmo em tamanho pequeno
Evitar
- Texto embutido na imagem (o título vai em HTML)
- Fotos muito escuras — o menu tem fundo claro
Slide show (hero)
O banner principal ocupa toda a largura da página e funciona em carrossel. É a imagem de maior impacto da home — e a que mais sofre corte entre desktop e mobile.
Banner hero — desktop
| Tamanho recomendado | 2880 × 1360 px |
| Renderiza em | ~1904 × 842 px (viewport 1920) |
| Proporção | ~2,1:1 (panorâmica) |
| Formato | WebP (preferido) ou JPG |
| Peso máximo | ≤ 300 KB |
| Exemplo real | ..._Heros10_Footer_2880x1360_...webp |
Banner hero — mobile
| Tamanho | 480 px de largura × altura proporcional |
| Proporção | Mesma da arte adaptada (ex.: 480 × 227 px para 2,1:1) |
| Como produzir | Basta adaptar a arte desktop — não é uma composição nova |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 200 KB |
Fazer
- Enviar sempre versão desktop + mobile
- Testar legibilidade do selo/CTA sobre a imagem
- Comprimir sem perder qualidade no rosto/produto
Evitar
- Assunto colado nas bordas (será cortado no mobile)
- Texto pequeno embutido — ilegível no celular
- Enviar arquivo com mais de 300 KB
Vitrines — cards de categoria e coleção
As seções “Explore Wetsuits” e “Coleções” usam um carrossel de cards com foto + título sobreposto (gradiente escuro na base). O card aceita formato quadrado ou retangular (vertical) — escolha um e mantenha o mesmo em todos os cards do carrossel.
Card de vitrine — quadrado ou retangular
| Retangular (vertical) | 900 × 1200 px — 3:4 |
| Quadrado | 900 × 900 px — 1:1 |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 150 KB |
| Exemplo real | HP_9_Defender.webp — 900×972 (~1:1) |
men.webp — 782×612), ela será cortada nas laterais. Componha pensando em 3:4 ou 1:1.Fazer
- Deixar a parte inferior “limpa” — o gradiente escurece a base para o título
- Escolher 3:4 ou 1:1 e manter a mesma proporção em todos os cards do carrossel
Evitar
- Elementos importantes nos 25% inferiores da imagem
- Misturar proporções diferentes (quadrado + retangular) no mesmo carrossel
- Imagem horizontal — será cortada nas laterais
Fotos de produto
Os carrosséis de produto (“Wetsuits”, “Wetsuits Femininas”) exibem a foto do produto em fundo claro/neutro, com nome e preço abaixo. É a imagem mais padronizada do site.
Foto de produto — quadrada
| Tamanho recomendado | 1200 × 1200 px mín. 800 × 800 |
| Proporção | 1:1 (quadrada) |
| Fundo | Cinza claro / branco uniforme |
| Ocupação | Produto centralizado, ~80% do quadro |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 120 KB |
Fazer
- Mesma margem e alinhamento em todos os produtos
- Foto frontal nítida; variantes como imagens adicionais
Evitar
- Fundos coloridos ou com cenário
- Produto cortado ou encostando nas bordas
- Marca d'água ou texto sobre a foto
Seção editorial / banner intermediário
A seção “Uma O'Neill para cada aventura” combina um banner largo com um mosaico de imagens quadradas e retangulares ao lado do texto. É a seção mais livre — mas ainda com medidas definidas.
Banner intermediário — wide
| Tamanho recomendado | 1800 × 638 px |
| Proporção | ~2,8:1 (panorâmica) |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 250 KB |
| Exemplo real | HP_10_Surf_Essentials_Desktop.jpg — 1800×638 |
Mosaico editorial — quadrado + vertical
| Quadrada | 600 × 600 px (1:1) |
| Vertical | 600 × 800 px (3:4) |
| Formato | WebP ou JPG · ≤ 120 KB cada |
| Exemplo real | men.webp — 782×612 (~1,28:1) |
Fazer
- Intercalar quadradas e verticais para um mosaico dinâmico
- Fotos lifestyle/ação combinam melhor que packshot aqui
Evitar
- Todas as imagens na mesma proporção (perde o efeito mosaico)
- Banner wide com assunto central cortado nas bordas
Newsletter — imagem de fundo
O bloco “Assine nossos e-mails” usa uma foto de fundo em largura total com overlay escuro e o formulário centralizado. A imagem é apenas atmosfera — nada essencial deve ficar nela.
Background da newsletter
| Tamanho recomendado | 1920 × 600 px |
| Proporção | ~3,2:1 (faixa panorâmica) |
| Formato | WebP ou JPG |
| Peso máximo | ≤ 200 KB |
Fazer
- Foto com área central “calma” para o formulário
- Tons escuros/frios — texto branco vai por cima
Evitar
- Imagem clara demais (o texto some)
- Rostos/elementos no centro — ficam atrás do formulário
Regras gerais de exportação
Formatos aceitos
| preferido WebP | Fotos e banners — menor peso com qualidade |
| aceito JPG | Fotos sem transparência (qualidade 80–85) |
| só se precisar PNG | Apenas quando houver transparência real |
Pesos máximos
| Hero / banner principal | ≤ 300 KB |
| Banner editorial / newsletter | ≤ 250 KB |
| Cards de vitrine / produto | ≤ 150 KB |
| Cards de menu | ≤ 80 KB |
Padrão de nomenclatura
HP_10_Surf_Essentials_Desktop.jpg
HP_09_Defender.webp
Menu_Wetsuits_HyperSeries_6.jpg
# regras: sem espaços · sem acentos · sem ç · use _ como separador
Resolução
Exporte em 72 dpi e sempre em @1x nas medidas indicadas — o navegador faz o downscale para telas retina. Envie sempre a versão Desktop e Mobile quando a seção exigir.
Próximo: Checklist →Checklist antes de enviar
Confira cada item antes de publicar a arte no CMS:
- Medida correta — a imagem está exatamente na proporção da seção (1:1, 3:4 ou panorâmica)?
- Área segura — nenhum elemento importante a menos de 10% das bordas (hero) ou nos 25% inferiores (cards de vitrine)?
- Peso — arquivo dentro do limite da seção e comprimido (Squoosh / TinyPNG)?
- Formato — WebP sempre que possível; PNG só com transparência?
- Nomenclatura — nome segue o padrão
HP_##_Nome_Dispositivo, sem espaços nem acentos? - Sem texto embutido — títulos e CTAs são HTML; a imagem não carrega texto pequeno?
- Desktop + mobile — as duas versões foram geradas onde necessário?